InstancedMesh nothing displayed

[Diimsch]

Im currently trying to implement this data visualization proof of concept with angular-three: https://medium.com/cortico/3d-data-visualization-with-react-and-three-js-7272fb6de432#2a39

When using the Instanced Mesh nothing is being displayed

<ngt-instanced-mesh [rotation]="[3.14 * 0.5, 0, 0]" [position]="position" [args]="[1000]">
    <ngt-cylinder-geometry [args]="[0.5, 0.5, 0.15, 32]"></ngt-cylinder-geometry>
    <ngt-mesh-standard-material [parameters]="{color: '#fff'}"></ngt-mesh-standard-material>
 </ngt-instanced-mesh>

results in an empty canvas.

only once i wrap it with <ngt-physics> and add the [getPhysicProps] such as below something is being rendered:

<ngt-physics>
  <ngt-instanced-mesh ngtPhysicSphere [rotation]="[3.14 * 0.5, 0, 0]" [position]="position" [getPhysicProps]="getInstancedProps" [args]="[10]">
    <ngt-cylinder-geometry [args]="[0.5, 0.5, 0.15, 32]"></ngt-cylinder-geometry>
    <ngt-mesh-standard-material [parameters]="{color: '#fff'}"></ngt-mesh-standard-material>
  </ngt-instanced-mesh>
</ngt-physics>

Is physics required to use an instanced mesh or am i just missing something here?

[nartc]

You'd need to setup the position for each instance by using a temp object.

[Diimsch]

Not sure i understand fully. Is there maybe an example somewhere that i could have a look at?

[IRobot1]

I found this three.js instancing example very help in figure this out. This was one of the examples from the three.js InstancedMesh documentation

    <ngt-instanced-mesh #inst="ngtInstancedMesh" [args]="[data.length]" (ready)="ready(inst.mesh)">
      <ngt-box-geometry></ngt-box-geometry>
      <ngt-mesh-standard-material></ngt-mesh-standard-material>
    </ngt-instanced-mesh>

  gap = 1.05
  data = new Array(1000).fill(0).map((d, index) => ({
    position: new Vector3(0, Math.floor(index / 30) * this.gap, (index % 30) * this.gap - 15),
    color: new Color().setColorName('white') //.setHex( Math.random() * 0xffffff ) )
  }));

  ready(inst: InstancedMesh) {
    const matrix = new Matrix4();

    this.data.forEach((item, index) => {
      matrix.setPosition(item.position);
      inst.setMatrixAt(index, matrix);
      inst.setColorAt(index, item.color);
    })
  }

[Diimsch]

Got it to work with your example.
Thanks for the help.