PBR金属度和粗糙度

https://threejs.org/docs/scenes/material-browser.html#MeshPhysicalMaterial

PBR材质通过模拟真实世界中的物理属性来提供更加真实的渲染效果。在Three.js中，MeshStandardMaterial和MeshPhysicalMaterial材质支持PBR渲染。

金属度 (metalness)

金属度是一个表示材质金属感的属性。它的值范围从0.0到1.0：

• 0.0 表示完全非金属（例如木材或石材）。
• 1.0 表示完全金属。
• 0.5 是默认值，适用于非金属和金属之间的材质。

金属度影响材质的反射和高光特性。

粗糙度 (roughness)

粗糙度表示材质表面的光滑程度。它的值也从0.0到1.0：

• 0.0 表示非常光滑的表面，如镜子，具有强镜面反射。
• 1.0 表示非常粗糙的表面，如岩石或未经处理的金属，主要表现为漫反射。
• 0.5 是默认值，表示中等光滑度。

粗糙度影响材质的反射模糊度和高光的扩散。

示例代码

以下是如何在Three.js中使用金属度和粗糙度属性的示例代码：

// 初始化场景、相机和渲染器
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 geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建PBR材质
const material = new THREE.MeshStandardMaterial({
  metalness: 1.0, // 设置金属度为1.0，表示完全金属
  roughness: 0.2, // 设置粗糙度为0.2，表示非常光滑的表面
});

// 创建网格模型并添加到场景
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

在这个示例中，我们创建了一个立方体，并为其应用了PBR材质，设置了高金属度和低粗糙度，以模拟金属效果。您可以调整metalness和roughness的值，以观察不同金属效果的变化。