Hello,
I’m looking to get a GLB(s) to advance to a specific KeyFrame via hovering over buttons.
Website Concept: 3 hover-able buttons (Plan / Iterate / Deliver) that should play animations forward/reverse to arrive at specific KeyFrame.
Best efforts so far: Imgur: The magic of the Internet
Good news is that I’ve been able to setup the hover mouse events to elicit some mixer action.
Bad news is that I’m using a hacky way to do this which doesn’t allow “playing in reverse”.
Help on this would be greatly appreciated
//* GLB (I've separated the mesh into 3 pieces, listing the first GLB to animate ('BG'), here)
let modelBGReady = false;
let modelBGMixer: THREE.AnimationMixer;
const modelBGClock = new THREE.Clock();
const modelBGLoad = new GLTFLoader();
modelBGLoad.load(modelBG, (gltf) => {
modelBGMixer = new THREE.AnimationMixer(gltf.scene);
let animation = modelBGMixer.clipAction(gltf.animations[0]);
animation.setLoop(THREE.LoopOnce, 1);
animation.clampWhenFinished = true;
animation.play();
gltf.scene.rotation.z += modelRotateX;
gltf.scene.rotation.y += modelRotateY;
gltf.scene.position.set(0, -0.5, 0.2);
scene.add(gltf.scene);
});
//* Hover Event on Button (3 buttons total; here's the first of them --- 'Plan')
const buttonPlan = document.getElementById('buttonPlan') as HTMLDivElement;
buttonPlan.addEventListener('mouseover', (event) => {
modelBGReady = true;
});
//* Animation Loop
function animate() {
requestAnimationFrame(animate);
// camera.position.y = Math.sin(Math.random()) * -0.05; <--- ignore this... separate problem
render();
if (modelBGReady) modelBGMixer.update(modelBGClock.getDelta());
// if (modelUIReady) modelUIMixer.update(modelUIClock.getDelta()); <-- one of the other GLBs
// if (modelWebAppsReady)modelWebAppsMixer.update(modelWebAppsClock.getDelta()); <-- same
stats.update();
}
function render() {
renderer.render(scene, camera);
}
animate();