Vue Storefront 3D 产品展示：Three.js 集成实践

吕岚伊

313人浏览 · 2025-10-17 05:52:49

吕岚伊 · 2025-10-17 05:52:49 发布

Vue Storefront 3D 产品展示：Three.js 集成实践

【免费下载链接】vue-storefront The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-storefront

你是否还在为电商网站的产品展示效果平平而烦恼？静态图片无法全方位展示产品细节，客户流失率居高不下？本文将带你一步步实现基于 Three.js 的 3D 产品展示功能，让你的商品在网页上“活”起来，显著提升用户体验和转化率。读完本文，你将掌握如何在 Vue Storefront 项目中无缝集成 Three.js，实现 3D 模型加载、交互控制及性能优化的完整方案。

为什么选择 Three.js + Vue Storefront？

Vue Storefront 作为开源电商前端框架，以其 PWA（渐进式 Web 应用）和无头架构（Headless）著称，支持与 Magento、Shopify 等主流电商平台集成。而 Three.js 作为 JavaScript 3D 引擎，能够在浏览器中渲染高质量的 3D 图形，无需插件支持。二者结合，可为用户提供沉浸式购物体验，减少因产品信息不充分导致的退货率。

Vue Storefront 生态系统架构，支持灵活扩展第三方工具集成

集成准备：项目结构与依赖分析

在开始前，我们需要确认 Vue Storefront 项目的核心模块结构。通过分析项目目录，关键文件包括：

API 客户端工厂：packages/middleware/src/apiClientFactory/index.ts — 用于创建与后端的通信层，可扩展以支持 3D 模型资源加载
中间件配置：packages/middleware/src/types/config.ts — 需添加 Three.js 相关配置项
模块构建工具：packages/sdk/src/modules/buildModule.ts — 用于封装 3D 展示功能为独立模块

由于当前项目未直接包含 Three.js 相关代码，需通过 npm 安装核心依赖：

# 安装 Three.js 核心库
npm install three
# 安装模型加载器（支持 glTF/GLB 格式）
npm install @tweenjs/tween.js
# 安装 Vue 组件封装库
npm install vue-threejs

实现步骤：从模型加载到交互控制

1. 创建 3D 产品展示组件

在 components/Product3DViewer.vue 中实现基础 3D 渲染功能：

<template>
  <div class="product-3d-viewer">
    <div ref="canvasContainer" class="canvas-container"></div>
    <div class="controls">
      <button @click="rotateModel">自动旋转</button>
      <button @click="resetView">重置视角</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const canvasContainer = ref<HTMLDivElement>(null);
let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer;
let model: THREE.Object3D, controls: OrbitControls;

onMounted(async () => {
  initThreeJS();
  await loadModel('/models/product.glb'); // 需将模型文件放置在 public/models 目录
  setupControls();
  animate();
});

const initThreeJS = () => {
  // 创建场景
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf5f5f5);
  
  // 添加灯光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 10, 7.5);
  scene.add(directionalLight);
  
  // 创建相机
  camera = new THREE.PerspectiveCamera(75, canvasContainer.value!.clientWidth / canvasContainer.value!.clientHeight, 0.1, 1000);
  camera.position.z = 5;
  
  // 创建渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(canvasContainer.value!.clientWidth, canvasContainer.value!.clientHeight);
  canvasContainer.value!.appendChild(renderer.domElement);
};

const loadModel = async (modelPath: string) => {
  const loader = new GLTFLoader();
  try {
    const gltf = await loader.loadAsync(modelPath);
    model = gltf.scene;
    model.scale.set(0.5, 0.5, 0.5); // 根据模型大小调整缩放
    scene.add(model);
  } catch (error) {
    console.error('Failed to load 3D model:', error);
  }
};

const setupControls = () => {
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; // 启用阻尼效果（平滑旋转）
  controls.dampingFactor = 0.25;
  controls.enableZoom = true;
};

const animate = () => {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

// 自动旋转功能
const rotateModel = () => {
  let rotation = 0;
  const animateRotation = () => {
    rotation += 0.01;
    model.rotation.y = rotation;
    requestAnimationFrame(animateRotation);
  };
  animateRotation();
};

// 重置视角
const resetView = () => {
  camera.position.set(0, 0, 5);
  controls.reset();
};
</script>

<style scoped>
.canvas-container {
  width: 100%;
  height: 500px;
  margin: 0 auto;
}
.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
</style>

2. 集成到产品详情页

修改产品详情页组件 pages/Product.vue，引入 3D 查看器：

<template>
  <div class="product-page">
    <div class="product-gallery">
      <!-- 原有图片画廊 -->
      <ProductGallery :images="product.images" />
      <!-- 新增 3D 查看器 -->
      <Product3DViewer v-if="product.has3DModel" />
    </div>
    <!-- 产品信息区域 -->
    <ProductInfo :product="product" />
  </div>
</template>

<script setup lang="ts">
import ProductGallery from '@/components/ProductGallery.vue';
import ProductInfo from '@/components/ProductInfo.vue';
import Product3DViewer from '@/components/Product3DViewer.vue';
import { useProduct } from '@/composables/useProduct';

const { product } = useProduct();
</script>

3. 性能优化策略

为确保 3D 展示流畅运行，需从以下方面优化：

模型轻量化：使用 Blender 等工具简化模型多边形数量，压缩纹理图片
懒加载实现：通过 Vue 的 defineAsyncComponent 延迟加载 3D 组件

const Product3DViewer = defineAsyncComponent(() => 
  import('@/components/Product3DViewer.vue')
);

内存管理：在组件卸载时清理 Three.js 资源

onUnmounted(() => {
  if (renderer) {
    renderer.dispose();
    canvasContainer.value?.removeChild(renderer.domElement);
  }
});

架构设计：模块化与扩展性

为使 3D 功能可复用，建议将其封装为独立模块。参考 Vue Storefront 的模块构建规范 packages/sdk/src/modules/buildModule.ts，创建 modules/threejs-product-viewer 目录，包含：

index.ts：模块入口，定义安装函数
composables/use3DProduct.ts：提供 3D 模型加载、控制的组合式 API
components/：存放 3D 相关组件
types.ts：类型定义

模块安装示例：

// modules/threejs-product-viewer/index.ts
import { buildModule } from '@vue-storefront/sdk';
import { use3DProduct } from './composables/use3DProduct';

export const threejsProductViewerModule = buildModule(({ app }) => {
  return {
    use3DProduct
  };
});