What I am trying to do is determine which gltf is intersected and only play the animation for that gltf instead of all of them. Right now I am able to see if any scene.children is intersected and play all animations. Any help is appreciated.
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(0xFFFFFF);
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( 0, -.5, 26 );
// 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 mixer1, mixer2, mixer3, mixer4;
var mouse = new THREE.Vector2(1, 1);
var loader = new GLTFLoader();
var loader2 = new GLTFLoader();
var loader3 = new GLTFLoader();
var loader4 = new GLTFLoader();
loader.load( './assets/itc.glb', function ( gltf ) {
const object1 = gltf.scene;
scene.add( object1 );
mixer1 = new THREE.AnimationMixer( object1 );
var action1;
gltf.animations.forEach((clip) => {
action1 = mixer1.clipAction(clip);
action1.setLoop(THREE.LoopOnce);
action1.clampWhenFinished = true;
action1.play();
});
object1.scale.set( 2, 2, 2 );
object1.rotation.y = 37.0;
object1.position.x = -10; //Position (x = right+ left-)
object1.position.y = -5; //Position (y = up+, down-)
object1.position.z = -15; //Position (z = front +, back-)
});
loader2.load( './assets/itc_card.glb', function ( gltf ) {
var object2 = gltf.scene;
scene.add( object2 );
mixer2 = new THREE.AnimationMixer( object2 );
var action2;
gltf.animations.forEach((clip) => {
action2 = mixer2.clipAction(clip);
action2.setLoop(THREE.LoopOnce);
action2.clampWhenFinished = true;
action2.play();
});
object2.scale.set( 2, 2, 2 );
object2.position.x = -10; //Position (x = right+ left-)
object2.position.y = -3; //Position (y = up+, down-)
object2.position.z = -15; //Position (z = front +, back-)
});
loader3.load( './assets/itc.glb', function ( gltf ) {
var object3 = gltf.scene;
scene.add( object3 );
mixer3 = new THREE.AnimationMixer( object3 );
var action3;
gltf.animations.forEach((clip) => {
action3 = mixer3.clipAction(clip);
action3.setLoop(THREE.LoopOnce);
action3.clampWhenFinished = true;
action3.play();
});
object3.scale.set( 2, 2, 2 );
object3.rotation.y = 37.0;
object3.position.x = -6; //Position (x = right+ left-)
object3.position.y = -5; //Position (y = up+, down-)
object3.position.z = -12; //Position (z = front +, back-)
});
loader4.load( './assets/itc_card.glb', function ( gltf ) {
var object4 = gltf.scene;
scene.add( object4 );
mixer4 = new THREE.AnimationMixer( object4 );
var action4;
gltf.animations.forEach((clip) => {
action4 = mixer4.clipAction(clip);
action4.setLoop(THREE.LoopOnce);
action4.clampWhenFinished = true;
action4.play();
});
object4.scale.set( 2, 2, 2 );
object4.position.x = -6; //Position (x = right+ left-)
object4.position.y = -3; //Position (y = up+, down-)
object4.position.z = -12; //Position (z = front +, back-)
});
// Animate function
const clock1 = new THREE.Clock();
const clock2 = new THREE.Clock();
const clock3 = new THREE.Clock();
const clock4 = new THREE.Clock();
function animate() {
requestAnimationFrame( animate );
raycaster.setFromCamera( pointer, camera );
const intersects = raycaster.intersectObjects( scene.children, true );
if (intersects.length > 0) {
mixer1.update(clock1.getDelta());
mixer2.update(clock2.getDelta());
mixer3.update(clock3.getDelta());
mixer4.update(clock4.getDelta());
}
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();