vite使用threejs加载fbx模型

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

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";

import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const canvasRef = ref(null);

//场景
const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera(50, 2, 0.1, 10000);
camera.position.z = 300;
camera.position.y = 300;
camera.lookAt(scene.position);

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#f2f2f2");
renderer.setSize(600, 300);
renderer.setAnimationLoop(render);

// 辅助线
scene.add(new THREE.AxesHelper(1000));

// 鼠标控件
new OrbitControls(camera, renderer.domElement);

// 光照
const light = new THREE.HemisphereLight("#ffffff", "#000000", 2);
scene.add(light);

onMounted(() => {
  canvasRef.value.appendChild(renderer.domElement);
});
let mixer = null;
let actions = []; //动画数组
const loader = new FBXLoader();
loader.load("fbx/Martelo 2.fbx", (mesh) => {
  console.log(mesh);
  scene.add(mesh);
  mixer = new THREE.AnimationMixer(mesh);
  for (let i = 0; i < mesh.animations.length; i++) {
    actions[i] = mixer.clipAction(mesh.animations[i]);
  }
  actions[0].play();
});

let clock = new THREE.Clock();
function render() {
  if (mixer) {
    mixer.update(clock.getDelta());
  }
  renderer.render(scene, camera);
}
</script>

<style scoped lang="less">
.helloword {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
</style>

会动的fbx模型 去mixamo上下载就行

原文地址：https://blog.csdn.net/weixin_55209970/article/details/140323557

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！