Rotate GLTF model with Mouse Move

Questions
6

Mr.DeltaFrog

I didn’t make it clear enough.

“MyModel” is Async Object.
Before Loading “MyModel”, Animate Functions is moving.
for that reason, it needs "if (my Model){}"in animate Functions.
Below this put Sample Code.

if (myModel){
  myModel.rotation.x += 2 * (targetY - myModel.rotation.x);
  myModel.rotation.y += 1.5 * (targetX - myModel.rotation.y);
}

if you want to remove sphere objects, sphere removed or set “visiable” “false”

“remove objects”

function animate () {
    targetX = mouseX * .001
    targetY = mouseY * .001

    const elapsedTime = clock.getElapsedTime()
    
  if (myModel){
     myModel.rotation.set(targetY, targetX, myModel.rotation.z);
    // Sphere Remove
    if (sphere.parent === scene){{
      scene.remove(sphere);
      sphere.material.dispose();
      sphere.geometry.dispose();
    }
  }

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
   window.requestAnimationFrame(animate)
    
}

“visible: false”

if (myModel){
   myModel.rotation.set(targetY, targetX, myModel.rotation.z);
   sphere.visible = false; // Here
}

Also, easing can be expressed as “value += (target value - current value) * deceleration value”.

EasingExample

let mouseX
let mouseY

let targetX
let targetY

const windowHalfX = window.innerWidth / 2
const windowHalfY = window.innerHeight / 2
let targetRotation = new THREE.Vector2();
let currentRotation = new THREE.Vector2();
let rotationSpeed = 0.01;
function onDocumentMouseMove (event) {
    mouseX = (event.clientX - windowHalfX)
    mouseY = (event.clientY - windowHalfY)
  targetRotation.x = mouseX;
  targetRotation.y = mouseY;
}


const clock = new THREE.Clock()
let isEasing = true;
function animate () {
    
    let d = .001;
    targetX = mouseX * d;
    targetY = mouseY * d;
    currentRotation.x += (targetRotation.x - currentRotation.x) * rotationSpeed;
    currentRotation.y += (targetRotation.y - currentRotation.y) * rotationSpeed;

    const elapsedTime = clock.getElapsedTime()
    
  if (myModel){
    if (isEasing){
      myModel.rotation.set(currentRotation.y * Math.PI / 180, currentRotation.x * Math.PI / 180, myModel.rotation.z);
    }
    else {
      myModel.rotation.set(targetY, targetX, myModel.rotation.z);
    }
    if (sphere.parent === scene){
      scene.remove(sphere);
      sphere.material.dispose();
      sphere.geometry.dispose();
    }
  }

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
   window.requestAnimationFrame(animate)
    
}

animate()

i hope i can help you

1 Like