使用Three.js打造world.ipanda.com同款3D首页全攻略

一、技术选型与场景分析

world.ipanda.com的3D首页以熊猫主题为核心，通过低多边形（Low Poly）风格模型与动态光影效果营造沉浸式体验。实现此类效果需要重点解决三个技术问题：

1. 模型资源处理：需将设计稿转化为GLTF/GLB格式的3D模型
2. 实时渲染优化：在保持60fps前提下渲染复杂场景
3. 交互逻辑设计：实现鼠标拖拽旋转、点击交互等核心功能

Three.js作为WebGL的JavaScript封装库，相比原生WebGL可降低70%的开发成本。其核心优势在于：

• 内置数学库（Vector3/Matrix4）
• 完善的材质系统（MeshStandardMaterial）
• 跨平台兼容性（支持移动端WebGL 1.0）

二、基础场景搭建

1. 初始化Three.js环境

// 创建基础场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // 设置天空蓝背景
// 配置透视相机
const camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth / window.innerHeight, 
  0.1, 
  1000
);
camera.position.set(0, 5, 15);
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer({ 
  antialias: true,
  powerPreference: "high-performance"
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 启用阴影
document.body.appendChild(renderer.domElement);

2. 光源系统设计

采用三光源组合方案：

• 环境光：提供基础照明（THREE.AmbientLight）
• 平行光：模拟太阳光（THREE.DirectionalLight）
• 点光源：增强模型细节（THREE.PointLight）

// 环境光配置
const ambientLight = new THREE.AmbientLight(0x404040, 0.8);
scene.add(ambientLight);
// 平行光配置（带阴影）
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
directionalLight.position.set(10, 20, 10);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);

三、核心模型加载与优化

1. GLTF模型加载

使用GLTFLoader加载熊猫模型，重点处理：

• 模型缩放适配（scale.set()）
• 材质优化（MeshStandardMaterial）
• 动画系统集成（THREE.AnimationMixer）

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const loader = new GLTFLoader();
loader.load(
  'models/panda.glb',
  (gltf) => {
    const panda = gltf.scene;
    panda.scale.set(1.5, 1.5, 1.5);
    panda.position.y = 1;
    // 遍历模型材质进行优化
    panda.traverse((child) => {
      if (child.isMesh) {
        child.material = new THREE.MeshStandardMaterial({
          color: 0xffffff,
          metalness: 0.2,
          roughness: 0.8
        });
        child.castShadow = true;
        child.receiveShadow = true;
      }
    });
    scene.add(panda);
    // 处理动画（如果有）
    if (gltf.animations && gltf.animations.length) {
      const mixer = new THREE.AnimationMixer(panda);
      const action = mixer.clipAction(gltf.animations[0]);
      action.play();
      animationMixers.push(mixer);
    }
  },
  undefined,
  (error) => {
    console.error('模型加载失败:', error);
  }
);

2. 性能优化策略

• 模型简化：使用Blender的Decimate修改器将面数控制在5k-10k
• 纹理压缩：采用KTX2+BasisLZ格式压缩纹理
• 实例化渲染：对重复元素（如竹子）使用THREE.InstancedMesh

四、交互系统实现

1. 轨道控制器集成

使用OrbitControls实现鼠标拖拽旋转：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05;
controls.minDistance = 8;
controls.maxDistance = 25;

2. 点击交互检测

通过射线检测实现模型点击事件：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
    console.log('点击了:', intersects[0].object.name);
    // 触发动画或UI响应
  }
}
window.addEventListener('click', onMouseClick, false);

五、动画系统设计

1. 基础动画循环

function animate() {
  requestAnimationFrame(animate);
  // 更新控制器阻尼
  controls.update();
  // 更新动画混合器
  for (const mixer of animationMixers) {
    mixer.update(0.016); // 假设60fps
  }
  renderer.render(scene, camera);
}
animate();

2. 自定义动画实现

使用Tween.js实现平滑过渡：

import * as TWEEN from 'tween.js';
function animateCamera() {
  new TWEEN.Tween(camera.position)
    .to({ x: 5, y: 8, z: 12 }, 2000)
    .easing(TWEEN.Easing.Quadratic.Out)
    .start();
  new TWEEN.Tween(controls.target)
    .to({ x: 0, y: 2, z: 0 }, 2000)
    .start();
}
// 在动画循环中更新TWEEN
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  // ...其他更新逻辑
}

六、响应式与跨平台适配

1. 窗口大小调整

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

2. 移动端优化方案

• 禁用复杂动画（检测navigator.userAgent）
• 降低渲染分辨率（renderer.setPixelRatio(window.devicePixelRatio > 1 ? 1 : window.devicePixelRatio)）
• 启用触摸事件（OrbitControls默认支持）

七、完整项目结构建议

project/
├── assets/
│   ├── models/       # GLTF模型文件
│   ├── textures/     # 贴图资源
│   └── sounds/       # 可选音效
├── src/
│   ├── components/   # 交互组件
│   ├── loaders/      # 资源加载器
│   ├── utils/        # 工具函数
│   └── main.js       # 入口文件
├── styles/
│   └── main.css      # 2D界面样式
└── index.html

八、性能监控指标

建议集成以下监控：

• FPS计数器：stats.js库
• 内存占用：performance.memory
• 渲染时间：renderer.info.render

import Stats from 'stats.js';
const stats = new Stats();
document.body.appendChild(stats.dom);
function animate() {
  requestAnimationFrame(animate);
  stats.update();
  // ...其他逻辑
}

通过以上技术方案，开发者可以系统化地构建出类似world.ipanda.com的高质量3D首页。实际开发中需注意模型面数控制（建议移动端不超过20k面）、纹理分辨率适配（推荐PBR贴图不超过1024x1024）等关键指标，确保在各类设备上都能获得流畅体验。