3.js - MeshPhysicalMaterial - 虹彩效果

在Three.js中，要创建一个具有虹彩效果的材质，您可以使用MeshPhysicalMaterial并调整其属性以模拟多种颜色间的光滑渐变。以下是一个简单的示例代码，展示了如何创建一个有虹彩效果的网格：

import * as THREE from 'three';
 
// 创建场景、摄像机和渲染器
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.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhysicalMaterial({
    color: new THREE.Color(0x000000), // 基础颜色设置为黑色
    roughness: 0.5, // 粗糙度，0为光滑，1为粗糙
    clearcoat: 1.0, // 清洁层强度，0为无清洁层，1为最强
    clearcoatRoughness: 0.0, // 清洁层的粗糙度
    ior: 1.5, // 介质折射率
    sheen: new THREE.Color(0xffffff), //  sheen色（亮光部分的颜色）
    sheenRoughness: 0.0 // sheen roughness（亮光部分的粗糙度）
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
 
camera.position.z = 5;
 
function animate() {
    requestAnimationFrame(animate);
 
    // 旋转球体模拟虹彩效果
    mesh.rotation.y += 0.01;
 
    renderer.render(scene, camera);
}
 
animate();

在这段代码中，我们创建了一个球体并使用MeshPhysicalMaterial定义了它的材质。通过调整sheen和sheenRoughness属性，我们可以改变光线在材质表面上的散射，从而模拟出一种虹彩效果。通过改变球体的旋转来动态更新渲染，从而创建一个动态的虹彩效果。