《Three.js 从入门到精通：构建沉浸式 3D 可视化应用的完整指南》

一、Three.js 基础环境搭建

🔧 依赖安装

npm install three @types/three @tweenjs/tween.js --save

📝 基本场景搭建

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 初始化场景
const scene = new THREE.Scene();

// 创建相机（透视投影）
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
);
// 设置相机位置到 (0,0,5)，确保物体在可视范围内
camera.position.z = 5; // 设置相机位置

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加轨道控制器（支持鼠标交互）
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 开启阻尼效果

二、几何体与材质

🎨 基础几何体创建

// 创建球体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); // 半径、经度分段、纬度分段
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 基础材质
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

// 创建立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); // 长宽高
const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // 带光照材质
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -2; // 设置位置
scene.add(cube);

📊 材质类型对比

材质类型	特性	适用场景
MeshBasicMaterial	无光照效果	调试或简单场景
MeshPhongMaterial	支持漫反射和镜面反射	大多数 3D 物体
MeshStandardMaterial	基于物理的渲染	真实感场景
MeshLambertMaterial	漫反射材质	无镜面反射需求

三、光照与阴影

🔦 光照设置

// 环境光（全局均匀照明）
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 颜色、强度
scene.add(ambientLight);

// 平行光（模拟太阳光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5); // 设置光源位置
scene.add(directionalLight);

// 点光源（球形发光）
const pointLight = new THREE.PointLight(0xff0000, 1, 10);
pointLight.position.set(2, 2, 2);
scene.add(pointLight);

🌑 阴影配置

// 开启渲染器阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 软阴影

// 设置物体投射阴影
cube.castShadow = true;
sphere.castShadow = true;

// 设置地面接收阴影
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2; // 旋转为水平面
plane.receiveShadow = true; // 接收阴影
scene.add(plane);

四、动画与交互

🎬 基础动画实现

// 球体旋转动画
function animate() {
  requestAnimationFrame(animate);
  
  sphere.rotation.x += 0.01; // 绕 X 轴旋转
  sphere.rotation.y += 0.01; // 绕 Y 轴旋转
  
  controls.update(); // 更新控制器状态
  renderer.render(scene, camera); // 渲染场景
}
animate();

📜 Tween.js 高级动画

import { Tween } from '@tweenjs/tween.js';

// 立方体缩放动画
const cubeTween = new Tween(cube.scale)
  .to({ x: 2, y: 2, z: 2 }, 1000) // 目标值、持续时间
  .easing(TWEEN.Easing.Elastic.Out) // 弹性缓动
  .repeat(Infinity) // 无限循环
  .yoyo(true); // 往返运动

cubeTween.start();

五、纹理与贴图

📸 加载纹理

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();

// 加载基础纹理
const texture = textureLoader.load(
  'textures/earth.jpg', // 纹理路径
  () => console.log('纹理加载完成'),
  (xhr) => console.log(`加载进度: ${(xhr.loaded / xhr.total) * 100}%`),
  (error) => console.error('纹理加载失败:', error)
);

// 应用纹理到材质
const texturedMaterial = new THREE.MeshStandardMaterial({
  map: texture, // 基础颜色贴图
  roughness: 0.5, // 粗糙度
  metalness: 0.3 // 金属度
});

// 创建纹理化的球体
const texturedSphere = new THREE.Mesh(new THREE.SphereGeometry(1.5), texturedMaterial);
scene.add(texturedSphere);

六、性能优化与高级技巧

🚀 实例化对象渲染

// 创建 1000 个立方体实例
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.InstancedMesh(geometry, material, 1000);

for (let i = 0; i < 1000; i++) {
  mesh.setMatrixAt(i, new THREE.Matrix4().setPosition(
    Math.random() * 8 - 4, // X 轴随机位置
    Math.random() * 8 - 4, // Y 轴随机位置
    Math.random() * 8 - 4  // Z 轴随机位置
  ));
}
scene.add(mesh);

🔍 层级细节 (LOD) 优化

// 创建不同精度的几何体
const highDetail = new THREE.SphereGeometry(1, 64, 64);
const mediumDetail = new THREE.SphereGeometry(1, 32, 32);
const lowDetail = new THREE.SphereGeometry(1, 16, 16);

// 创建 LOD 组
const lod = new THREE.LOD();
lod.addLevel(new THREE.Mesh(highDetail, material), 5); // 距离 <=5 显示高精度
lod.addLevel(new THREE.Mesh(mediumDetail, material), 10); // 5<距离<=10 显示中精度
lod.addLevel(new THREE.Mesh(lowDetail, material), 100); // 距离 >10 显示低精度
lod.position.z = 5;
scene.add(lod);

优化项	优化前	优化后	提升幅度
渲染帧率	25fps	58fps	132%
内存占用	1.2GB	450MB	62.5%

七、实战案例：3D 城市景观

🏙️ 完整实现代码

// 创建城市网格
const cityGeometry = new THREE.BoxGeometry(10, 5, 10);
const cityMaterial = new THREE.MeshStandardMaterial({ color: 0x666666 });
const city = new THREE.Mesh(cityGeometry, cityMaterial);
scene.add(city);

// 添加路灯
for (let i = -5; i <= 5; i += 2) {
  for (let j = -5; j <= 5; j += 2) {
    // 路灯杆
    const pole = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, 3), new THREE.MeshStandardMaterial({ color: 0x888888 }));
    pole.position.set(i, 1.5, j);
    scene.add(pole);

    // 路灯头
    const light = new THREE.PointLight(0xffff00, 2, 5);
    light.position.set(i, 4, j);
    scene.add(light);
  }
}

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 Vue 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕