Answer the question
In order to leave comments, you need to log in
How to make gltf model animation play in three js?
Hello! I have a gltf model that I have animated and pasted into the scene. Please tell me how to make this animation play.
Below is my code.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 10000);
camera.position.z = 400;
camera.position.y = 100;
camera.position.x = -400;
camera.rotation.y = -0.6;
camera.rotation.x = 0;
camera.rotation.z = 0;
const skyColor = 0xfff9e8; // light blue
const groundColor = 0x433b2f; // brownish orange
const intensity = 1;
const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
scene.add(light);
scene.background = new THREE.Color( 0x64A8D1 );
var gltfloader = new THREE.GLTFLoader();
var object= [];
gltfloader.load('object.gltf', function(result){
object[0] = result.scene;
object[0].scale.set(35,35,35);
object[0].position.set(-100, -65, 0);
object[0].rotation.set(0.2, -20, 0);
scene.add(object[0]);
});
var yposofbird = 0;
// оживление сцены
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
renderer.ShadowMapEnabled = true;
function render() {
requestAnimationFrame(render);
object[0].position.y += yposofbird;
renderer.render(scene, camera);
};
render();
Answer the question
In order to leave comments, you need to log in
Load the model, select the animation to play:
const gltfLoader = new THREE.GLTFLoader();
const clock = new THREE.Clock();
let mixer;
gltfLoader.load( "model.gltf", model => {
mixer = new THREE.AnimationMixer(model.scene);
mixer.clipAction(model.animations[0]).play(); // <- первая по списку анимация
scene.add(model.scene);
});
requestAnimationFrame
update the time:mixer.update( clock.getDelta() )
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question