当前位置：首页 > article >正文

Threejs 材质贴图、光照和投影详解

article 2024/11/14 16:17:32

1. 材质和贴图

材质（Material）定义了物体表面的外观，包括颜色、光泽度、透明度等。贴图（Textures）是应用于材质的图像，它们可以增加物体表面的细节和真实感。

1.1材质类型

MeshBasicMaterial：不受光照影响的基础材质。
MeshLambertMaterial：考虑漫反射的材质，适合简单的光照场景。
MeshPhongMaterial：考虑镜面高光的材质，适合光滑表面的物体。
MeshStandardMaterial：基于物理的材质，支持金属度和粗糙度贴图，适用于现代渲染管线。
MeshPhysicalMaterial：类似MeshStandardMaterial，但提供更高级的基于物理的渲染特性。

1.2 贴图的作用

map（颜色贴图）：定义物体的基本颜色。
normalMap（法线贴图）：通过模拟表面的微小凹凸来增加细节，不增加几何复杂度。
aoMap（环境光贴图）：模拟物体表面因邻近物体遮挡而产生的暗部效果。
displacementMap（位移贴图）：实际改变几何形状，创建真实的物理凹凸效果。
roughnessMap（粗糙度贴图）：控制材质的金属性质和表面粗糙度。

// 贴图
let textureLoader = new THREE.TextureLoader();
let floor = textureLoader.load("./images/base.jpg");
let ambient = textureLoader.load("./images/ambient.jpg");
let height = textureLoader.load("./images/height.jpg");
let normal = textureLoader.load("./images/normal.jpg");
let roughness = textureLoader.load("./images/roughness.jpg");

// 创建一个平面物体
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshStandardMaterial({
    map: floor, // 基础纹理贴图
    aoMap:ambient, // 环境光贴图
    displacementMap:height, // 位移贴图
    normalMap:normal, // 法线贴图
    roughnessMap:roughness,  // 粗糙度贴图

  }),
);

1.3 效果如下

2. 光照

光照是通过添加光源来实现的，光源类型包括：

环境光（AmbientLight）：提供全局照明效果，均匀照亮场景中的所有物体，不会产生阴影。
平行光（DirectionalLight）：模拟无限远的光源，如太阳，光线平行，不受距离影响。
点光源（PointLight）：从一个点向所有方向发出光线，光线强度随着距离增加而衰减。
半球光（HemisphereLight）：光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
聚光灯（SpotLight）：具有特定方向和圆锥形照射范围的光源，可以产生软边缘或硬边缘的阴影。

// 1. 环境光：均匀的照亮场景中的所有物体。
const ambientLight = new THREE.AmbientLight(0xff0000);
// scene.add( helper );

// 2. 平行光：沿着特定方向发射的光。
const directionalLight = new THREE.DirectionalLight(0x00ffff, 1);
directionalLight.position.set(0, 5, 0)
// 平行光辅助对象
const directionalLighthelper = new THREE.DirectionalLightHelper( directionalLight, 1 );
// scene.add( helper );

// 3. 半球光：光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
const hemisphereLight = new THREE.HemisphereLight( 0xff0000, 0x00ff00, 1 );
// scene.add( hemisphereLight );
// 半球光辅助对象
const hemisphereLighthelper = new THREE.HemisphereLightHelper( hemisphereLight, 1 );
// scene.add( hemisphereLighthelper );

// 4. 点光源：从一个点向各个方向发射的光源。
const pointLight = new THREE.PointLight( 0xff0000, 1, 100 ); // 第二个参数1是光照强度，第三个参数100是光源的衰减距离
scene.add( pointLight );
// 点光源辅助对象
const pointLightHelper = new THREE.PointLightHelper( pointLight, 1 );
scene.add( pointLightHelper );

3. 投影

投影需要确保渲染器和光源都支持阴影，并设置物体的castShadow和receiveShadow属性。阴影的质量可以通过调整光源的shadow.mapSize和其他阴影参数来优化。

// 投影： 光源  物体  渲染器

// 平行光：沿着特定方向发射的光。
const directionalLight = new THREE.DirectionalLight(0x00ffff, 1);
directionalLight.position.set(5, 5, 0)
scene.add(directionalLight);
// 平行光辅助对象
const directionalLighthelper = new THREE.DirectionalLightHelper(directionalLight, 1);
scene.add(directionalLighthelper);

// 创建一个平面物体
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshStandardMaterial({ color: 0xffffff })
);
plane.rotation.x = -Math.PI / 2;

// 创建一个立方体物体
let cube = new THREE.Mesh(
  new THREE.BoxGeometry(2, 2, 2),
  new THREE.MeshStandardMaterial()
);
cube.position.set(0, 2, 0)


// 1.开启渲染器，支持投影
renderer.shadowMap.enabled = true;
// 2.物体开启阴影
cube.castShadow = true;
// 3.接收阴影的物体
plane.receiveShadow = true;
// 4.光照开启阴影
directionalLight.castShadow = true;
// 5.阴影分辨率
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;