hey guys i am new to gsap and im trying to make introduce some interactivity with my gltf model using gsap. i want to make it that when i scroll from a section to another section it zooms out, then from another section to another section it rotates. however, the model seems to refresh itself, along with its animations when i tried to scroll, is there any solutions to this? currently the gltf model im using is https://sketchfab.com/3d-models/tyrannosaurus-rex-9d3a3e42c0054c35aa39c3ee07388d16. thanks in advance.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
body {
margin: 0;
}
canvas {
position: fixed; top: 0; left: 0;
}
div#test2 {
height: 5000px;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<body>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/RGBELoader.js';
var container, controls;
var camera, scene, renderer, mixer, clock;
var obj
init();
animate();
function init() {
container = document.getElementById( 'test' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
// camera.position.set(0, 5, 30);
camera.position.x = 0
camera.position.y = 5
camera.position.z = 10
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff,0x000000,10);
scene.add(light);
clock = new THREE.Clock();
// model
var loader = new GLTFLoader();
loader.load( 'dinosaur.glb', function ( gltf ) {
obj = scene.add( gltf.scene );
mixer = new THREE.AnimationMixer( gltf.scene );
gltf.animations.forEach( ( clip ) => {
mixer.clipAction( clip ).play();
} );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.8;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );
// function rotateFunction() {
// obj.rotation.y += 0.02;
// console.log(obj.rotation.y)
// }
// document.addEventListener('scroll', function(e) { rotateFunction() });
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
var delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
}
// function adjustCamera() {
// var t = scrollY / (5000 - innerHeight);
// console.log(t)
// // t is 0 to 1
// camera.position.z = 10 + 5 * t;
// }
// document.addEventListener('scroll', function(e) { adjustCamera() });
gsap.registerPlugin(ScrollTrigger)
ScrollTrigger.defaults({
scrub: 3,
ease: 'none',
})
const sections = document.querySelectorAll('.section')
gsap.from(scene.position, {
y: 1,
duration: 1,
ease: 'expo',
})
gsap.from('h1', {
yPercent: 100,
autoAlpha: 0,
ease: 'back',
delay: 0.3,
})
gsap.to(scene.rotation, {
x: Math.PI * 2,
scrollTrigger: {
trigger: sections[1],
},
})
gsap.to(scene.scale, {
x: 2,
y: 2,
scrollTrigger: {
trigger: sections[2],
},
})
gsap.to(scene.rotation, {
y: Math.PI * 2,
scrollTrigger: {
trigger: sections[3],
},
})
/**
* Animate
*/
// const tick = () => {
// const elapsedTime = clock.getElapsedTime()
// //mesh.rotation.x += 0.01 * Math.sin(1)
// //mesh.rotation.y += 0.01 * Math.sin(1)
// //mesh.rotation.z += 0.01 * Math.sin(1)
// // Update controls
// controls.update()
// // Render
// renderer.render(scene, camera)
// // Call tick again on the next frame
// window.requestAnimationFrame(tick)
// }
/*------------------------------
MouseMove
------------------------------*/
function onMouseMove(e) {
const x = e.clientX
const y = e.clientY
gsap.to(scene.rotation, {
y: gsap.utils.mapRange(0, window.innerWidth, 1, -1, x),
x: gsap.utils.mapRange(0, window.innerHeight, 1, -1, y),
})
}
window.addEventListener('mousemove', onMouseMove)
