Play a gltf animation on hover of the loaded in gltf model using three js?

Viewed 18

I would like to know if there is any way to play a gltf animation when the mouse hovers over the loaded gltf model using three js. I have been able to play the gltf animation alone (without hovering over the model) but I am having trouble creating the function for when the object is being hovered over. I have attached the code that I have completed so far (just loading in the model and playing the animation). If anyone could please give me some insight on how I might go about playing the gltf animation when the mouse is hovering over the loaded gltf model, it would be greatly appreciated. I have tried using three js's documented onPointerMove function but I believe that my implementation was incorrect. I have been stuck on this for a little and would just like some help. Thank you in advance, bso.

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 Perspektive
var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight);
camera.position.set( 1, 1, 15 );

// 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( 0xcccccc );
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 );
gltf.animations.forEach((clip) => {
    mixer.clipAction(clip).play();
});

object.scale.set( 2, 2, 2 );
object.position.x = 0;                  //Position (x = right+ left-)
object.position.y = -5;                 //Position (y = up+, down-)
object.position.z = -10;                //Position (z = front +, back-)

});


// Animate function
const clock = new THREE.Clock();
function animate() {
  if (mixer)
    mixer.update(clock.getDelta());
    requestAnimationFrame( animate );
}

// 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 );
}

render();
animate();
0 Answers
Related