import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
const group = new THREE.Group();
loader.load('./guntong.glb', function (gltf) {
const scene = gltf.scene;
// scene.translateZ(10)
// 返回的场景对象gltf.scene插入到threejs场景中
group.add(scene);
})
loader.load('./Soldier.glb', (gltf) => {
console.log(gltf.scene)
gltf.scene.rotateY(Math.PI)
// 返回的场景对象gltf.scene插入到threejs场景中
const mixer = new THREE.AnimationMixer(gltf.scene);
// const clipAction = mixer.clipAction(gltf.animations[0]);
// clipAction.play(); //播放动画
const ResetAction = mixer.clipAction(gltf.animations[0]);
const RunAction = mixer.clipAction(gltf.animations[1]);
const StopAction = mixer.clipAction(gltf.animations[2]);
const WalkAction = mixer.clipAction(gltf.animations[3]);
ResetAction.play();
RunAction.play();
StopAction.play();
WalkAction.play();
// gltf.animations[0]休息
// gltf.animations[1]跑步
// gltf.animations[2]静止展开
// gltf.animations[3]走路
// 跑步和走路动画对人影响程度为0,人处于休闲状态
ResetAction.weight = 1.0;
RunAction.weight = 0.0;
StopAction.weight = 0.0;
WalkAction.weight = 0.0;
const clock = new THREE.Clock();
let ActionState = ResetAction;//当前处于播放状态的动画动作对象
document.getElementById('run').addEventListener('click', function () {
ActionState.weight = 0.0;//播放状态动画权重设置为0
RunAction.weight = 1.0;
ActionState = RunAction;
})
document.getElementById('stop').addEventListener('click', function () {
ActionState.weight = 0.0;//播放状态动画权重设置为0
StopAction.weight = 1.0;
ActionState = StopAction;
})
document.getElementById('walk').addEventListener('click', function () {
ActionState.weight = 0.0;//播放状态动画权重设置为0
WalkAction.weight = 1.0;
ActionState = WalkAction;
})
document.getElementById('reset').addEventListener('click', function () {
ActionState.weight = 0.0;//播放状态动画权重设置为0
ResetAction.weight = 1.0;
ActionState = ResetAction;
})
// 骨骼辅助显示
const skeletonHelper = new THREE.SkeletonHelper(gltf.scene);
group.add(skeletonHelper);
function loop() {
requestAnimationFrame(loop);
//clock.getDelta()方法获得loop()两次执行时间间隔
const frameT = clock.getDelta();
// 更新播放器相关的时间
mixer.update(frameT);
}
loop();
group.add(gltf.scene);
})
export default group
ThreeJs学习-加载外部三维模型gltf格式
最新推荐文章于 2024-08-31 23:13:29 发布