Hello, I am trying to use a gltf file for animation but facing some issues. Here is the code snippet I am working with:
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
composer.render();
const rx = window.pageYOffset * 2;
gltf.scene.rotation.set( rx, 0, 0);
}
animate();
The problem I am encountering is that I cannot access the gltf object within the function. I have followed the documentation on using GLTFLoader from Three.js, which can be found here:
Below is my implementation:
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
composer.render();
}
animate();
const loader = new GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'gltf/cyberpunk_laptop.glb',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
gltf.scene.scale.set(1,1,1);
gltf.scene.position.set(-1.8, -0.9, 1.2);
gltf.scene.rotation.set(Math.PI * 1.1, Math.PI * 0.6, Math.PI * 1);
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}