InstancedMesh mesh visibility from different angles | mesh order?

Questions
1

Hi everyone,

Question:

I am using instancedMesh and for loop in order to display array of boxes with random height/width. The problem is if i rotate with orbit control around i see very weird artifact, alsmot like boxes are not ordered correctly, how do i fix it ? Attaching screenshot

Untitled-2
Untitled-21600×1170 147 KB

2

It looks like you might be setting .transparent = true on your materials. Avoid that unless you really need it. Transparency is always order-dependent, and order gets particularly difficult with instanced meshes because the renderer can no longer sort them for you at runtime, as it would normally do.

If it’s not that, you may need to share enough detail that someone can reproduce the problem.

3

Thanks for the reply ! I am not using transparency, here is very simplyfied code. I have a feeling it has to do with order, but by some reason i did not see this issue in any other examples


this.instanceCount = 4
this.boxMaterialBasic = new THREE.MeshNormalMaterial({})
this.geo = new THREE.BoxGeometry( 1, 1, 1 )
this.mesh = new THREE.InstancedMesh(this.geo, this.boxMaterialBasic,this.instanceCount)
this.transform = new THREE.Object3D();
this.ii = 0
for (let i = 0; i < this.instanceCount; i++) {
      this.transform.position.set(i,i,0)
      this.transform.scale.set(1,1,1)
      this.transform.updateMatrix()
      this.mesh.setMatrixAt(this.ii++,this.transform.matrix)
  }

  this.scene.add(this.mesh)
4

ezgif-5-cbd4a8979f

5

Check your camera settings, could be you either have far plane less than near for perspective or flipped left/right/top/bottom values for ortho camera.

6

Thanks, it worked,
My near value was too low

this.camera = new THREE.PerspectiveCamera(
      70,
      aspect,
      1,
      100
    );