如何在 THREE.JS 中为立方体的不同面设置不同的材质？

前言

在日常开发中，有许多情况需要为不同的面设置不同的材质。例如，在构建游戏场景时，我们可能需要为地面、墙壁和天花板设置不同的材质，以实现更真实的效果。同样，在建筑可视化和产品展示方面，为不同的面设置不同的材质也是很常见的需求。

实现方法

创建网格对象时直接传入材质数组

// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
//创建不同面的材质
const cubeMaterial1 = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cubeMaterial2 = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cubeMaterial3 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cubeMaterial4 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cubeMaterial5 = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const cubeMaterial6 = new THREE.MeshBasicMaterial({ color: 0x000000 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, [cubeMaterial1,cubeMaterial2,cubeMaterial3,cubeMaterial4,cubeMaterial5,cubeMaterial6]);
// 将几何体添加到场景中
scene.add(cube);
cube.position.set(2,0,0)

效果：

使用MultiMaterial实现

//设置几何体
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
// 设置几何体不同面的材质
const boxmaterial1 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色
const boxmaterial2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色
const boxmaterial3 = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // 蓝色
const boxmaterial4 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色
const boxmaterial5 = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色
const boxmaterial6 = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // 蓝色
// 组装成一个数组
const materials = [boxmaterial1, boxmaterial2, boxmaterial3,boxmaterial4, boxmaterial5, boxmaterial6];

// 使用MultiMaterial
const multiMaterial = new THREE.MultiMaterial(materials);

// 创建网格对象
const boxmesh = new THREE.Mesh(boxGeometry, multiMaterial);

scene.add(boxmesh);
boxmesh.position.set(-2,0,0)

效果

总结

为不同的面设置不同的材质，在我们的日常开发中是一个非常常见的需求。掌握其实现方法，非常重要。如有错误之处，欢迎大家留言指出，谢谢大家了。