快捷導(dǎo)航

Three.js材質(zhì)與光照知識(shí)點(diǎn)總結(jié)(附詳細(xì)代碼)

更新時(shí)間：2025年06月16日 10:24:08 作者：泫凝

隨著人們對(duì)用戶體驗(yàn)越來越重視,Web開發(fā)已經(jīng)不滿足于2D效果的實(shí)現(xiàn),而把目標(biāo)放到了更加炫酷的3D效果上,這篇文章主要介紹了Three.js材質(zhì)與光照知識(shí)點(diǎn)的相關(guān)資料,需要的朋友可以參考下

前言

在 Three.js 中，材質(zhì)（Material） 和 光照（Light） 是 3D 場(chǎng)景視覺效果的核心。合理搭配材質(zhì)和光照，可以讓物體 真實(shí)反光、透明、金屬感、卡通效果 等。

1. 材質(zhì)（Material）分類

Three.js 提供了多種材質(zhì)，每種材質(zhì)適用于不同的效果：

材質(zhì)類型	適用場(chǎng)景	特點(diǎn)	是否受光照影響
`MeshBasicMaterial`	純色/紋理	不受光照影響	?
`MeshStandardMaterial`	PBR 物理材質(zhì)（推薦）	支持金屬、粗糙度	?
`MeshPhysicalMaterial`	高級(jí) PBR 材質(zhì)	透明、清漆、次表面散射	?
`MeshLambertMaterial`	低成本光照	無高光，計(jì)算漫反射	?
`MeshPhongMaterial`	經(jīng)典光照材質(zhì)	支持高光（specular）	?
`MeshToonMaterial`	卡通渲染	類似 2D 動(dòng)漫	?
`MeshDepthMaterial`	深度緩沖材質(zhì)	用于陰影、后處理	?
`MeshMatcapMaterial`	預(yù)烘焙材質(zhì)	不受光照影響，依賴 MatCap 貼圖	?

2. 常見材質(zhì)屬性

所有材質(zhì)都繼承自 THREE.Material，但有些屬性只適用于特定材質(zhì)。

屬性	作用	適用材質(zhì)
`map`	顏色紋理	所有材質(zhì)（除 Depth、Matcap）
`color`	顏色	所有材質(zhì)
`opacity`	透明度	`transparent=true` 才生效
`transparent`	是否透明	所有材質(zhì)
`side`	正面/背面/雙面	`THREE.FrontSide / BackSide / DoubleSide`
`wireframe`	線框模式	所有材質(zhì)
`metalness`	金屬度（`0~1` ）	`MeshStandardMaterial`
`roughness`	粗糙度（`0~1` ）	`MeshStandardMaterial`
`shininess`	高光強(qiáng)度	`MeshPhongMaterial`
`specular`	高光顏色	`MeshPhongMaterial`
`flatShading`	是否平面著色	`true` 讓模型棱角分明
`displacementMap`	位移貼圖（改變頂點(diǎn)高度）	`MeshStandardMaterial`
`normalMap`	法線貼圖（增加凹凸感）	`MeshStandardMaterial`
`aoMap`	環(huán)境遮蔽貼圖（增強(qiáng)陰影）	`MeshStandardMaterial`
`envMap`	環(huán)境貼圖（反射環(huán)境）	`MeshStandardMaterial / MeshPhongMaterial`

3. 紋理貼圖（Texture）

材質(zhì)可以使用多種 貼圖（Texture） 來增強(qiáng)視覺效果：

紋理貼圖	作用	適用材質(zhì)
`map`	基礎(chǔ)顏色貼圖	?
`alphaMap`	透明度（黑色透明）	?
`bumpMap`	凹凸貼圖	`MeshStandardMaterial / MeshPhongMaterial`
`normalMap`	法線貼圖	`MeshStandardMaterial / MeshPhongMaterial`
`roughnessMap`	粗糙度貼圖	`MeshStandardMaterial`
`metalnessMap`	金屬度貼圖	`MeshStandardMaterial`
`aoMap`	環(huán)境遮蔽（陰影）	`MeshStandardMaterial`
`emissiveMap`	自發(fā)光貼圖	`MeshStandardMaterial`

const material = new THREE.MeshStandardMaterial({
  map: colorTexture, // 顏色貼圖
  normalMap: normalTexture, // 法線貼圖
  roughnessMap: roughnessTexture, // 粗糙度貼圖
  metalnessMap: metalnessTexture, // 金屬度貼圖
  aoMap: ambientOcclusionTexture, // AO 貼圖
  displacementMap: heightTexture, // 位移貼圖
  displacementScale: 0.1, // 位移強(qiáng)度
  transparent: true,
  side: THREE.DoubleSide,
});

4. 光照（Lighting）

在 Three.js 中，某些材質(zhì)需要光源才能正確顯示，比如 MeshStandardMaterial。

環(huán)境光（AmbientLight）

不產(chǎn)生陰影，均勻照亮整個(gè)場(chǎng)景
適用于基礎(chǔ)填充光

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

點(diǎn)光源（PointLight）

類似燈泡，從一個(gè)點(diǎn)向四周發(fā)光
可以產(chǎn)生陰影

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

平行光（DirectionalLight）

類似太陽光，從固定方向照射
適用于戶外場(chǎng)景

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 環(huán)境貼圖

Three.js 支持 HDR 貼圖 來增強(qiáng)場(chǎng)景光照與反射效果。

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

const rgbeLoader = new RGBELoader();
rgbeLoader.load('textures/environment.hdr', (hdrTexture) => {
    hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
    
    // 影響整個(gè)場(chǎng)景
    scene.environment = hdrTexture;
    scene.background = hdrTexture;

    // 影響單個(gè)物體
    material.envMap = hdrTexture;
    material.needsUpdate = true;
});

? HDR 貼圖能提供更真實(shí)的環(huán)境反射? 需要設(shè)置 THREE.EquirectangularReflectionMapping

6. 鼠標(biāo)拖動(dòng)畫面

Three.js 提供 OrbitControls 來讓用戶交互。

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

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

鼠標(biāo)操作

鼠標(biāo)操作	效果
左鍵拖動(dòng)	旋轉(zhuǎn)視角
右鍵拖動(dòng)	平移相機(jī)
滾輪滾動(dòng)	縮放

7. 調(diào)試 GUI

可以使用 dat.GUI 調(diào)整參數(shù)：

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);

這樣可以 實(shí)時(shí)修改材質(zhì)參數(shù)，方便調(diào)試。

總結(jié)

? MeshStandardMaterial 是最推薦的 PBR 材質(zhì)? 光照對(duì)不同材質(zhì)的影響不同，基本材質(zhì) (MeshBasicMaterial) 不受影響
? HDR 貼圖能大幅提升環(huán)境反射效果? OrbitControls 讓鼠標(biāo)控制視角

到此這篇關(guān)于Three.js材質(zhì)與光照知識(shí)點(diǎn)的文章就介紹到這了,更多相關(guān)Three.js材質(zhì)與光照內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: