instancedMeshes color not updating with setColor api.

[manthan29jamdagni]

Hi all,

I am trying to render a scene with multiple box elements which I am rendering using instancedMesh. I am also adding an object selection functionality wherein I need to highlight an object and show its properties somewhere. I was able to achieve this when I created each element as individual mesh objects but the performance was not very good, so I decided to use instancedMesh instead.
Using instancedMesh I was able to make the ui performant but now I am not able to replicate the whole functionality of object selection. I was able to solve the selection and populating properties on mouse click but am not able to change the color to highlight the selected instance. I am a newbie to threejs so would really appreciate any help on this.

Here is my how my code looks like -

interface SceneItemsProps {
  items: Array<Item>;
  selectedItemId: string;
  onSelect: (event: MouseEvent, type: SelectableItemType, id: string) => void;
}

const SceneItems = ({ items, selectedItemId, onSelect }: SceneItemsProps): JSX.Element => {
  const ref = useRef<THREE.InstancedMesh>();
  const meshref = ref.current;
  useFrame(() => {
    const instance = new THREE.Object3D();
    items.forEach((item, index) => {
      const geometry = CuboidFactory.extractBasicGeometry(item);
      const angle = CuboidFactory.getEulerAngleFrom(geometry);
      instance.position.set(geometry.position.x, geometry.position.y, geometry.position.z);
      instance.rotation.copy(angle);
      instance.scale.set(geometry.dimensions.width, geometry.dimensions.length, geometry.dimensions.height);
      instance.updateMatrix();
      if (meshref) {
        meshref.setMatrixAt(index, instance.matrix);
        const color = selectedItemId === item.getId() ? 'red' : 'white';
        meshref.setColorAt(index, new THREE.Color(color));
      }
    });
    if (meshref) {
      meshref.instanceMatrix.needsUpdate = true;
      meshref.instanceColor && (meshref.instanceColor.needsUpdate = true);
    }
  });

  return (
    <instancedMesh
      ref={ref}
      args={[(null as unknown) as BufferGeometry, (null as unknown) as Material, items.length]}
      onClick={(event) => {
        onSelect(event, SelectableItemType.Item, items[event.instanceId as number].getId());
        event.stopPropagation();
      }}>
      <boxBufferGeometry />
      <meshLambertMaterial wireframe />
    </instancedMesh>
  );
};

export default SceneItems;

  <Canvas 
    gl={{ powerPreference: 'high-performance', antialias: true, pixelRatio: window.devicePixelRatio }}
    camera={{
        position: [0, 0, locLayout.oppositeCorner.z],
        left: 0,
        right: locLayout.getWidth(),
        top: locLayout.getHeight(),
        bottom: 0,
        near: 0.1,
        far: locLayout.getDepth() + locLayout.padding,
    }}
    orthographic>
    <orbitControls enableRotate={false} args={[camera, gl.domElement]} 
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <SceneItems items={props.items} selectedItemId={selectedItemId} onSelect={onSelect}>
  </Canvas>

I've just added the canvas and the problematic component here. Can add more code/details if required. I feel meshref.setColorAt & meshref.instanceColor.needsUpdate should do the job but for some reason are not working. Currently all objects are getting rendered as white but are not changing to red onClick, the onClick does change the selectedItemId and setColorAt is called with red, but the instance color does not change on canvas.

[drcmda]

never heard of setColorAt, i've always used the vertex color array directly https://codesandbox.io/s/instanced-vertex-colors-8fo01?file=/src/index.js:1365-1374

[manthan29jamdagni]

Vertex color array works, thanks :) Though I am still trying to make it work with setColorAt api. Will mark your reply as answer if I am not able to figure out how to solve it with setColorApi.