ThreeJs学习-加载外部三维模型gltf格式

最新推荐文章于 2024-08-31 23:13:29 发布

蛋蛋wqt

最新推荐文章于 2024-08-31 23:13:29 发布

阅读量347

点赞数 5

文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/qq_36770474/article/details/141557884

版权

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