第一阶段总结：你的第一个3D网页

第一阶段总结：你的第一个3D网页

综合案例：可交互的3D产品展示

1. 项目全景

目标：整合前14篇核心技术，打造完整的3D产品展示系统
功能亮点：

• 🌀 360°自由查看产品（支持触控/鼠标交互）
• 🎨 动态更换材质颜色与纹理
• 🧩 可拆卸部件展示（如汽车引擎、家具组件）
• ⚡ 物理交互系统（拖拽、自由落体、碰撞反馈）
• 📱 响应式设计（桌面/平板/手机全适配）

技术栈：

Vue3 + Three.js r158 + Cannon-es 0.20 + GSAP 3.12 + Vite 5.0

2. 项目架构

src/
├── assets/
│   ├── models/              # 产品模型(GLTF格式)
│   └── textures/            # 材质贴图
├── components/
│   ├── ProductViewer.vue    # 3D场景核心(500+行)
│   ├── ControlPanel.vue     # UI控制面板(200+行)
│   ├── LoadingProgress.vue  # 加载进度组件
│   └── PhysicsDebugger.vue  # 物理调试工具
├── composables/
│   ├── usePhysics.js        # 物理引擎封装(300+行)
│   └── useModelLoader.js    # 模型加载器
├── utils/
│   ├── dracoLoader.js       # Draco压缩解码器
│   └── responsive.js        # 响应式适配器
├── main.js                  # Three.js初始化
└── App.vue                  # 应用入口

3. 核心实现代码

3.1 场景初始化 (ProductViewer.vue)

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader';
import usePhysics from '@/composables/usePhysics';
import initDracoLoader from '@/utils/dracoLoader';

const canvasRef = ref(null);
const loadingProgress = ref(0);
const { world, addPhysicsObject } = usePhysics();

// 初始化场景
const initScene = async () => {
  // 1. 创建基础场景
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf0f0f0);
  
  const camera = new THREE.PerspectiveCamera(
    45, 
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(0, 2, 5);
  
  const renderer = new THREE.WebGLRenderer({ 
    canvas: canvasRef.value,
    antialias: true,
    alpha: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  // 2. 添加环境光照
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);
  
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 10, 7);
  directionalLight.castShadow = true;
  scene.add(directionalLight);
  
  // 3. 加载产品模型
  const loader = new GLTFLoader();
  initDracoLoader(loader); // 启用Draco压缩
  
  const productModel = await new Promise((resolve) => {
    loader.load(
      '/assets/models/product.glb',
      (gltf) => {
        const model = gltf.scene;
        model.position.set(0, 1, 0);
        model.traverse((child) => {
          if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
          }
        });
        scene.add(model);
        resolve(model);
      },
      (xhr) => {
        loadingProgress.value = (xhr.loaded / xhr.total) * 100;
      }
    );
  });
  
  // 4. 添加物理特性
  const physicsBody = new CANNON.Body({ 
    mass: 0, // 静态物体
    shape: new CANNON.Box(new CANNON.Vec3(1, 0.5, 1))
  });
  addPhysicsObject(productModel, physicsBody);
  
  // 5. 添加控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;
  
  // 6. 渲染循环
  const animate = () => {
    requestAnimationFrame(animate);
    world.step(1/60); // 物理更新
    controls.update();
    renderer.render(scene, camera);
  };
  animate();
  
  // 响应式适配
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
};

onMounted(initScene);
onUnmounted(() => window.removeEventListener('resize'));
</script>

<template>
  <div class="viewer-container">
    <canvas ref="canvasRef" class="product-canvas" />
    <LoadingProgress :progress="loadingProgress" />
  </div>
</template>

3.2 交互控制面板 (ControlPanel.vue)

<template>
  <div class="control-panel">
    <!-- 颜色选择器 -->
    <div class="color-picker">
      <h3>外观定制</h3>
      <div class="color-options">
        <button
          v-for="(color, index) in colorOptions"
          :key="index"
          :style="{ background: color }"
          @click="changeMaterialColor(color)"
        />
      </div>
      
      <div class="texture-options">
        <button 
          v-for="texture in ['carbon', 'wood', 'metal']"
          :key="texture"
          @click="applyTexture(texture)"
        >
          {{ texture }}
        </button>
      </div>
    </div>
    
    <!-- 部件控制 -->
    <div class="part-control">
      <h3>部件操作</h3>
      <div class="part-buttons">
        <button @click="togglePart('engine')">
          {{ partsVisible.engine ? '隐藏引擎' : '显示引擎' }}
        </button>
        <button @click="togglePart('wheels')">
          {{ partsVisible.wheels ? '隐藏轮毂' : '显示轮毂' }}
        </button>
        <button @click="explodeModel(0.5)">
          爆炸视图
        </button>
      </div>
    </div>
    
    <!-- 物理交互 -->
    <div class="physics-control">
      <h3>物理模拟</h3>
      <button @click="dropProduct">自由落体</button>
      <button @click="resetPosition">重置位置</button>
      <label>
        <input type="range" min="0" max="10" step="0.5" v-model="gravity">
        重力: {{ gravity }} m/s²
      </label>
    </div>
  </div>
</template>

<script setup>
import { inject, ref, watch } from 'vue';
import gsap from 'gsap';

// 从父组件获取引用
const productModel = inject('productModel');
const physicsWorld = inject('physicsWorld');
const productPhysics = inject('productPhysics');

// 状态管理
const colorOptions = ref(['#ff3b30', '#4cd964', '#007aff', '#ffcc00', '#ff9500']);
const partsVisible = ref({
  engine: true,
  wheels: true,
  doors: true
});
const gravity = ref(9.8);

// 更改材质颜色
const changeMaterialColor = (hexColor) => {
  productModel.value.traverse(child => {
    if (child.isMesh && child.name.includes('body')) {
      child.material.color.set(hexColor);
    }
  });
};

// 应用纹理
const applyTexture = async (textureType) => {
  const textureLoader = new THREE.TextureLoader();
  const texture = await textureLoader.loadAsync(`/assets/textures/${textureType}.jpg`);
  texture.encoding = THREE.sRGBEncoding;
  
  productModel.value.traverse(child => {
    if (child.isMesh) {
      child.material.map = texture;
      child.material.needsUpdate = true;
    }
  });
};

// 切换部件可见性
const togglePart = (partName) => {
  partsVisible.value[partName] = !partsVisible.value[partName];
  
  productModel.value.traverse(child => {
    if (child.isMesh && child.name.includes(partName)) {
      child.visible = partsVisible.value[partName];
    }
  });
};

// 爆炸视图效果
const explodeModel = (distance) => {
  productModel.value.traverse(child => {
    if (child.isMesh) {
      const originalPos = child.position.clone();
      const direction = new THREE.Vector3()
        .subVectors(child.position, productModel.value.position)
        .normalize();
      
      gsap.to(child.position, {
        x: originalPos.x + direction.x * distance,
        y: originalPos.y + direction.y * distance,
        z: originalPos.z + direction.z * distance,
        duration: 1,
        ease: "power2.out"
      });
    }
  });
};

// 物理交互
const dropProduct = () => {
  productPhysics.value.mass = 1; // 变为动态物体
  productPhysics.value.position.y = 8; // 从高处掉落
  productPhysics.body.velocity.set(0, 0, 0); // 清除速度
};

const resetPosition = () => {
  productPhysics.value.mass = 0; // 变回静态
  gsap.to(productPhysics.value.position, {
    x: 0,
    y: 1,
    z: 0,
    duration: 0.8,
    onComplete: () => {
      productPhysics.value.velocity.set(0, 0, 0);
      productPhysics.value.angularVelocity.set(0, 0, 0);
    }
  });
};

// 重力控制
watch(gravity, (newVal) => {
  physicsWorld.value.gravity.set(0, -newVal, 0);
});
</script>

3.3 物理引擎封装 (usePhysics.js)

import { ref } from 'vue';
import * as CANNON from 'cannon-es';

export default function usePhysics() {
  const world = ref(new CANNON.World());
  world.value.gravity.set(0, -9.8, 0); // 初始重力
  world.value.broadphase = new CANNON.SAPBroadphase(world.value);
  world.value.solver.iterations = 15;
  
  const physicsObjects = ref([]);
  
  // 添加物理对象
  const addPhysicsObject = (mesh, body) => {
    physicsObjects.value.push({ mesh, body });
    world.value.addBody(body);
  };
  
  // 同步物理与渲染
  const syncPhysics = () => {
    physicsObjects.value.forEach(obj => {
      obj.mesh.position.copy(obj.body.position);
      obj.mesh.quaternion.copy(obj.body.quaternion);
    });
  };
  
  // 物理更新循环
  const physicsStep = () => {
    requestAnimationFrame(physicsStep);
    world.value.step(1/60);
    syncPhysics();
  };
  
  physicsStep(); // 启动循环
  
  return {
    world,
    physicsObjects,
    addPhysicsObject
  };
}

4. 关键技术解析

4.1 性能优化矩阵

4.2 响应式适配方案

// utils/responsive.js
export function initResponsiveControls(camera, renderer, canvas) {
  // 桌面端交互
  if (window.innerWidth > 768) {
    initMouseControls(canvas);
  } 
  // 移动端适配
  else {
    initTouchControls(canvas);
    // 降低渲染质量
    renderer.setPixelRatio(1);
    // 简化物理计算
    world.broadphase = new CANNON.NaiveBroadphase();
    world.solver.iterations = 8;
  }

  // 平板设备特殊处理
  if (window.innerWidth > 600 && window.innerWidth <= 1024) {
    camera.position.z = 7;  // 调整相机距离
    camera.fov = 55;        // 扩大视野
    camera.updateProjectionMatrix();
  }
}

function initTouchControls(canvas) {
  let touchStartX = 0;
  
  canvas.addEventListener('touchstart', (e) => {
    touchStartX = e.touches[0].clientX;
  });
  
  canvas.addEventListener('touchmove', (e) => {
    const deltaX = e.touches[0].clientX - touchStartX;
    product.rotation.y += deltaX * 0.01;
    touchStartX = e.touches[0].clientX;
  });
}

5. 部署与SEO优化

部署脚本 (vite.config.js):

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          three: ['three'],
          cannon: ['cannon-es']
        }
      }
    }
  },
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin'
    }
  }
});

SEO优化方案：

1. 服务端预渲染 (SSR)

npm install @vitejs/plugin-ssr --save-dev

// vite.config.js
import ssr from 'vite-plugin-ssr/plugin';

export default {
  plugins: [vue(), ssr()]
}

2. 关键元数据注入

<!-- public/index.html -->
<title>3D产品展示 | 下一代交互体验</title>
<meta name="description" content="沉浸式3D产品展示，支持实时定制与物理交互">
<meta property="og:image" content="/social-preview.jpg">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "智能产品",
  "image": "/model-preview.jpg",
  "description": "可交互的3D产品展示"
}
</script>

6. 第一阶段总结

掌握的三大核心能力：

1. 场景构建

   • 场景/相机/渲染器黄金三角
   • 光影系统配置与优化
   • 模型加载与材质处理

2. 物理仿真

   • 刚体动力学与碰撞检测
   • 约束系统与关节应用
   • 物理-视觉同步技术

3. 交互工程

   • 射线拾取与物体控制
   • 动画系统集成
   • 响应式交互设计

典型应用场景：

- 🛒 电商产品3D展示
- 🏗️ 建筑可视化预览
- 🎮 网页游戏开发
- 🧪 科学实验仿真

下一节预告：进阶提升篇开篇

第16章：自定义几何体 - 从顶点构建3D世界

1. BufferGeometry底层原理

   • 顶点/法线/UV坐标系统
   • 索引缓冲与面片生成

2. 动态地形生成

   • 噪声算法应用(Perlin/Simplex)
   • 实时地形变形技术

3. 高级案例：

   • 生成3D分形山脉
   • 创建可变形布料
   • 动态波浪水面

4. 性能秘籍：

   • GPU Instancing应用
   • Compute Shader基础

准备好进入Three.js的深层世界了吗？我们将从数学原理出发，亲手构建令人惊叹的3D几何结构！ 🚀