管理模型材质共享：避免意外的全局更改
在3D图形编程中，经常从外部源（如Blender）导入模型，这些模型的多个部分可能共享相同的材质。这可能导致在Three.js中对一个模型的材质更改影响到所有共享该材质的模型。以下是如何识别和解决这个问题的详细指南。
识别材质共享
在Three.js中，可以通过检查材质对象的引用来识别共享的材质。
示例代码：检查材质共享
javascript
const building1 = scene.getObjectByName("HighriseA");
const building2 = scene.getObjectByName("HighriseB");
if (building1.material === building2.material) {
console.log("Both buildings share the same material.");
}避免材质共享导致的更改
为了避免更改一个模型的材质影响到其他模型，可以克隆材质对象，确保每个模型拥有独立的材质实例。
解决方案1：克隆材质
通过克隆材质对象，可以确保每个模型的材质独立，从而避免全局更改。
示例代码：克隆材质
javascript
const building1 = scene.getObjectByName("HighriseA");
const building2 = scene.getObjectByName("HighriseB");
// 克隆材质
const uniqueMaterial1 = building1.material.clone();
const uniqueMaterial2 = building2.material.clone();
// 应用克隆的材质
building1.material = uniqueMaterial1;
building2.material = uniqueMaterial2;
// 现在可以独立更改每个模型的材质
building1.material.color.set(0xff0000); // 红色
building2.material.color.set(0x00ff00); // 绿色解决方案2：克隆材质
为了避免更改一个模型的材质影响到其他模型，可以克隆材质对象，确保每个模型拥有独立的材质实例。
使用.traverse()方法克隆材质
通过.traverse()方法，可以递归遍历场景中的所有对象，并为每个网格模型克隆材质。
示例代码：克隆材质
javascript
gltf.scene.traverse(function (obj) {
if (obj.isMesh) {
// .material.clone()返回一个新材质对象，和原来一样，重新赋值给.material属性
obj.material = obj.material.clone();
}
});完整示例代码
以下是一个完整的示例，展示如何在Three.js中加载GLTF模型，并解决材质共享问题。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Manage Material Sharing</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.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 loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', function (gltf) {
scene.add(gltf.scene);
// 获取模型并克隆材质
const highriseA = gltf.scene.getObjectByName("HighriseA");
const highriseB = gltf.scene.getObjectByName("HighriseB");
const uniqueMaterialA = highriseA.material.clone();
const uniqueMaterialB = highriseB.material.clone();
highriseA.material = uniqueMaterialA;
highriseB.material = uniqueMaterialB;
// 独立更改每个模型的材质颜色
highriseA.material.color.set(0xff0000); // 红色
highriseB.material.color.set(0x00ff00); // 绿色
camera.position.set(0, 0, 5);
render();
});
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>