three.js - 置换贴图（displacementMap）、凹凸贴图（bumpMap）、法线贴图（normalMap）、金属贴图（metalnessMap）、粗糙贴图（.roughnessMa）

置换贴图（displacementMap）、凹凸贴图（bumpMap）和法线贴图（normalMap）是three.js中材质属性，用于增加模型表面的细节。

以下是如何在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 textureLoader = new THREE.TextureLoader();
const displacementMap = textureLoader.load('displacement_texture.jpg');
const bumpMap = textureLoader.load('bump_texture.jpg');
const normalMap = textureLoader.load('normal_texture.jpg');
 
// 创建材质
const material = new THREE.MeshPhongMaterial({
    displacementMap: displacementMap,
    displacementScale: 0.1, // 置换贴图的缩放系数
    displacementBias: 0, // 置换贴图的偏移量
    bumpMap: bumpMap,
    bumpScale: 0.1, // 凹凸贴图的缩放系数
    normalMap: normalMap,
    normalScale: new THREE.Vector2(0.1, 0.1), // 法线贴图的缩放系数
    // 其他材质参数...
});
 
// 加载模型（以GLTF为例）
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('model.gltf', (gltf) => {
    scene.add(gltf.scene);
    // 设置模型材质
    gltf.scene.traverse((child) => {
        if (child.isMesh) {
            child.material = material;
        }
    });
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
});
 
// 监听窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

在这个例子中，我们首先创建了一个场景、相机和渲染器。然后使用THREE.TextureLoader()加载了置换贴图、凹凸贴图和法线贴图。接着定义了一个材质对象，并将这些贴图应用到材质上。最后，我们加载一个模型，并将定义好的材质应用到模型的所有网格上。