vite使用threejs加载fbx模型

最新推荐文章于 2024-07-10 17:12:51 发布

黎明寄波澜*

最新推荐文章于 2024-07-10 17:12:51 发布

阅读量292

点赞数 6

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/weixin_55209970/article/details/140323557

版权

<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上下载就行