threejs 加载模型动画
时间: 2023-09-10 16:07:13 浏览: 45
要加载模型动画,你需要使用Three.js的AnimationMixer和AnimationClip。下面是一个简单的加载模型和动画的示例代码:
```javascript
// 创建场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载模型和动画
var loader = new THREE.GLTFLoader();
loader.load('model.gltf', function (gltf) {
var model = gltf.scene;
var animations = gltf.animations;
var mixer = new THREE.AnimationMixer(model);
var clip = animations[0];
// 添加模型到场景中
scene.add(model);
// 播放动画
var action = mixer.clipAction(clip);
action.play();
// 循环更新动画
function animate() {
requestAnimationFrame(animate);
mixer.update(0.01);
renderer.render(scene, camera);
}
animate();
});
// 设置相机位置
camera.position.z = 5;
```
在上面的代码中,我们使用GLTFLoader加载一个模型和动画。然后,我们将模型添加到场景中,并创建一个AnimationMixer来管理动画。我们选择第一个动画剪辑并播放它。最后,我们在循环中更新动画,并使用renderer.render()方法渲染场景。