1

I am trying to animate a door opening if you click on a sphere dot in three.js. I managed to have the door rotating when I click on the sphere mesh but it rotates to quickly. Instead of me seeing its rotation I only see it appear in the correct final angle.

Is there a way for me to slow that rotation down? So that I can see the door rotating?

I am just learning three.js so I'm not sure if that's even possible.

I thought that if I put the rotation angle into a loop it would slow it down but it didn't.

All of the code below is in the init() function.

    clock = new THREE.Clock();                        
    var loader = new THREE.GLTFLoader();
    var angle = 2;
    loader.load('THECHOCOLATEDOORGLTF.glb', function(gltf){
    door = gltf.scene.children[0];
    door.scale.set(25,25,25);
    scene.add(gltf.scene);
    door.position.z -=0;
    door.position.x = 0;
    door.rotation.setFromVector3(new THREE.Vector3( 0, Math.PI / angle,0));
    animate();
    });



    const geometry = new THREE.SphereGeometry(10, 20, 10);
    const material = new THREE.MeshNormalMaterial({wireframe: true});
    sphere = new THREE.Mesh(geometry, material);
    sphere.position.x = -200;
    sphere.position.y = 200;
    scene.add(sphere);

    domEvents = new THREEx.DomEvents(camera, renderer.domElement);
    let sphereClicked = false;
    domEvents.addEventListener(sphere, 'click', event => {

    var time = clock.getElapsedTime();
    var delta = clock.getDelta();



      if (!sphereClicked ){
        while ( angle > 1.1) {
          angle = angle - delta * Math.PI / 180;
        }

        door.rotation.setFromVector3(new THREE.Vector3( 0, Math.PI / angle,0));
        sphereClicked = true;
      }
      else {
        door.rotation.setFromVector3(new THREE.Vector3( 0, Math.PI / 2,0));
        sphereClicked = false;
      }
    });
A.Najafi
  • 691
  • 1
  • 9
  • 20
Kamila Jarek
  • 117
  • 2
  • 12
  • You can add animation to it. Refer to this [answer](https://stackoverflow.com/a/40106019/6521116) – LF00 Oct 31 '19 at 08:08
  • Kris Roofe, I'm not really sure what I'm supposed to look for in this answer. – Kamila Jarek Oct 31 '19 at 08:16
  • You need to use animation, which has a preper speed. Not with while loop which use the frequency of computer core. – LF00 Oct 31 '19 at 08:33
  • In this example they make the cube rotate or spin by using this line: mesh.rotation.y += 0.01; but I can't use this because I want the door to rotate to a certain angle and then stop. – Kamila Jarek Oct 31 '19 at 09:03

0 Answers0