three.js - TubeGeometry + DecalGeometry on a segment of the tube

Question

I want to put a decal inside a segment of a tube geometry (in the backface).

The way I do is use TubeGeometry as the decal geometry.

This is what I have:

And this is what I want: (bad drawing)

Sample code:

//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
    );

However this seems to apply a decal of the tube along all the backside geometry path. And I want it only on one part of the BackSide of the Tube on key positions.

How can I make a localized decal in a TubeGeometry using THREE.DecalGeometry? Is it possible?

Answer 1

You will need to use a ShaderMaterial for this, and define the positioning and opacity rules in the shader code and the various uniform (e.g., the new texture) and parameter (e.g., UV) values passed to it by THREE.js.