How to change instance color by r3f?

Questions
, , ,
1

Hi, I create instance all by use gltfjsx.I don’t know how to do it, I need to generate 10 instances.Cube with different colors.Please help.
Here is link

import React, { useRef, useMemo, useContext, createContext } from "react";
import { useGLTF, Merged } from "@react-three/drei";

const context = createContext();
export function Instances({ children, ...props }) {
  const { nodes } = useGLTF("/magicCube0622.glb");
  const instances = useMemo(
    () => ({
      Arrow: nodes.arrow1,
      Cube: nodes.cube,
    }),
    [nodes]
  );
  return (
    <Merged meshes={instances} {...props}>
      {(instances) => (
        <context.Provider value={instances} children={children} />
      )}
    </Merged>
  );
}

export function Model(props) {
  const instances = useContext(context);
  return (
    <group {...props} dispose={null}>
      <instances.Arrow />
      <instances.Cube />
    </group>
  );
}
2

with the color property. <SomeInstance color="red" />

4

Hi, Drcmda,

`<instances.Cube color=‘red’ /> doesn’t work.
Here is codesandbox link,can you help me to see this?

5

Hi, it doesn’t work, nodes.cube is PositionMesh. it’s not include material.
Here is codesandbox link

6

Yes, this works. I changed the color of the model to white to make it work. If the material is black, it doesn’t work with this.