I have been experimenting with incorporating a gltf model into a three js project and I'm wondering if there's a way to reverse a gltf animation when the mouse moves away from the model. Currently, I've managed to trigger the animation as the mouse hovers over the model, but now I'd like to play it in reverse when the mouse leaves the area. If anyone has any suggestions on how I can achieve this, I would greatly appreciate your input. Thank you.
import * as THREE from 'three';
import { GLTFLoader } from 'GLTFLoader';
import { OrbitControls } from 'OrbitControls';
// Setting up the 3D Scene
var scene = new THREE.Scene();
scene.background = new THREE.Color('black');
const pointer = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
// Defining Camera Perspective
var camera = new THREE.PerspectiveCamera( 25, window.innerWidth /
window.innerHeight );
camera.position.set( 10, 1, 25 );
// Creating Renderer
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Initializing Orbitcontroller
var controls = new OrbitControls( camera, renderer.domElement );
// Adding Ambient Light
var ambientLight = new THREE.AmbientLight( 0xFFFFFF );
scene.add( ambientLight );
// Loading gltf model and initiating animation
var mixer;
var mouse = new THREE.Vector2(1, 1);
var loader = new GLTFLoader();
loader.load( './assets/itc.glb', function ( gltf ) {
var object = gltf.scene;
scene.add( object );
mixer = new THREE.AnimationMixer( object );
var action;
gltf.animations.forEach((clip) => {
action = mixer.clipAction(clip);
action.setLoop(THREE.LoopOnce);
action.clampWhenFinished = true;
action.play();
});
object.scale.set( 2, 2, 2 );
object.rotation.y = 37.0;
object.position.x = -10;
object.position.y = -5;
object.position.z = -15;
});
// Animation Function
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame( animate );
raycaster.setFromCamera( pointer, camera );
const intersects = raycaster.intersectObjects( scene.children );
if (intersects.length){
mixer.update(clock.getDelta());
}
else{
// code for reversing animation upon mouse leaving the gltf model
}
renderer.render( scene, camera );
}
// Render Function
function render() {
requestAnimationFrame(render);
renderer.render( scene, camera );
}
// Handling Window Resize
var tanFOV = Math.tan( ( ( Math.PI / 180 ) * camera.fov / 2 ) );
var windowHeight = window.innerHeight;
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize( event ) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.fov = ( 360 / Math.PI ) * Math.atan( tanFOV * (
window.innerHeight / windowHeight ) );
camera.updateProjectionMatrix();
camera.lookAt( scene.position );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.render( scene, camera );
}
function onPointerMove( event ) {
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
window.addEventListener( 'pointermove', onPointerMove );
render();
animate();