如何用 Three.js 和 Vue 3 实现 3D 商品展示

文章目录

  • 一、前言
  • [二、Three.js 简介](#二、Three.js 简介)
  • [三、搭建 Vue 3 + Three.js 项目](#三、搭建 Vue 3 + Three.js 项目)
    • [3.1 创建 Vue 3 项目并安装依赖](#3.1 创建 Vue 3 项目并安装依赖)
    • [3.2 创建 `ThreeDViewer.vue` 组件](#3.2 创建 ThreeDViewer.vue 组件)
  • [四、加载 3D 商品模型](#四、加载 3D 商品模型)
    • [4.1 安装 `GLTFLoader`](#4.1 安装 GLTFLoader)
    • [4.2 加载 GLTF 模型](#4.2 加载 GLTF 模型)
  • 五、增加交互功能
    • [5.1 旋转和缩放](#5.1 旋转和缩放)
    • [5.2 添加 `OrbitControls`](#5.2 添加 OrbitControls)
  • 六、添加灯光和阴影
  • 七、最终效果
  • 八、总结

一、前言

在现代电商和产品展示中,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 项目并安装依赖

bash 复制代码
# 创建 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 场景。

javascript 复制代码
// 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 模型。

bash 复制代码
npm install three/examples/jsm

4.2 加载 GLTF 模型

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

javascript 复制代码
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 实现 鼠标拖拽旋转和缩放

bash 复制代码
npm install three-orbitcontrols

5.2 添加 OrbitControls

javascript 复制代码
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 商品的视觉效果很大程度上依赖于 光照 ,我们可以添加 环境光 + 聚光灯,增强立体感。

javascript 复制代码
// 添加环境光
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 中引入并使用:

javascript 复制代码
// 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 进行增强现实展示

到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~

创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:

点个赞❤️ 让更多人看到优质内容

关注「前端极客探险家」🚀 每周解锁新技巧

收藏文章⭐️ 方便随时查阅

📢 特别提醒:

转载请注明原文链接,商业合作请私信联系

感谢你的阅读!我们下篇文章再见~ 💕

相关推荐
木木黄木木4 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Dontla5 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡6 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu6 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c6 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪6 小时前
几种比较实用的指令举例
前端·javascript·面试
与妖为邻6 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。7 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
烛阴8 小时前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express
哟哟耶耶8 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js