how to use InstancedBufferGeometry with threejs

Question

When I use InstancedBufferGeometry not to show. (when below code remove comment out, the polygon was showed.) However i use BufferGeometry when the polygon was showed.

why below code not working.

please teach me.

const createGeometry = () => {
    // const geometry = new THREE.BufferGeometry();
    const geometry = new THREE.InstancedBufferGeometry();
    const positions = new THREE.BufferAttribute(new Float32Array(4 * 3), 3);
    const uvs = new THREE.BufferAttribute(new Float32Array(4 * 2), 2);

    positions.setXYZ(0, -0.5, 0.5, 1.0);
    positions.setXYZ(1, 0.5, 0.5, 1.0);
    positions.setXYZ(2, -0.5, -0.5, 1.0);
    positions.setXYZ(3, 0.5, -0.5, 1.0);
    uvs.setXYZ(0, 0.0, 0.0);
    uvs.setXYZ(1, 1.0, 0.0);
    uvs.setXYZ(2, 0.0, 1.0);
    uvs.setXYZ(3, 1.0, 1.0);
    geometry.setAttribute("position", positions);
    geometry.setAttribute("uv", uvs);

    geometry.setIndex(
      new THREE.BufferAttribute(new Uint16Array([0, 2, 1, 2, 3, 1]), 1)
    );

    return geometry;
  };

when BufferGeometry was used.

enter image description here

Working with InstancedBufferGeometry involves the using of a modified material or shader material, where you manage, at least, positions of instances, and for that you'll have to have an InstancedBufferAttribute (example). And to make things easier, maybe better to try InstancedMesh, there are several official examples: threejs.org/examples/?q=instancing#webgl_instancing_raycast And InstancedMesh also supports raycasting. — prisoner849

Mugen87 Mugen87 · Accepted Answer · 2020-09-07T10:35:52

Using an InstancedBufferGeometry without at least a single InstancedBufferAttribute is not supported.

This usage does not even make sense because you want to have one or more attributes which define the variations per instance.

how to use InstancedBufferGeometry with threejs

1 Answers