javascript - three.js - 管段上的 TubeGeometry + DecalGeometry

Question

我想在管几何体的一段内(在背面)放置贴花。

我的做法是使用 TubeGeometry 作为贴花几何体。

这是我的:

这就是我想要的: (画得不好)

示例代码:

//code
var tube = new THREE.TubeGeometry(pipelineSpline, 200, 20, 20, closed2);

tubeMesh = THREE.SceneUtils.createMultiMaterialObject(
       geometry, [
            material,       // a phong material
            materialInside // a material for the inside               
       ]);

scene.add(tubeMesh); 

var decalGeometry = new THREE.DecalGeometry(
      tubeMesh.children[0], 
      new THREE.Vector3(0,0,0),      //position
      new THREE.Vector3(0,1,0),      //direction
      new THREE.Vector3(10,10,10),   //dimensions
      new THREE.Vector3(0,0,0)       //check
    );

然而，这似乎是沿着所有背面几何路径应用 pipe 贴花。我只希望它位于 pipe 背面的关键位置的一部分。

如何使用 THREE.DecalGeometry 在 TubeGeometry 中制作局部贴花？可能吗？

Answer 1

为此，您需要使用 ShaderMaterial，并在着色器代码和各种 uniform(例如，新纹理)中定义定位和不透明度规则，以及parameter(例如，UV)值由 THREE.js 传递给它。