一文详解如何用Three.js和Vue 3实现3D商品展示_vue.js

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

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

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

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

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

修改 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);});

使用 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 商品展示组件已经具备：

✅ 光照和阴影（环境光 + 聚光灯）

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

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

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

到此这篇关于如何用Three.js和Vue 3实现3D商品展示的文章就介绍到这了,更多相关Three.js和Vue3实现3D商品展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：vite中sass警告JS API过期的原因及解决办

下一篇：js控制浏览器前进后退页面跳转详细方法和示