一文詳解如何用Three.js和Vue?3實(shí)現(xiàn)3D商品展示
一、前言
在現(xiàn)代電商和產(chǎn)品展示中，3D 可視化技術(shù)正變得越來越流行。例如，在購物網(wǎng)站上，用戶可以 360° 旋轉(zhuǎn)商品，查看細(xì)節(jié)，甚至模擬不同的光照和材質(zhì)效果。這種交互體驗(yàn)可以極大提升用戶對商品的感知和購買欲望。
本篇文章將帶你使用 Vue 3 + Three.js 構(gòu)建一個 3D 商品展示組件，并支持 縮放、旋轉(zhuǎn)、光照調(diào)整 等功能。
二、Three.js 簡介
Three.js 是一個流行的 WebGL 庫，提供了豐富的 3D 渲染 API，使前端開發(fā)者可以更輕松地在網(wǎng)頁中創(chuàng)建 3D 場景。它的核心概念包括：
- 場景（Scene）：3D 物體的容器
- 相機(jī)（Camera）：決定觀察角度
- 光源（Lights）：控制光照效果
- 渲染器（Renderer）：渲染 3D 畫面
- 模型（Mesh）：3D 物體
三、搭建 Vue 3 + Three.js 項(xiàng)目
3.1 創(chuàng)建 Vue 3 項(xiàng)目并安裝依賴
# 創(chuàng)建 Vue 3 項(xiàng)目 npm create vite@latest vue-3d-viewer --template vue cd vue-3d-viewer # 安裝 Three.js ···l three
3.2 創(chuàng)建ThreeDViewer.vue組件
在 components 目錄下創(chuàng)建 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(() => {
// 創(chuàng)建場景
const scene = new THREE.Scene();
// 創(chuàng)建相機(jī)（透視相機(jī)）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5); // 設(shè)置相機(jī)位置
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
threeContainer.value.appendChild(renderer.domElement);
// 創(chuàng)建一個立方體
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);
// 渲染循環(huán)
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); // 調(diào)整模型大小
scene.add(model);
});
五、增加交互功能
5.1 旋轉(zhuǎn)和縮放
使用 OrbitControls 實(shí)現(xiàn) 鼠標(biāo)拖拽旋轉(zhuǎn)和縮放。
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; // 使旋轉(zhuǎn)更流暢
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 1; // 最小縮放距離
controls.maxDistance = 10; // 最大縮放距離
六、添加燈光和陰影
3D 商品的視覺效果很大程度上依賴于 光照，我們可以添加 環(huán)境光 + 聚光燈，增強(qiáng)立體感。
// 添加環(huán)境光
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 商品展示組件已經(jīng)具備：
? 加載 3D 模型（支持 .glb/.gltf）
? 鼠標(biāo)旋轉(zhuǎn)縮放（OrbitControls）
? 光照和陰影（環(huán)境光 + 聚光燈）
? 動畫（自動旋轉(zhuǎn)）
你可以在 App.vue 中引入并使用：
// App.vue <template> <ThreeDViewer /> </template> <script setup> import ThreeDViewer from "./components/ThreeDViewer.vue"; </script>
八、總結(jié)
本篇文章介紹了如何使用 Vue 3 + Three.js 構(gòu)建一個 3D 商品展示 組件，包括：
- Three.js 基礎(chǔ)（場景、相機(jī)、渲染器）
- 加載 3D 商品模型（GLTFLoader）
- 添加交互控制（OrbitControls）
- 優(yōu)化燈光和陰影（增強(qiáng)立體感）
你可以在此基礎(chǔ)上進(jìn)一步擴(kuò)展：
- 支持多角度切換（多個攝像機(jī)）
- 支持模型變色、換材質(zhì)
- 加入 WebAR 進(jìn)行增強(qiáng)現(xiàn)實(shí)展示
到此這篇關(guān)于如何用Three.js和Vue 3實(shí)現(xiàn)3D商品展示的文章就介紹到這了,更多相關(guān)Three.js和Vue3實(shí)現(xiàn)3D商品展示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選
這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue的側(cè)邊目錄組件的實(shí)現(xiàn)
這篇文章主要介紹了基于Vue的側(cè)邊目錄組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue 通過公共字段,拼接兩個對象數(shù)組的實(shí)例
今天小編就為大家分享一篇Vue 通過公共字段,拼接兩個對象數(shù)組的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在實(shí)際項(xiàng)目中,watch 本質(zhì)上是一種長期訂閱關(guān)系,如果不加控制,它會在數(shù)據(jù)變化的整個生命周期內(nèi)持續(xù)觸發(fā),這在很多場景下并不是我們想要的,所以我們有時會想取消Vue Watch監(jiān)聽,因此本文給大家介紹了取消Vue Watch監(jiān)聽的方法示例,需要的朋友可以參考下2026-01-01
Vue3?echarts組件化及使用hook進(jìn)行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進(jìn)行resize方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決vue無法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps
這篇文章主要介紹了解決vue無法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用JSEncrypt對密碼本地存儲時加解密的實(shí)現(xiàn)
本文主要介紹了vue使用JSEncrypt對密碼本地存儲時加解密，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue動畫之第三方類庫實(shí)現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
文章主要講述了如何準(zhǔn)備CSS文件用于自定義富文本樣式,并將其放置在指定目錄,同時強(qiáng)調(diào)了這是個人經(jīng)驗(yàn)總結(jié),供參考并鼓勵支持站點(diǎn)2026-05-05