threejs - 在tubeGeometry周围添加填充

时间:2018-04-16 17:31:40

标签: three.js

我有一个可点击的细管但很难点击它。我想在管周围添加一个隐形衬垫,以便于点击。以下是代码:

<mesh onClick={this.onClick}>
  <tubeGeometry
    path={curve}
    radius={0.3}
    segments={8}
    radiusSegments={8}
  />
  <materialResource resourceId={"connectionMaterial" + layer} />
</mesh>

有没有办法在网格中添加填充?

1 个答案:

答案 0 :(得分:0)

一种简单的方法是在第一个管道周围以所需的可点击尺寸创建第二个管道。在为管子创建材料时,只需提供以下参数,使其不可见但可点击。

let mat = new MeshBasicMaterial({ 
color: #ffffff,
side: DoubleSide,
alphaTest: 0,
lights: false });

除了将管子干净地连接在一起外,您还可以做以下两件事之一:

  • 为该组创建一个Group.add()两个管。
  • .add()您的可点击管到您的可见管。

我希望有所帮助!

编辑:

您可以使用Object3d添加一个.add()作为另一个的孩子。这看起来像:

import { Group } from 'three'; // es6 

let myTube; // Your visible tube
let myClickableTube; // Your larger clickable tube

let group = new Group(); // This will hold both tubes
group.add(myTube);
group.add(myClickableTube);

let myTube; // Your visible tube
let myClickableTube; // Your larger clickable tube

myTube.add(myClickableTube);