vue3加载模型并播放动画

最新推荐文章于 2025-07-07 16:21:51 发布

原创最新推荐文章于 2025-07-07 16:21:51 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

该文介绍如何在Vue3应用中结合Three.js库加载FBX模型，并通过FBXLoader进行动画处理。文章详细展示了初始化场景、相机、渲染器以及添加OrbitControls实现拖拽控制的过程。此外，还讨论了如何设置模型动画仅播放一次，并添加了动画混合器和更新机制。

vue3通过three.js加载模型并播放动画

获取模型地址，加载模型动画只播放一次，添加缩放、拉拽控件

<template>
  <div> 
      <div ref="container"></div> 
  </div>
</template>

<script setup> 
// 加载three.js
// 拖拽控件
import { OrbitControls } from '../../../../node_modules/three/examples/jsm/controls/OrbitControls.js'
import * as THREE from "../../../../node_modules/three/build/three.module.js"
import { FBXLoader } from "../../../../node_modules/three/examples/jsm/loaders/FBXLoader.js"
 

const init = (e) => {
  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(55, 600 / 400, 30, 1000);
  camera.position.z = 355;
  camera.position.x = 0;
  camera.position.y = -350;
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(600, 400);
  container.value.appendChild(renderer.domElement);
  // 创建背景色
  scene.background = new THREE.Color(0x333333);
  //添加相机控件
  let controls = new OrbitControls(camera, renderer.domElement)
  //是否有惯性
  controls.enableDamping = true
  // 是否可缩放
  controls.enableZoom = true
  // 最近距离
  controls.minDistance = 200
  controls.maxDistance = 500
  //创建灯光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  scene.add(directionalLight);
  // 加载fbx模型
  const loader = new FBXLoader();
  loader.load(e, (fbx) => {
    scene.add(fbx);
    frame.value = fbx.animations[0].tracks[0].times.length
    console.log(fbx.animations[0].tracks[0].times.length, '总帧数')
    // 获取动画混合器
    animationMixer.value = new THREE.AnimationMixer(fbx);
    // 播放动画
    animationAction = animationMixer.value.clipAction(fbx.animations[0]);
    // 设置只播放一次模型动画
    // animationAction.setLoop(THREE.LoopOnce)
    // 开始播放
    animationAction.play();
  })
  const animate = () => {
    requestAnimationFrame(animate);
    controls.update()
    renderer.render(scene, camera);

    // 更新动画
    if (animationMixer.value) {
      animationMixer.value.update(0.01);
    }
  };
  animate();
}


// 获取模型地址可以是初始加载也可以是获取  
var filePath = ""  


function showInfo(row) { 
  filePath = "api/" + row.src 
  nextTick(() => {
    init(filePath)
  })
}


</script>
<style lang="scss" >  
</style>