Three.js 多材质对象：给 3D 模型穿上 “混搭潮装”

在 Three.js 的 3D 世界里，每个对象就像是等待装扮的模特，而材质就是它们的时尚单品。当我们不满足于单一材质的单调，想要给对象穿上 "混搭潮装" 时，就需要用到多材质对象（Multi-Material Objects）。这就好比给一个玩偶，头部用毛绒材质，身体用丝绸材质，手脚用皮质，让它瞬间变得独一无二。接下来，就让我们深入这个神奇的领域，看看如何实现这一酷炫效果。

一、底层原理：一场光影的 "魔法契约"

在计算机图形学的底层世界中，材质就像是魔法师手中的咒语书，它决定了光线与物体表面相遇时，会产生怎样奇妙的反应。从最基础的层面来说，材质定义了物体表面如何反射、吸收和散射光线。

想象一下，我们有一个简单的立方体。当一束光线照射到它上面时，材质会告诉计算机："这部分表面是金属的，要把光线像镜子一样反射出去，让它亮闪闪的"；"那部分表面是磨砂玻璃的，光线要发生散射，让它看起来朦胧又柔和"。而多材质对象，就是允许我们在同一个物体上，同时使用多个这样的 "咒语书"，让物体的不同部分展现出不同的光影特性。

在 Three.js 背后，它利用了 GPU（图形处理器）强大的并行计算能力。GPU 就像是一个拥有无数工人的超级工厂，每个工人都能同时处理一小块图形数据。当我们为对象设置多材质时，Three.js 会将对象的几何形状按照材质的数量进行分割，然后告诉 GPU："嘿，这部分用材质 A 渲染，那部分用材质 B 渲染"。GPU 接到指令后，就会高效地并行处理这些不同材质的渲染任务，最终在屏幕上呈现出我们想要的多材质效果。

二、准备工作：搭建 "时尚工作室"

在开始为对象设计 "混搭潮装" 之前，我们得先搭建好我们的 "时尚工作室"，也就是准备好必要的开发环境和引入 Three.js 库。

首先，创建一个 HTML 文件，这就像是我们的工作室场地。在 HTML 文件中，引入 Three.js 库，你可以通过 CDN 链接引入，就像从网上订购了一套专业的设计工具包。在标签中添加以下代码：

xml 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

接着，在标签中创建一个用于展示 3D 场景的容器，比如一个
元素，它就是我们展示 3D 作品的橱窗：

bash 复制代码

<div id="canvas-container"></div>

然后，创建一个 JavaScript 文件，比如 script.js，用来编写我们的 3D 代码逻辑。在 HTML 文件中通过

xml 复制代码

<script src="script.js"></script>

这样，我们的 "时尚工作室" 就搭建好了，可以开始创作啦！

三、基础实践：给立方体穿上 "双色外套"

我们先从一个简单的例子入手，给一个立方体应用两种不同的材质，让它看起来像一个 "双色魔方"。

在 script.js 文件中，首先创建一个场景、一个相机和一个渲染器，这是 Three.js 绘制 3D 图形的基础三件套，就像画家的画布、眼睛和画笔：

javascript 复制代码

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);

接下来，定义两种不同的材质。我们用 MeshBasicMaterial 来创建简单的无光照材质，就像两种不同颜色的贴纸：

php 复制代码

// 创建红色材质
const redMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 创建蓝色材质
const blueMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });

然后，创建一个立方体的几何形状。几何形状就像是衣服的版型，决定了材质要贴合的形状：

ini 复制代码

const geometry = new THREE.BoxGeometry(1, 1, 1);

现在，关键的一步来了，将这两种材质组合成一个材质数组，就像把两张不同颜色的贴纸准备好，要贴到立方体上：

ini 复制代码

const materials = [redMaterial, blueMaterial];

接着，创建一个 Mesh 对象，并将几何形状和材质数组传递给它。这里的 Mesh 就像是穿上了 "双色外套" 的立方体模特：

ini 复制代码

const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);

最后，在渲染循环中不断更新渲染画面，让我们能实时看到效果：

scss 复制代码

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

运行代码，你会看到一个立方体，它的不同面呈现出红色和蓝色，仿佛在向你展示它独特的时尚品味。

四、进阶玩法：打造 "科幻飞船"

有了基础的实践，我们来尝试更复杂、更炫酷的多材质应用，打造一艘拥有多种材质的科幻飞船。

首先，还是按照老规矩创建场景、相机和渲染器。然后，我们需要创建飞船的几何形状。这里我们可以使用 BufferGeometry 来自定义复杂的几何形状，不过为了简化，我们先假设已经有一个合适的飞船几何形状 shipGeometry。

接下来，定义多种材质。我们给飞船设计金属外壳材质、透明玻璃材质和发光的能量装置材质：

php 复制代码

// 金属外壳材质
const metalMaterial = new THREE.MeshStandardMaterial({
    color: 0x808080,
    metalness: 0.8,
    roughness: 0.2
});
// 透明玻璃材质
const glassMaterial = new THREE.MeshStandardMaterial({
    color: 0x8080ff,
    metalness: 0,
    roughness: 0.1,
    transparent: true,
    opacity: 0.7
});
// 发光的能量装置材质
const energyMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    emissive: 0x00ff00,
    emissiveIntensity: 1
});

然后，将这些材质组合成材质数组：

ini 复制代码

const shipMaterials = [metalMaterial, glassMaterial, energyMaterial];

创建飞船的 Mesh 对象，并将几何形状和材质数组传递给它：

ini 复制代码

const ship = new THREE.Mesh(shipGeometry, shipMaterials);
scene.add(ship);

最后，在渲染循环中添加一些动画效果，比如让飞船旋转、让能量装置闪烁等，让它看起来更生动：

scss 复制代码

function animate() {
    requestAnimationFrame(animate);
    ship.rotation.y += 0.005;
    // 让能量装置闪烁
    energyMaterial.emissiveIntensity = Math.sin(Date.now() * 0.001) * 2 + 1;
    renderer.render(scene, camera);
}
animate();

通过这样的设置，一艘拥有金属质感外壳、透明玻璃舱室和发光能量装置的科幻飞船就诞生了，它仿佛随时都能穿梭在浩瀚的宇宙中。

五、注意事项："时尚搭配" 的小陷阱

在使用多材质对象时，有一些小细节需要我们注意，避免踩进 "时尚搭配" 的小陷阱。

材质顺序与几何面的对应：材质数组中的顺序非常重要，它与几何形状的面是一一对应的。如果顺序错误，就像把衣服穿反了，效果会大打折扣。所以在创建多材质对象时，一定要清楚每个材质对应的是几何形状的哪些面。

性能问题：虽然 GPU 很强大，但使用过多复杂的材质也可能会影响性能。就像一个工厂里同时处理太多复杂订单，工人也会忙不过来。所以尽量优化材质的设置，避免不必要的计算。

光照与材质的配合：不同的材质对光照的反应不同。比如 MeshStandardMaterial 是基于物理的材质，会根据光照计算真实的光影效果；而 MeshBasicMaterial 不受光照影响。在搭配材质时，要考虑光照设置，让整体效果更协调。

通过以上的学习和实践，相信你已经掌握了 Three.js 中多材质对象的使用方法。现在，发挥你的创意，让你的 3D 模型穿上独一无二的 "混搭潮装"，在 Three.js 的 3D 世界里尽情展现个性吧！无论是打造奇幻的魔法城堡，还是未来感十足的太空站，多材质对象都能为你的创作增添无限可能。