question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

InstancedMesh's setMatrixAt fails when another mesh in the scene has the same material

See original GitHub issue
Description 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:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
Mugen87commented, Mar 2, 2020

@mracette Good point. Let me update the docs.

3reactions
mracettecommented, Mar 1, 2020

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found