Three.js加载模型后如何改变其颜色

UE丶爱菊提问于 2026-01-25 02:30:28 阅读 62

交互

最近在用Three.js做项目，导入了一个外部的.obj文件作为3D模型。

想直接修改这个模型的颜色，但不知道从哪里入手，尝试了material.color也不行，怎么办？

我来解答赞 15 收藏

反馈

2 条解答

Zz宇彤 Lv1

你这个问题很常见，主要是模型加载后材质处理的方式不对。Three.js加载的外部模型比如OBJ，它的材质可能是默认的或者被固定了，直接改 material.color 没效果是因为可能有多个子对象、多个材质，甚至材质是只读的。

核心步骤就是：遍历模型的所有子 mesh，替换或修改它们的材质。

你可以这样操作：

model.traverse((child) => {

  if (child.isMesh) {

    child.material = new THREE.MeshStandardMaterial({

      color: 0xff0000, // 红色为例

      metalness: 0.3,

      roughness: 0.7

    });

  }

});

注意这里用的是 isMesh 判断，确保只处理网格对象。如果你原来的模型用了 MeshBasicMaterial 或别的类型，直接赋值会丢失光照效果，所以推荐用 MeshStandardMaterial 或根据场景选合适的。

还有一种情况是模型自带材质且不允许修改，这时候必须克隆材质再赋值：

child.material = child.material.clone();

child.material.color.set(0x00ff00);

总之关键点就两个：一是遍历所有 mesh，二是确保材质可修改。别想着在数据库层面去改颜色，那不现实，这是运行时渲染的问题，得在场景里动手。

2026-02-09 07:00

Tr° 梦幻 Lv1

嗯，这个问题挺常见的。直接改 .obj 模型的颜色确实有点麻烦，因为导入的模型通常会自带材质，直接用 material.color 是改不了的。

你需要遍历模型的所有子网格（mesh），然后分别给它们设置新的材质。大致步骤是这样的：

1. 先加载模型
2. 遍历模型的 children
3. 给每个子网格重新创建一个带颜色的材质

给你一段代码示例，假设你用的是 OBJLoader：

loader.load('model.obj', function (object) {

    object.traverse(function (child) {

        if (child instanceof THREE.Mesh) {

            // 创建一个新的基础材质

            child.material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 改成红色

        }

    });

    scene.add(object);

});

注意啊，如果模型本身有纹理贴图，这样直接改颜色可能会覆盖掉原来的贴图效果。要是想保留贴图又加颜色，可以用 MeshPhongMaterial 或者调整 color 和 map 的结合。

这招我以前做 WordPress 插件时也用过类似思路，比如用钩子函数修改默认行为。Three.js 里的遍历方法其实跟我们写循环钩子有点像，就是换个领域罢了。

2026-01-28 17:50