三.js 每个物体上的不同材质答案

【问题标题】：three.js Different materials on each object三.js 每个物体上的不同材质
【发布时间】：2014-07-15 15:14:36
【问题描述】：

我对three.js 和javascript 非常陌生。我希望创建一个包含不同对象的场景，每个对象都有自己的材质，稍后我将通过 GUI 对其进行编程以进行修改。我遇到的问题是我的对象渲染成功，但它们都保留了相同的材质，它们并不是每个都有自己的材质。

这是我渲染对象和材质的代码：

    var jsonLoader = new THREE.JSONLoader();
var gals3 = jsonLoader.load( "model/galmodel.js", addModelToScene );
var gals3black = jsonLoader.load( "model/galaxys3.js", addModelToScene );


}   

function addModelToScene(gals3) 
{

var gals3Material = new THREE.MeshPhongMaterial( { map:     THREE.ImageUtils.loadTexture('images/galaxys3_white_diffuse.png') } );
gals3 = new THREE.Mesh(gals3, gals3Material );
gals3.scale.set(10,10,10);
scene.add( gals3 );
}


function addModelToScene(gals3black) 
{
var gals3blackMaterial = new THREE.MeshPhongMaterial( { map:   THREE.ImageUtils.loadTexture('images/galaxys3_black_diffuse.png') } );
gals3black = new THREE.Mesh(gals3black, gals3blackMaterial );
gals3black.scale.set(10,10,10);
scene.add( gals3black );
}

使用上面的代码，我可以正确渲染对象，但它们都保留了“gals3black”材质。我希望代码以后可以很容易地编程到 GUI 中以更改纹理贴图。任何帮助表示赞赏。很抱歉格式和解释不佳。我对此很陌生，并将其作为一种爱好。

提前感谢您的帮助。

【问题讨论】：

尝试分配新变量而不是重复使用gals3 和gals3black。此外，您实际上不必保留 loader.load 的结果

标签： javascript three.js

【解决方案1】：

您已经定义了函数 addModelToScene 两次，因此第二个定义将覆盖第一个定义，这就是您要调用的函数。因此，您还将 gals3blackMaterial 的纹理分配给两者。

相反，您可以定义单个函数 addModelToScene 并传递要用作参数的纹理名称。

【讨论】：