# Issue with object rotation when using Threejs in React

**URL:** <https://discourse.threejs.org/t/issue-with-object-rotation-when-using-threejs-in-react/36508>\
**Category:** Questions\
**Tags:** transform\
**Created:** [March 29, 2022, 5:39pm UTC](https://discourse.threejs.org/t/issue-with-object-rotation-when-using-threejs-in-react/36508 "2022-03-29T17:39:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrew2](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew2/32/23198_2.png) [@Andrew2](https://discourse.threejs.org/u/Andrew2)\
**Post date:** [March 29, 2022, 5:39pm UTC](https://discourse.threejs.org/t/issue-with-object-rotation-when-using-threejs-in-react/36508/1 "2022-03-29T17:39:54Z")

</div>

I am using ThreeJS in React so I can keep using threejs in a format I am comfortable with. When using it I am having trouble getting me GLTF model to rotate in the animate function. I believe this has to do with scope but I am unsure how to resolve it. Does anyone have some suggestions to fixing this problem?  
Here is the code

```javascript
export default class Apps extends React.Component {
  constructor(props) {
    super(props);

    this.start = this.start.bind(this);
    this.stop = this.stop.bind(this);
    this.animate = this.animate.bind(this);
  }
  componentDidMount() {
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    const spiral = new URL("../../assets/spiralTop.gltf", import.meta.url);
    const assetLoader = new GLTFLoader();
    var model;
    assetLoader.load(
      spiral.href,
      function (gltf) {
        model2 = gltf.scene;
        var newMaterial = new THREE.MeshStandardMaterial({ color: 0xff8282 });
        model2.traverse((o) => {
          if (o.isMesh) o.material = newMaterial;
        });
        scene.add(model2);
        model2.position.set(0, 0, -3);
        model2.receiveShadow = true;
        model2.scale.set(1.6, 1.6, 1.6);
      },
      undefined,
      function (error) {
        console.error(error);
      }
    );
    new THREE.MeshStandardMaterial({
        color: new THREE.Color(1, 0, 0)
    });
    camera.position.set(0.27, 0, 13.5);
    renderer.setClearColor("#000000");
    renderer.setSize(width, height);
    const spotLight = new THREE.SpotLight(0xffffff);
    scene.add(spotLight);
    spotLight.position.set(0, 0, 100);
    spotLight.castShadow = true;
    spotLight.angle = 0.2;
    spotLight.intensity = 0.9;
    this.spotLight = spotLight;
    this.scene = scene;
    this.camera = camera;
    this.renderer = renderer;
    this.spiral = spiral;
    this.assetLoader = assetLoader;
    this.material = material;
    this.mount.appendChild(this.renderer.domElement);
    this.start();
    window.addEventListener("resize", function () {
      camera.aspect = window.innerWidth / this.window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  }
  componentWillUnmount() {
    this.stop();
    this.mount.removeChild(this.renderer.domElement);
  }
  start() {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate);
    }
  }
  stop() {
    cancelAnimationFrame(this.frameId);
  }
  animate() {
    this.renderScene();
    this.model.rotation.y += 0.00015;
    this.frameId = window.requestAnimationFrame(this.animate);
  }
  renderScene() {
    this.renderer.render(this.scene, this.camera);
  }
  render() {
    return (
      <div
        style={{ width: "100vw", height: "100vh" }}
        ref={(mount) => {
          this.mount = mount;
        }}
      />
    );
  }
}
ReactDOM.render(<Apps />, document.getElementById("root"));

```

---

<div class="post-metadata">

**Author:** ![donniedudev](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@donniedudev](https://discourse.threejs.org/u/donniedudev)\
**Post date:** [March 29, 2022, 8:23pm UTC](https://discourse.threejs.org/t/issue-with-object-rotation-when-using-threejs-in-react/36508/2 "2022-03-29T20:23:22Z")

</div>

I think loadAsync would be a good choice when loading assets in threejs & react project.  
Basically you can use it like thils.  
useEffect(()=\>{  
(async()=\>{  
// Here you can declare all ThreeJS vars.  
const model = (await new GLTFLoader().loadAsync(filePath)).scene  
console.log(model)  
})()

})