vite使用threejs加载fbx模型

最新推荐文章于 2025-04-17 16:47:14 发布

黎明寄波澜*

最新推荐文章于 2025-04-17 16:47:14 发布

阅读量508

点赞数 6

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

本文链接：https://blog.youkuaiyun.com/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);
s