threejs光照与材质

最新推荐文章于 2025-02-19 23:40:09 发布

LIANG源

最新推荐文章于 2025-02-19 23:40:09 发布

阅读量703

点赞数 7

文章标签： 3d javascript blender 前端材质

本文链接：https://blog.youkuaiyun.com/weixin_42959900/article/details/141551647

版权

光照与材质学习文档

1. 光照的基础概念

1.1 什么是光照？

光照是模拟现实世界中光线与物体交互的过程。通过光照，可以使得 3D 场景中的对象呈现出不同的明暗、阴影和高光效果，从而增强场景的真实感。

1.2 光照模型

在 3D 渲染中，常用的光照模型包括：

环境光（Ambient Light）：环境光是无方向的全局光源，它均匀地照亮整个场景，通常用于模拟散射光。
漫反射光（Diffuse Light）：漫反射光模拟光线在物体表面均匀散射的效果，表现为物体的颜色和亮度。
镜面反射光（Specular Light）：镜面反射光模拟光线在光滑表面上的反射，通常用于表现物体的高光部分。
点光源（Point Light）：点光源从一个点向所有方向发出光线，类似于现实中的灯泡。
平行光（Directional Light）：平行光模拟来自无限远处的光线，例如阳光，光线在整个场景中平行传播。
聚光灯（Spot Light）：聚光灯是一种方向性强的光源，类似于手电筒。

2. 光照模型的应用

2.1 环境光

环境光是最基础的光源，它提供了均匀的场景亮度，不受场景中的位置和方向影响。

const ambientLight = new THREE.AmbientLight(0x404040); // 环境光颜色
scene.add(ambientLight);

2.2 漫反射光

漫反射光会根据光线和表面法线的夹角决定光的强度，使得物体表面呈现出柔和的光照效果。

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // 平行光
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

2.3 镜面反射光

镜面反射光用于模拟物体表面的高光效果，通常结合漫反射光一起使用，以增加物体的光泽感。

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

3. 材质的基础概念

3.1 什么是材质？

材质定义了物体表面如何与光线交互。通过设置不同的材质参数，可以使得物体表现出如金属、塑料、布料等不同的质感。

3.2 常见的材质类型

基本材质（MeshBasicMaterial）：不受光照影响，显示纯色或纹理，适用于简单的渲染。
Lambert 材质（MeshLambertMaterial）：支持漫反射光照，但不支持镜面反射光，适用于粗糙、不反光的物体。
Phong 材质（MeshPhongMaterial）：支持漫反射和镜面反射光照，适用于光滑、有反光的物体。
标准材质（MeshStandardMaterial）：基于物理的渲染（PBR）材质，支持高级光照效果，适用于现实感强的场景。
物理材质（MeshPhysicalMaterial）：更高端的 PBR 材质，适用于模拟真实世界的材质属性，如透明度、折射率等。

4. 材质的应用

4.1 基本材质示例

使用 MeshBasicMaterial 可以快速创建一个不受光照影响的物体，用于背景或简单的几何体。

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(new THREE.BoxGeometry(), material);
scene.add(cube);

4.2 Lambert 材质示例

MeshLambertMaterial 是常用于不太光滑物体的材质，可以很好地表现出漫反射光照效果。

const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(new THREE.SphereGeometry(), material);
scene.add(sphere);

4.3 Phong 材质示例

MeshPhongMaterial 提供了更加真实的光照效果，尤其是在处理反光物体时表现更佳。

const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 });
const sphere = new THREE.Mesh(new THREE.SphereGeometry(), material);
scene.add(sphere);

4.4 标准材质示例

MeshStandardMaterial 是用于 PBR 渲染的材质，能够真实地模拟物体的光泽度和粗糙度。

const material = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.5, metalness: 1 });
const cube = new THREE.Mesh(new THREE.BoxGeometry(), material);
scene.add(cube);

5. 综合光照与材质应用

5.1 创建一个多光源场景

在一个复杂的 3D 场景中，通常会结合多种光源和材质来达到最佳的渲染效果。以下是一个使用多种光源和材质的综合示例：

import * as THREE from 'https://cdn.skypack.dev/three@0.155.0';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

// 添加带有 Phong 材质的立方体
const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 });
const cube = new THREE.Mesh(new THREE.BoxGeometry(), cubeMaterial);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

5.2 反射和折射

在高级渲染中，可以通过材质属性实现反射和折射效果，例如使用 MeshPhysicalMaterial 实现玻璃材质的效果。

const glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transparent: true,
  opacity: 0.5,
  reflectivity: 0.9,
  transmission: 1.0, // 表示透明度，用于模拟玻璃
});
const glassSphere = new THREE.Mesh(new THREE.SphereGeometry(), glassMaterial);
scene.add(glassSphere);