Comment jouer une animation gltf à l'envers si intersects n'est pas vrai. Trois JS

Question

J'ai travaillé sur l'implémentation d'un modèle gltf dans un projet three js et j'aimerais savoir s'il existe un moyen d'inverser une animation gltf lorsque la souris s'éloigne du modèle gltf. Jusqu'à présent, j'ai réussi à faire jouer l'animation du modèle gltf lorsque la souris survole le modèle, mais j'aimerais inverser l'animation une fois que la souris quitte le modèle. Si quelqu'un pouvait me donner un aperçu de la façon dont je pourrais procéder, ce serait très apprécié. Je vous remercie.

import * as THREE from 'three'; 
import { GLTFLoader } from 'GLTFLoader';
import { OrbitControls } from 'OrbitControls';

// Load 3D Scene
var scene = new THREE.Scene();
scene.background = new THREE.Color('black');
const pointer = new THREE.Vector2();
const raycaster = new THREE.Raycaster();

// Load Camera Perspective
var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / 
window.innerHeight );
camera.position.set( 10, 1, 25 );

// Load a Renderer
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Load the Orbitcontroller
var controls = new OrbitControls( camera, renderer.domElement );

// Load Light
var ambientLight = new THREE.AmbientLight( 0xFFFFFF );
scene.add( ambientLight );

// Load gltf model and play 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;                  //Position (x = right+ left-)
object.position.y = -5;                 //Position (y = up+, down-)
object.position.z = -15;                  //Position (z = front +, back-)

});

// Animate 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{
      // How can i reverse the animation when mouse pointer leaves the gltf model
    }
    renderer.render( scene, camera );
}

// Render function
function render() {
 requestAnimationFrame(render);
 renderer.render( scene, camera );
}

// On 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;
// adjust the FOV
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();

Answer 1

Une façon simple d'inverser une animation est de définir le paramètre échelle de temps à la propriété - 1 . Donc dans votre cas :

action.timeScale = - 1;

Vous pouvez mettre à jour le timeScale à n'importe quel moment de votre code.