当前位置：首页 > news >正文

在vue中使用Three.js渲染FBX模型

news 2025/7/12 6:35:42

一、Three.js 简介

Three.js 是一个轻量级的开源 JavaScript 3D 库，基于 WebGL 技术实现浏览器端的 3D 渲染。核心优势包括：

跨平台：支持桌面/移动端浏览器
功能丰富：提供几何体、材质、光源、相机等完整 3D 元素
易用性：简化 WebGL 复杂 API，降低 3D 开发门槛
活跃生态：拥有粒子系统、物理引擎、后期处理等扩展插件

典型应用场景：数据可视化、游戏开发、产品展示、AR/VR 等。

文档地址：https://threejs.org/manual/#zh/fundamentals

二、引入

在终端中执行以下命令，下载安装three.js库

# 安装 three.js
pnpm install three

三、使用

在使用之前，需要先了解three.js中的核心概念，需要先有一个容器来承载3d场景。

<template><div style="width: 100%;height: 100%"><div ref="container" id="three-container"></div></div>
</template>

1.Scene（场景）
场景是Three.js的核心容器，所有3D对象（如模型、灯光、相机）都需要添加到场景中才能被渲染。场景通过THREE.Scene类创建，提供层级结构管理功能。

  // 创建场景let scene, camera, renderer, controls;scene = new THREE.Scene();scene.background = new THREE.Color(0x000000);

2.Camera（相机）
相机定义视图的可见范围，常用的类型包括：

THREE.PerspectiveCamera（透视相机）：模拟人眼视角，适合大多数3D场景。
THREE.OrthographicCamera（正交相机）：无透视变形，常用于CAD或2D/3D混合场景。

// 获取容器尺寸const width = container.value.clientWidth;const height = container.value.clientHeight;// 创建相机
camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100000);
camera.position.set(0, 50, 80);

3.Renderer（渲染器）
THREE.WebGLRenderer是核心渲染器，通过WebGL技术将场景和相机结合生成2D画面。需配置抗锯齿、阴影等参数。

// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(width, height);container.value.appendChild(renderer.domElement);

4.Controls（控制器）
交互控制工具，如：

THREE.OrbitControls（轨道控制器，旋转/缩放场景）
THREE.FlyControls（飞行模式控制器）。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 添加控制器 - 确保在动画循环前创建controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.25;controls.screenSpacePanning = true; // 添加此项controls.maxPolarAngle = Math.PI / 2;  // 禁止摄像机超过水平面，不能从模型下方观察controls.minPolarAngle = 0;  // 限制为正上方（0弧度）

5.Light（灯光）
光源类型包括：

THREE.AmbientLight（环境光）
THREE.DirectionalLight（平行光）
THREE.PointLight（点光源）
THREE.SpotLight（聚光灯）
THREE.HemisphereLight（半球光）
THREE.SpotLight（聚光灯）

// 添加环境灯光const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);scene.add(ambientLight);

6.Loader（加载器）
用于加载外部资源：

THREE.FBXLoader（FBX模型格式）
THREE.TextureLoader（图像纹理）。

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
const loader = new FBXLoader();
loader.load(url,(model)=>{//模型加载完成
})

四、源代码示例

<template><div style="width: 100%;height: 100%"><div ref="container" id="three-container"></div></div>
</template><script setup>
import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
onMounted(() => {nextTick(initScene);
})let scene, camera, renderer, controls;
let animationFrameId;
const container = ref(null)
const initScene = () => {// 清理现有场景if (renderer && renderer.domElement.parentNode) {renderer.domElement.parentNode.removeChild(renderer.domElement);}if (renderer) {renderer.dispose();}// 获取容器尺寸const width = container.value.clientWidth;const height = container.value.clientHeight;// 创建场景scene = new THREE.Scene();scene.background = new THREE.Color(0x000000);// 创建相机camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100000);// camera.position.set(0, 2000, 3000);// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(width, height);container.value.appendChild(renderer.domElement);// 添加控制器 - 确保在动画循环前创建controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.25;controls.screenSpacePanning = true; // 添加此项controls.maxPolarAngle = Math.PI / 2;  // 禁止摄像机超过水平面，不能从模型下方观察controls.minPolarAngle = 0;  // 限制为正上方（0弧度）// 添加环境灯光const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);scene.add(ambientLight);loadFBXModel(scene, '/fbx/xiaofangche.fbx')// 动画循环 - 使用安全调用const animate = () => {animationFrameId = requestAnimationFrame(animate);if (controls) controls.update(); // 安全调用renderer.render(scene, camera);};animate();
}
const loadFBXModel = (scene, url) => {const loader = new FBXLoader();loader.load(url, (model) => {scene.add(model);// 1. 先添加模型到场景scene.add(model);// 2. 设置模型缩放model.scale.set(0.1, 0.1, 0.1);// 3. 计算模型中心位置const worldPos = new THREE.Vector3();const box = new THREE.Box3().setFromObject(model);const center = box.getCenter(worldPos);//获取模型中心点console.log(center)// 4. 设置相机位置（在模型上方）camera.position.set(center.x, center.y + 1000, center.z + 1500);// 5. 设置控制器目标（关键！）controls.target.copy(center);controls.update(); // 立即更新控制器})
}
</script><style scoped>
#three-container{width: 100%;height: 100%;
}
</style>