如何更改 MTL 文件的默认颜色？

Question

Here is the Code Pen Link, using THREE JS:

https://codepen.io/FarhaNaseem/pen/NWdgYQJ

我基本上拥有的是一个在 MTL 文件上具有基本颜色设置的 3d 模型。有没有一种方法可以添加配色方案并在单击时更改颜色？请注意，这必须分别为瓶子和盖子完成。

例如，帽子可以有金色、绿色、蓝色等颜色选项。瓶子可以有黄色、橙色、粉色等颜色选择。

此外，如果没有 GUI.dat 库，这样做的可能性有多大？

Answer 1

MTLLoader.load 的回调收到 MTLLoader.MaterialCreator（未记录）。在您的代码中，这里是 material 参数：

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( mtlURL, function( material ){ // <-- the MaterialCreator
  // ...
});

调用 preload 后，material 对象将使用 MTL 中定义的 material 名称填充其 materials 属性。如果你调试你的代码，你会看到你有两个 MeshPhongMaterials 命名为 blinn5SG 和 blinn8SG.

加载时更改颜色

此时（加载对象之前），您可以操作颜色。

material.materials.blinn5SG.color.setHex( bottleColorHex );
material.materials.blinn8SG.color.setHex( capColorHex  );

在运行时更改颜色

您还可以将 material 保存到全局可访问的变量中，以便在运行时访问：

var mtlLoader = new THREE.MTLLoader();
var bottleMaterial = null;
var capMaterial = null;
mtlLoader.load( mtlURL, function( material ){ // <-- the MaterialCreator
  material.preload();
  bottleMaterial = material.materials.blinn5SG;
  capMaterial = material.materials.blinn8SG;
  //...
});

// later...

function changeColor( material, newHexColor ){
  material.color.setHex( newHexColor );
  material.needsUpdate = true;
}
// examples:
changeColor( bottleMaterial, newBottleHexColor );
changeColor( capMaterial, newCapHexColor );

请注意，在运行时您需要将 material.needsUpdate 设置为 true 以告知渲染器 material 已更改。

如何更改 MTL 文件的默认颜色？

How to change the default color on a MTL file?

javascript

3d

three.js

加载时更改颜色

在运行时更改颜色