# How to change instance color by r3f?

**URL:** <https://discourse.threejs.org/t/how-to-change-instance-color-by-r3f/53157>\
**Category:** Questions\
**Tags:** r3f, materials, instanced-mesh, react-three-fiber\
**Created:** [June 23, 2023, 5:53pm UTC](https://discourse.threejs.org/t/how-to-change-instance-color-by-r3f/53157 "2023-06-23T17:53:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![neciszhang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/neciszhang/32/18988_2.png) [@neciszhang](https://discourse.threejs.org/u/neciszhang)\
**Post date:** [June 23, 2023, 5:53pm UTC](https://discourse.threejs.org/t/how-to-change-instance-color-by-r3f/53157/1 "2023-06-23T17:53:02Z")

</div>

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](https://codesandbox.io/s/floating-instanced-shoes-forked-l9j4nl?file=/src/App.js)

```javascript
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>
  );
}

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 23, 2023, 8:22pm UTC](https://discourse.threejs.org/t/how-to-change-instance-color-by-r3f/53157/2 "2023-06-23T20:22:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![neciszhang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/neciszhang/32/18988_2.png) [@neciszhang](https://discourse.threejs.org/u/neciszhang)\
**Post date:** [June 24, 2023, 5:55am UTC](https://discourse.threejs.org/t/how-to-change-instance-color-by-r3f/53157/4 "2023-06-24T05:55:30Z")

</div>

Hi, Drcmda,

> [@neciszhang](#):
>
> `<instances.Cube />`

`\<instances.Cube color=‘red’ /\> doesn’t work.  
[Here is codesandbox link,](https://codesandbox.io/s/floating-instanced-shoes-forked-l9j4nl?file=/src/App.js)can you help me to see this?

---

<div class="post-metadata">

**Author:** ![neciszhang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/neciszhang/32/18988_2.png) [@neciszhang](https://discourse.threejs.org/u/neciszhang)\
**Post date:** [June 24, 2023, 11:15am UTC](https://discourse.threejs.org/t/how-to-change-instance-color-by-r3f/53157/5 "2023-06-24T11:15:05Z")

</div>

Hi, it doesn’t work, nodes.cube is PositionMesh. it’s not include material.  
[Here is codesandbox link](https://codesandbox.io/s/floating-instanced-shoes-forked-l9j4nl?file=/src/App.js)

---

<div class="post-metadata">

**Author:** ![neciszhang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/neciszhang/32/18988_2.png) [@neciszhang](https://discourse.threejs.org/u/neciszhang)\
**Post date:** [June 24, 2023, 11:38am UTC](https://discourse.threejs.org/t/how-to-change-instance-color-by-r3f/53157/6 "2023-06-24T11:38:15Z")

</div>

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.