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

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

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

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

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

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

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

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

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

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