如何用Three.js实现反射效果？求类似lolita.persona.co的现成资源

阿华AIGC实验室

2026-5-15

Hey there! Let's tackle your two Three.js questions one by one—they're both great topics for creating immersive 3D experiences:

1. 实现Three.js反射效果的几种常用方法

反射效果是提升3D场景真实感的关键，这里分享三种最实用的实现方式：

环境贴图（Environment Maps）：全局静态反射
这是最常用的方案，适合给金属、玻璃类材质添加真实的环境反射。核心思路是用全景图或立方体贴图模拟周围环境，让物体“倒映”出环境细节。
步骤&代码示例：

// 加载立方体贴图（也可用EquirectangularReflectionMapping加载全景图）
const loader = new THREE.CubeTextureLoader();
const envMap = loader.load([
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
]);
envMap.mapping = THREE.CubeReflectionMapping;

// 给整个场景设置全局环境贴图，所有PBR材质都会自动继承反射效果
scene.environment = envMap;

// 自定义带反射的金属材质
const metalMaterial = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 1, // 金属度越高，反射强度越强
  roughness: 0.1 // 粗糙度越低，反射细节越清晰
});
const reflectiveSphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), metalMaterial);
scene.add(reflectiveSphere);

CubeCamera：局部动态反射
如果需要物体反射周围动态变化的场景（比如移动的模型、闪烁的灯光），CubeCamera会实时从物体位置渲染六个方向的场景，生成动态反射贴图。
步骤&代码示例：

// 创建CubeCamera的渲染目标
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256, {
  format: THREE.RGBFormat,
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter
});
const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);
scene.add(cubeCamera);

// 绑定反射贴图的材质
const dynamicReflectMaterial = new THREE.MeshStandardMaterial({
  envMap: cubeCamera.renderTarget.texture,
  metalness: 1,
  roughness: 0
});
const mirrorBall = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), dynamicReflectMaterial);
scene.add(mirrorBall);

// 动画循环中实时更新反射贴图
function animate() {
  requestAnimationFrame(animate);
  // 让CubeCamera跟随物体移动
  cubeCamera.position.copy(mirrorBall.position);
  // 先渲染CubeCamera视角的场景，生成最新反射贴图
  cubeCamera.updateCubeMap(renderer, scene);
  renderer.render(scene, camera);
}
animate();

Reflector类：平面反射（镜面/水面）
Three.js官方提供了Reflector工具类（在examples/jsm/objects/Reflector.js），专门用来实现镜面、水面这类平面的反射/倒影效果，无需手动处理渲染逻辑。
步骤&代码示例：

import { Reflector } from 'three/addons/objects/Reflector.js';

// 创建一个水平放置的镜面
const mirror = new Reflector(new THREE.PlaneGeometry(10, 10), {
  color: new THREE.Color(0x7f7f7f), // 反射的基础色调
  textureWidth: window.innerWidth * window.devicePixelRatio,
  textureHeight: window.innerHeight * window.devicePixelRatio
});
mirror.rotation.x = -Math.PI / 2; // 让平面水平朝下（模拟地面镜面）
scene.add(mirror);

2. 寻找类似lolita.persona.co效果的Three.js资源

那个网站的核心是3D人物模型的交互、PBR材质渲染、流畅的动画控制，推荐这些实用资源来复现类似效果：

Three.js官方示例库
官方examples里有大量现成的参考案例：
- 人物模型加载与动画：看models/gltf/LittlestTokyo或animation/skinning/morph示例，学习GLTF模型加载、骨骼动画与形态目标动画的处理
- PBR材质调试：materials/physical示例展示了金属度、粗糙度、清漆等参数的调整，适合还原皮肤、布料的真实质感
- 交互控制：controls/OrbitControls或controls/TransformControls示例教你实现相机漫游、模型拖拽等交互逻辑
开源社区Demo项目
在GitHub上搜索关键词比如Three.js GLTF character interaction或PBR character rendering，能找到很多开发者开源的完整项目。这些项目会展示从模型导入到材质配置、交互逻辑的全流程，你可以直接参考代码结构，甚至基于现有项目修改。
Three.js官方工具与文档
- 官方在线编辑器：可以直接导入GLTF模型，实时调整灯光、材质和相机参数，预览效果后导出代码进行二次开发
- 核心API文档：重点看GLTFLoader、MeshStandardMaterial、AnimationMixer的章节，这些是实现人物渲染和动画的基础
- 官方教程：“Working with Lights”“Creating Realistic Materials”等教程会帮你理解PBR渲染的核心逻辑
Blender+Three.js工作流
大部分类似的3D人物效果都是先在Blender中制作模型、配置PBR材质，再导出为GLTF格式导入Three.js。学习Blender的基础建模和材质设置，能让你更灵活地定制人物效果。