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

本文主要是介绍ThreeJs学习-加载外部三维模型gltf格式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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;//播放状态动画权重设置为0RunAction.weight = 1.0;ActionState = RunAction;})document.getElementById('stop').addEventListener('click', function () {ActionState.weight = 0.0;//播放状态动画权重设置为0StopAction.weight = 1.0;ActionState = StopAction;})document.getElementById('walk').addEventListener('click', function () {ActionState.weight = 0.0;//播放状态动画权重设置为0WalkAction.weight = 1.0;ActionState = WalkAction;})document.getElementById('reset').addEventListener('click', function () {ActionState.weight = 0.0;//播放状态动画权重设置为0ResetAction.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