主要效果如下:
是基于已经设置好好相机,灯光等基本设置
模型的话可以的话可以去这里下载
模型下载地址:地址
首先引用Gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
主要代码设置
**
1.第一步
**
首先在data中设置以下参数
mixer:null,
clock: new THREE.Clock()
2.第二步
设置加载模型函数
首先加载模型及设置动画
loadGltf() {
let self = this
var loader = new GLTFLoader();
loader.load("/model/Duck/run/standardwalk/Standard Walk.gltf", (gltf) => {
var mesh = gltf.scene;
mesh.position.set(10,10,10)//模型的坐标位置
self.scene.add(mesh);
mesh.scale.set(10, 10, 10);//模型的拉伸
console.log(gltf, "gltf");
// 调用动画
self.mixer = new THREE.AnimationMixer(mesh);
var action = self.mixer.clipAction(gltf.animations[0]);
action
.stop()
.setDuration(1)//这个为播放速度
.play();
});
}
实现动画更新
render:function(){
let that=this
//this.mesh.rotation.x+=0.01
requestAnimationFrame(that.render); //请求再次执行渲染函数render
that.renderer.render(that.scene,that.camera);//执行渲染操作
TWEEN.update();
var time = that.clock.getDelta();
if (this.mixer) {
this.mixer.update(time);
}
},