成都品牌设计公司有哪些东莞关键词优化平台

一、前言

在现代电商和产品展示中，3D 可视化技术正变得越来越流行。例如，在购物网站上，用户可以 360° 旋转商品，查看细节，甚至模拟不同的光照和材质效果。这种交互体验可以极大提升用户对商品的感知和购买欲望。

本篇文章将带你使用 Vue 3 + Three.js 构建一个 3D 商品展示组件，并支持 缩放、旋转、光照调整 等功能。

---

二、Three.js 简介

Three.js 是一个流行的 WebGL 库，提供了丰富的 3D 渲染 API，使前端开发者可以更轻松地在网页中创建 3D 场景。它的核心概念包括：

• 场景（Scene）：3D 物体的容器
• 相机（Camera）：决定观察角度
• 光源（Lights）：控制光照效果
• 渲染器（Renderer）：渲染 3D 画面
• 模型（Mesh）：3D 物体

---

三、搭建 Vue 3 + Three.js 项目

3.1 创建 Vue 3 项目并安装依赖

# 创建 Vue 3 项目
npm create vite@latest vue-3d-viewer --template vue
cd vue-3d-viewer# 安装 Three.js
···l three

---

3.2 创建 ThreeDViewer.vue 组件

在 components 目录下创建 ThreeDViewer.vue，并初始化 Three.js 场景。

// ThreeDViewer.vue
<template><div ref="threeContainer" class="three-container"></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";const threeContainer = ref(null);onMounted(() => {// 创建场景const scene = new THREE.Scene();// 创建相机（透视相机）const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 0, 5); // 设置相机位置// 创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);threeContainer.value.appendChild(renderer.domElement);// 创建一个立方体const geometry = new THREE.BoxGeometry();const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 添加光源const light = new THREE.AmbientLight(0xffffff, 1);scene.add(light);// 渲染循环function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();
});
</script><style>
.three-container {width: 100%;height: 100vh;overflow: hidden;
}
</style>

---

四、加载 3D 商品模型

4.1 安装 GLTFLoader

Three.js 使用 GLTFLoader 加载 .gltf 或 .glb 格式的 3D 模型。

npm install three/examples/jsm

---

4.2 加载 GLTF 模型

修改 ThreeDViewer.vue，使用 GLTFLoader 加载 3D 商品模型。

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";// 加载 3D 商品模型
const loader = new GLTFLoader();
loader.load("/models/product.glb", (gltf) => {const model = gltf.scene;model.scale.set(1, 1, 1); // 调整模型大小scene.add(model);
});

---

五、增加交互功能

5.1 旋转和缩放

使用 OrbitControls 实现 鼠标拖拽旋转和缩放。

npm install three-orbitcontrols

---

5.2 添加 OrbitControls

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 使旋转更流畅
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 1; // 最小缩放距离
controls.maxDistance = 10; // 最大缩放距离

---

六、添加灯光和阴影

3D 商品的视觉效果很大程度上依赖于 光照，我们可以添加 环境光 + 聚光灯，增强立体感。

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);// 添加聚光灯
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(5, 5, 5);
scene.add(spotLight);
{javascript}并开启阴影：{javascript}
renderer.shadowMap.enabled = true;
cube.castShadow = true;
cube.receiveShadow = true;
spotLight.castShadow = true;

---

七、最终效果

至此，我们的 3D 商品展示组件已经具备：
✅ 加载 3D 模型（支持 .glb/.gltf）
✅ 鼠标旋转缩放（OrbitControls）
✅ 光照和阴影（环境光 + 聚光灯）
✅ 动画（自动旋转）

你可以在 App.vue 中引入并使用：

// App.vue
<template><ThreeDViewer />
</template><script setup>
import ThreeDViewer from "./components/ThreeDViewer.vue";
</script>

---

八、总结

本篇文章介绍了如何使用 Vue 3 + Three.js 构建一个 3D 商品展示 组件，包括：

1. Three.js 基础（场景、相机、渲染器）
2. 加载 3D 商品模型（GLTFLoader）
3. 添加交互控制（OrbitControls）
4. 优化灯光和阴影（增强立体感）

你可以在此基础上进一步扩展：

• 支持多角度切换（多个摄像机）
• 支持模型变色、换材质
• 加入 WebAR 进行增强现实展示

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕