首页 > 网络编程 > JavaScript > javascript技巧 > Three.js材质与光照

Three.js材质与光照知识点总结(附详细代码)

2025-06-16 10:14:38 作者：泫凝

随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上,这篇文章主要介绍了Three.js材质与光照知识点的相关资料,需要的朋友可以参考下

前言

在 Three.js 中，材质（Material） 和 光照（Light） 是 3D 场景视觉效果的核心。合理搭配材质和光照，可以让物体 真实反光、透明、金属感、卡通效果 等。

1. 材质（Material）分类

Three.js 提供了多种材质，每种材质适用于不同的效果：

材质类型	适用场景	特点	是否受光照影响
`MeshBasicMaterial`	纯色/纹理	不受光照影响	❌
`MeshStandardMaterial`	PBR 物理材质（推荐）	支持金属、粗糙度	✅
`MeshPhysicalMaterial`	高级 PBR 材质	透明、清漆、次表面散射	✅
`MeshLambertMaterial`	低成本光照	无高光，计算漫反射	✅
`MeshPhongMaterial`	经典光照材质	支持高光（specular）	✅
`MeshToonMaterial`	卡通渲染	类似 2D 动漫	✅
`MeshDepthMaterial`	深度缓冲材质	用于阴影、后处理	❌
`MeshMatcapMaterial`	预烘焙材质	不受光照影响，依赖 MatCap 贴图	❌

2. 常见材质属性

所有材质都继承自 THREE.Material，但有些属性只适用于特定材质。

属性	作用	适用材质
`map`	颜色纹理	所有材质（除 Depth、Matcap）
`color`	颜色	所有材质
`opacity`	透明度	`transparent=true` 才生效
`transparent`	是否透明	所有材质
`side`	正面/背面/双面	`THREE.FrontSide / BackSide / DoubleSide`
`wireframe`	线框模式	所有材质
`metalness`	金属度（`0~1` ）	`MeshStandardMaterial`
`roughness`	粗糙度（`0~1` ）	`MeshStandardMaterial`
`shininess`	高光强度	`MeshPhongMaterial`
`specular`	高光颜色	`MeshPhongMaterial`
`flatShading`	是否平面着色	`true` 让模型棱角分明
`displacementMap`	位移贴图（改变顶点高度）	`MeshStandardMaterial`
`normalMap`	法线贴图（增加凹凸感）	`MeshStandardMaterial`
`aoMap`	环境遮蔽贴图（增强阴影）	`MeshStandardMaterial`
`envMap`	环境贴图（反射环境）	`MeshStandardMaterial / MeshPhongMaterial`

3. 纹理贴图（Texture）

材质可以使用多种 贴图（Texture） 来增强视觉效果：

纹理贴图	作用	适用材质
`map`	基础颜色贴图	✅
`alphaMap`	透明度（黑色透明）	✅
`bumpMap`	凹凸贴图	`MeshStandardMaterial / MeshPhongMaterial`
`normalMap`	法线贴图	`MeshStandardMaterial / MeshPhongMaterial`
`roughnessMap`	粗糙度贴图	`MeshStandardMaterial`
`metalnessMap`	金属度贴图	`MeshStandardMaterial`
`aoMap`	环境遮蔽（阴影）	`MeshStandardMaterial`
`emissiveMap`	自发光贴图	`MeshStandardMaterial`

const material = new THREE.MeshStandardMaterial({
  map: colorTexture, // 颜色贴图
  normalMap: normalTexture, // 法线贴图
  roughnessMap: roughnessTexture, // 粗糙度贴图
  metalnessMap: metalnessTexture, // 金属度贴图
  aoMap: ambientOcclusionTexture, // AO 贴图
  displacementMap: heightTexture, // 位移贴图
  displacementScale: 0.1, // 位移强度
  transparent: true,
  side: THREE.DoubleSide,
});

4. 光照（Lighting）

在 Three.js 中，某些材质需要光源才能正确显示，比如 MeshStandardMaterial。

环境光（AmbientLight）

不产生阴影，均匀照亮整个场景
适用于基础填充光

const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

点光源（PointLight）

类似灯泡，从一个点向四周发光
可以产生阴影

const pointLight = new THREE.PointLight(0xffffff, 30);
pointLight.position.set(2, 3, 4);
scene.add(pointLight);

平行光（DirectionalLight）

类似太阳光，从固定方向照射
适用于户外场景

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

聚光灯（SpotLight）

类似手电筒，有方向性

const spotLight = new THREE.SpotLight(0xffffff, 10);
spotLight.position.set(0, 5, 0);
scene.add(spotLight);

5. HDR 环境贴图

Three.js 支持 HDR 贴图 来增强场景光照与反射效果。

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

const rgbeLoader = new RGBELoader();
rgbeLoader.load('textures/environment.hdr', (hdrTexture) => {
    hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
    
    // 影响整个场景
    scene.environment = hdrTexture;
    scene.background = hdrTexture;

    // 影响单个物体
    material.envMap = hdrTexture;
    material.needsUpdate = true;
});

✔ HDR 贴图能提供更真实的环境反射✔ 需要设置 THREE.EquirectangularReflectionMapping

6. 鼠标拖动画面

Three.js 提供 OrbitControls 来让用户交互。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 添加阻尼效果
controls.screenSpacePanning = false; // 限制平移方向

鼠标操作

鼠标操作	效果
左键拖动	旋转视角
右键拖动	平移相机
滚轮滚动	缩放

7. 调试 GUI

可以使用 dat.GUI 调整参数：

import * as dat from 'dat.gui';

const gui = new dat.GUI();
gui.add(material, 'metalness').min(0).max(1).step(0.01);
gui.add(material, 'roughness').min(0).max(1).step(0.01);
gui.add(material, 'aoMapIntensity').min(0).max(10).step(0.01);

这样可以 实时修改材质参数，方便调试。

总结

✔ MeshStandardMaterial 是最推荐的 PBR 材质✔ 光照对不同材质的影响不同，基本材质 (MeshBasicMaterial) 不受影响
✔ HDR 贴图能大幅提升环境反射效果✔ OrbitControls 让鼠标控制视角

到此这篇关于Three.js材质与光照知识点的文章就介绍到这了,更多相关Three.js材质与光照内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！