5

I want to have an effect similar to this question, in Aframe, to have layered swappable textures on a single model:

I am wondering if there is a standard process I have missed in Threejs so that I can continue to use the standard shader; or do I have to fork it and add the multi-texture capability myself in a custom shader?

Thanks!

WestLangley
  • 102,557
  • 10
  • 276
  • 276
Anthony Scavarelli
  • 139
  • 1
  • 8
  • 2
    Is [this](https://github.com/mrdoob/three.js/issues/12135) what you mean? – WestLangley Apr 07 '18 at 02:14
  • 2
    Could you combine the textures on a canvas and use that as your texture like [THIS](https://jsfiddle.net/2pha/e6rbt3r4/)? – 2pha Apr 07 '18 at 08:23
  • These are both great solutions. Thank you. I think the groups is probably more along the lines of what I am looking for (multiple materials) but I love the simplicity off the canvas decal system. Thanks both! – Anthony Scavarelli Apr 07 '18 at 12:30

1 Answers1

10

You want to layer materials or textures using three.js.

Here is a pattern that currently works:

var geometry = new THREE.BoxGeometry( 10, 10, 10 );
geometry.clearGroups();
geometry.addGroup( 0, Infinity, 0 );
geometry.addGroup( 0, Infinity, 1 );
geometry.addGroup( 0, Infinity, 2 );
geometry.addGroup( 0, Infinity, 3 );

var materials = [ material0, material1, material2, material3 ];

// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );

three.js r.144

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • You said you can do this to layer materials or textures. How would you do this with textures? – cmomoney Jun 12 '18 at 14:13
  • @cmomoney You set `material0.map = texture0; material1.map = texture1`; – WestLangley Jun 12 '18 at 16:23
  • For others attempting to use this method while also using a raycaster (e.g. `const intersectsModels = raycaster.intersectObjects(objectScene.children, true);`): add a finite number for the second parameter, else your script will hang! Even something big like this will work: `geometry.addGroup( 0, 50000, 0 ); geometry.addGroup( 0, 50000, 1 );` – robotconscience Feb 08 '22 at 01:14
  • It would appear that this is unsupported in three.js as of 4/2023, or am I missing something? The documentation explicity states: "Every vertex and index must belong to exactly one group — groups must not share vertices or indices, and must not leave vertices or indices unused." – Gerhard Wesp Apr 25 '23 at 05:05
  • @GerhardWesp Certain operations like merging groups may no longer work as expected. Did you try the suggestion on a recent release? – WestLangley Apr 25 '23 at 17:36