一文详解如何用Three.js+Vue3实现3D商品展示：从0到1手把手教

我们会从0到1手把手教你用Three.js+Vue3搭建3D商品展示：从Vue3项目引入Three.js依赖的基础操作，到模型格式选择（glTF为什么是网页3D的最优解？）、模型加载的避坑技巧，再到核心交互功能（鼠标拖动旋转、滚轮缩放、点击热点提示）的实现，最后还有性能优化（如何让模型加载更快、手机端流畅运行）的实用技巧。每一步都有详细代码示例，就算你是刚接触3D开发的新手，跟着走也能做出一个能实时互动的3D商品组件—— 把复杂的3D技术拆解成能落地的“傻瓜式步骤”，就是这篇文章最想给你的东西。

你有没有过这种情况？想给电商商品加个能旋转、缩放的3D展示，打开Three.js文档看半天，再对着Vue3的组件写法，突然就懵了——“这俩到底怎么结合啊？”“模型加载总报错怎么办？”“做出来的交互怎么卡卡的？”我去年帮一个做家居电商的朋友搭3D展示时，一模一样的问题全遇到了，从环境搭建到交互实现，踩了至少10个坑才搞定。今天就把我摸出来的“笨办法”分享给你，不用懂复杂的3D数学，跟着走就能从0到1做出能互动的3D商品组件。

先搞懂基础：Three.js和Vue3到底怎么搭伙？

要做3D展示，首先得把“舞台”搭起来——也就是Three.js和Vue3的基础环境。很多人一开始会犯的错是“不管不顾直接引Three.js”，比如在Vue3组件里直接用script标签引CDN，结果打包的时候要么报错，要么体积超大。我之前就踩过这个坑，后来换成npm安装才稳：打开Vue3项目的终端，输npm install three，再装个辅助控件npm install three/examples/jsm/controls/OrbitControls.js（这个是做旋转缩放用的）。

为什么选Three.js？不是因为它多高级，是因为它轻量（压缩后才几百KB）、社区大（遇到问题搜一下，90%的坑别人都踩过），而且对网页环境友好——毕竟咱们做的是网页端的3D展示，总不能让用户装插件吧？至于Vue3，不用多说，现在前端项目几乎都用它，组合式API特别适合管理3D组件的状态，比如什么时候初始化相机，什么时候销毁控件，比Vue2的选项式API省心多了。

这里得先给你掰扯清楚Three.js的三个核心概念，不然后面步骤你会蒙：场景（Scene）就是你要展示的“舞台”，所有商品模型、灯光都得放在这里；相机（Camera）是“观众的眼睛”，决定了用户能看到舞台的哪个角度——一般用PerspectiveCamera（透视相机），因为它能模拟人眼的透视效果，比如远处的东西小、近处的大，更真实；渲染器（Renderer）是“摄影师”，把场景和相机的内容转换成网页能显示的图像，一般用WebGLRenderer，因为它支持硬件加速，渲染快。

举个例子，你可以在Vue3的setup函数里这么写：

import  as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { onMounted, onUnmounted, ref } from 'vue';
export default {
 setup() {
 let scene, camera, renderer, controls;
 const containerRef = ref(null);
 onMounted(() => {
 // 初始化场景：相当于搭建舞台
 scene = new THREE.Scene();
 // 初始化相机：视角75度（人眼正常视角），宽高比跟着容器走，近裁剪面0.1（太近的东西不显示），远裁剪面1000（太远的东西不显示）
 camera = new THREE.PerspectiveCamera(75, containerRef.value.clientWidth / containerRef.value.clientHeight, 0.1, 1000);
 camera.position.set(0, 0, 5); // 把相机放在离原点5单位的位置，刚好能看到整个模型
 // 初始化渲染器：把舞台内容渲染到网页上
 renderer = new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿，画面更清晰
 renderer.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight);
 containerRef.value.appendChild(renderer.domElement); // 把渲染结果挂载到Vue组件的容器里
 // 初始化控件：让模型能旋转缩放（OrbitControls是Three.js官方的轨道控件）
 controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true; // 开启阻尼效果，旋转更顺滑，不会“一滑就停”
 controls.minDistance = 2; // 最小缩放距离（避免缩太小看不到商品）
 controls.maxDistance = 10; // 最大缩放距离（避免放大太多模糊）
 // 开始渲染循环：让画面动起来
 function animate() {
 requestAnimationFrame(animate); // 浏览器的刷新信号，保证每秒60帧
 controls.update(); // 更新控件状态（比如阻尼需要每帧更新）
 renderer.render(scene, camera); // 把场景和相机的内容渲染到网页
 }
 animate();
 });
 onUnmounted(() => {
 // 销毁控件和渲染器，避免内存泄漏（很重要！不然反复切换页面会崩浏览器）
 controls.dispose();
 renderer.dispose();
 });
 return { containerRef };
 }
};

你看，核心逻辑就是在onMounted（组件挂载后）初始化Three.js的各个部分，onUnmounted（组件销毁前）销毁资源——我朋友的项目一开始没写销毁逻辑，用户反复切换页面后，浏览器直接崩了，后来加上就没事了。

从模型到互动：3D商品展示的核心步骤

搭好舞台后，接下来要把“主角”——商品模型请上台，再给它加上“可摆弄”的交互。这一步的关键是“选对模型格式+做好交互绑定”，少走80%的弯路。

第一步：选对模型格式，少走80%的弯路

模型是3D展示的灵魂，选不对格式，后面再努力也是白搭。我之前用OBJ格式的时候，模型是导出来了，但材质得单独导个MTL文件，加载的时候还要写额外的代码绑定，麻烦得要死；后来换成glTF格式，直接把模型、材质、动画全打包进去，体积还比OBJ小30%——Three.js官方文档都直接说glTF是“网页3D的 格式”，不是没有道理的。

给你列个模型格式的对比表，选的时候直接对照着来：

选好格式后，怎么把模型导入Vue3？用Three.js的GLTFLoader就行。比如你把glTF模型放在public/models文件夹里（Vue3的public文件夹里的东西会原样复制到dist目录，直接用绝对路径访问），然后写加载逻辑：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 在onMounted里加这段代码（跟初始化场景的代码同级）
const loader = new GLTFLoader();
loader.load(
 '/models/sofa.glb', // 模型路径（public文件夹下的绝对路径）
 (gltf) => { // 加载成功的回调
 scene.add(gltf.scene); // 把模型加到场景里（gltf.scene是模型的根节点）
 gltf.scene.scale.set(2, 2, 2); // 调整模型大小（比如原模型太小，放大2倍）
 gltf.scene.position.set(0, -1, 0); // 调整模型位置（比如原模型太靠上，往下移1单位）
 },
 (xhr) => { // 加载进度的回调（可选，用来做loading动画）
 console.log(模型加载中：${(xhr.loaded / xhr.total  100).toFixed(0)}%);
 },
 (error) => { // 加载失败的回调（可选，用来提示用户）
 console.error('模型加载失败：', error);
 }
);

我之前加载模型的时候，一开始把模型放src文件夹里，结果webpack没打包进去，浏览器报404——记住，Vue3的public文件夹是“静态资源目录”，里面的文件不会被webpack处理，直接用绝对路径就能访问。

第二步：给商品加上“可摆弄”的交互

模型导入后，得让用户能“亲手”摆弄商品——比如鼠标拖动旋转、滚轮缩放、点击看细节。这里最常用的是OrbitControls控件（刚才的基础代码里已经加了），不过得注意几个优化点：

// 在onMounted里加这段代码（跟初始化控件的代码同级）
window.addEventListener('resize', () => {
 camera.aspect = containerRef.value.clientWidth / containerRef.value.clientHeight; // 更新相机宽高比
 camera.updateProjectionMatrix(); // 刷新相机的投影矩阵（必须！不然宽高比变化不会生效）
 renderer.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight); // 刷新渲染器大小
});

如果想加点击热点（比如点击商品的某个部位显示详情），可以用Raycaster（射线caster）——原理是“从鼠标点击的位置发射一条射线，看它碰到了模型的哪个部分”。比如你给模型的坐垫mesh命名为sofa_cushion，然后写点击事件：

// 在onMounted里加这段代码（跟resize事件的代码同级）
containerRef.value.addEventListener('click', (event) => {
 // 把鼠标坐标转换成Three.js的“标准化设备坐标”（范围是-1到1）
 const mouse = new THREE.Vector2();
 mouse.x = (event.clientX / window.innerWidth)  2 
1; // 横坐标转换

 mouse.y = -(event.clientY / window.innerHeight)  2 + 1; // 纵坐标转换（Three.js的y轴向上，网页的y轴向下，所以要反转）
 // 创建射线caster：从相机位置出发，沿着鼠标点击的方向发射射线
 const raycaster = new THREE.Raycaster();
 raycaster.setFromCamera(mouse, camera);
 // 检测射线和模型的交集（scene.children是场景里的所有对象，true表示递归检测子对象）
 const intersects = raycaster.intersectObjects(scene.children, true);
 if (intersects.length > 0) { // 如果射线碰到了模型
 const clickedMesh = intersects[0].object; // 取第一个碰到的对象（最前面的mesh）
 if (clickedMesh.name === 'sofa_cushion') { // 如果点击的是坐垫
 alert('这是沙发的记忆棉坐垫，久坐不塌！'); // 显示详情（可以换成弹框或 tooltip）
 }
 }
});

我之前给朋友的沙发模型加点击热点时，一开始没加true（递归检测子对象），结果点击坐垫没反应——因为glTF模型导入后，会有很多子mesh（比如沙发的框架、坐垫、靠背），得递归检测才能找到具体的mesh。

最后再提醒你几个优化小技巧（都是我踩坑踩出来的）：

现在你按这些步骤走，肯定能做出能转能缩的3D商品展示——要是遇到问题，评论区留个言，我帮你看看。毕竟我也是踩过无数坑才搞明白的，能帮你少走点弯路，比什么都强。

Three.js和Vue3怎么结合啊？直接引CDN不行吗？

直接引CDN容易踩坑，比如打包时报错或体积超大，我之前就试过这种方法，后来换成npm安装才稳定。你可以打开Vue3项目终端，输npm install three装Three.js，再装辅助控件npm install three/examples/jsm/controls/OrbitControls.js。

然后在Vue3组件的onMounted钩子（组件挂载后）里初始化Three.js的场景、相机、渲染器这些核心部分，onUnmounted钩子（组件销毁前）还要销毁控件和渲染器，避免内存泄漏，比如朋友的项目一开始没写销毁逻辑，用户反复切换页面就崩了。

模型格式选哪种好？glTF、OBJ、FBX有什么区别？

网页3D展示优先选glTF，它是Three.js官方推荐的“ 格式”，能把模型、材质、动画全打包进去，体积比OBJ小30%，社区支持也多，遇到问题搜一下基本都有解法。

OBJ虽然导出简单，但不支持动画，材质还要单独导MTL文件，适合简单模型快速预览；FBX支持复杂动画，但体积大，网页加载慢，更适合游戏或影视动画，所以做电商3D展示肯定选glTF。

模型加载总报错怎么办？路径总不对？

首先要检查模型路径，别把模型放src文件夹里，Vue3的src文件夹会被webpack处理，容易导致打包后找不到文件，正确的是放public文件夹，比如public/models，然后用绝对路径访问，比如/models/sofa.glb。

然后用Three.js的GLTFLoader加载，记得写加载失败的回调，比如console.error提示错误，我之前把模型放src里就报404，后来改成public文件夹就好了。

做出来的交互怎么卡卡的？旋转不顺畅？

首先要开启OrbitControls的阻尼（enableDamping），这样旋转会更顺滑，不会一滑就停不下来，我朋友的项目一开始没开，用户说像转石头，开了之后体验好多了。

然后要限制缩放范围，比如minDistance设为2（能看到整体），maxDistance设为10（能看到细节），避免用户缩太小或放太大；还要绑定窗口resize事件，调整相机宽高比和渲染器大小，不然窗口变化模型会拉伸变形。

怎么让模型加载更快？用户总说等太久？

可以用Blender的“简化”工具给模型减面，比如把50万面减到10万以内，去掉用户看不到的背面多余面，加载时间能从5秒降到1.5秒；再用TinyPNG压缩纹理图，比如沙发的布料纹理，压缩到原体积的30%还不影响画质。

还能加懒加载，比如用Vue的v-intersection指令，用户滚动到商品区域再加载模型，这样能节省流量，朋友的项目用了之后首屏加载时间少了40%。

YUANLEISVIP

收藏 链接