InstancedMesh's setMatrixAt fails when another mesh in the scene has the same material
See original GitHub issueDescription of the problem
I’m having a problem where the InstancedMesh method setMatrixAt
seems to fail (the matrix positions doesn’t change visually) whenever I add another object with the same material object (not a clone) in the scene. No log/warning/errors are emitted.
The following briefly illustrates:
var geometry = new THREE.BoxBufferGeometry();
var material = new THREE.MeshStandardMaterial( { roughness: 0, envMap: texture });
var mesh1 = new THREE.Mesh( geometry, material );
mesh1.position.set(0, 1, 0);
scene.add( mesh1 ); // removing this line makes the instanced mesh work as intended
mesh = new THREE.InstancedMesh( geometry, material, 9 ); // same material usage
scene.add( mesh ); // This works and I can see both meshes in the scene.
var dummy = new THREE.Object3D();
dummy.position.set( 1, 5, 1 );
dummy.updateMatrix();
mesh.setMatrixAt( 0, dummy.matrix ); // Nope, doesn't work, it just stays where it's at.
mesh.setMatrixAt( 1, dummy.matrix ); // Rotation seems to be applied, but position doesn't.
// It looks like every instance is at the same place, but I don't know.
Note that if I use material.clone() at the instanced mesh declaration, the problem also goes away / is fixed, but now I have two materials, and I intend to have one for performance reasons.
A live example is available here:
- jsfiddle (The problem is that you should see multiple boxes, but only 1 or 2 are visible, remove line 41 to fix)
Three.js version
- Dev
- r109
- r108
Browser
- All of them
- Chrome
- Firefox
- Internet Explorer
OS
- All of them
- Windows
- macOS
- Linux
- Android
- iOS
Hardware Requirements (graphics card, VR Device, …)
(Not applicable, as far as I know)
Issue Analytics
- State:
- Created 4 years ago
- Reactions:5
- Comments:10 (2 by maintainers)
Top Results From Across the Web
Problem with multiple materials for InstancedMesh - Questions
instanceMatrix.needUpdate = true; scene.add(mesh);. When I try to create InstancedMesh with different materials for each face then it breaks.
Read more >Troubleshooting InstancedMesh in Three.js | by Leanne Werner
According to the Three.js docs, you should use an instancedMesh when creating a lot of objects with the same geometry and material but...
Read more >How to get InstancedMesh working properly? : r/threejs - Reddit
The instancing works by repeatedly calling the same geometry, but with different transform matrix. instead of a regular modelViewMatrix and such ...
Read more >How do I set colors for three js instanced objects?
I had to use MeshPhongMaterial rather than MeshNormalMaterial. ... InstancedMesh( geometry, material, count ); var instanceColorsBase = new ...
Read more >The Big List of three.js Tips and Tricks!
1. Check the browser console for error messages# · 2. Set the background color to something other than black# · 3. Make sure...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@mracette Good point. Let me update the docs.
I just got bit by this as well. A note in the docs while the fix is underway would be great. https://threejs.org/docs/#api/en/objects/InstancedMesh