Javascript 如何在单击时更改使用JSONLoader创建的对象的纹理材质

我正在使用Three.js创建一个对象。我已经创建了一些按钮，可以通过单击专用按钮来更改对象的材质颜色

问题是：如何使用纹理材质完成相同的过程，因此，如果单击“纹理”按钮，材质将从颜色变为我想要在该对象上使用的纹理材质？可能吗

以下是按钮的工作方式：

<nav>
  <span>Choose color:</span>
  <input type="button" value="White" onClick="mesh.traverse(function(child) {if(child instanceof THREE.Mesh){ child.material.color.setHex('0xffffff');}});" />
  <input type="button" value="Black" onClick="mesh.traverse(function(child) {if(child instanceof THREE.Mesh){ child.material.color.setHex('0x2f3a4c');}});" />          
  <input type="button" value="Green" onClick="mesh.traverse(function(child) {if(child instanceof THREE.Mesh){ child.material.color.setHex('0x44cc88');}});" />
</nav>

我看到一些解决方案如下所示：

obj.mesh.material.uniforms.texture = THREE.ImageUtils.loadTexture("textures/1.png");
obj.mesh.material.uniforms.texture.needsUpdate = true;

但我不确定是否有可能将此解决方案用于我的目的，如果有，如何做到这一点

更新：

我在文档的开头尝试了以下代码：

<script>
    function f1(){

        var loader = new THREE.ImageLoader();
        var texture = loader.load( 'images/crate.png' );
        mesh.traverse(function(child) {
            if(child instanceof THREE.Mesh){ 
                child.material = new THREE.MeshPhongMaterial( { map: texture} );
                child.material.needsUpdate = true;
                child.geometry.buffersNeedUpdate = true;
                child.geometry.uvsNeedUpdate = true;
            }
        });

    }
</script>

函数f1（）{
var loader=new THREE.ImageLoader（）；
var texture=loader.load（'images/crate.png'）；
网格遍历（函数（子函数）{
if（三个.Mesh的子实例）{
child.material=new THREE.MeshPhongMaterial（{map:texture}）；
child.material.needsUpdate=true；
child.geometry.buffersNeedUpdate=true；
child.geometry.uvsNeedUpdate=true；
}
});
}

并调用正文中的f1（）函数：

<nav>
    <span>Choose color:</span>
    <input type="button" value="White" onClick="mesh.traverse(function(child) {if(child instanceof THREE.Mesh){ child.material.color.setHex('0xffffff');}});" />
    <input type="button" value="Black" onClick="mesh.traverse(function(child) {if(child instanceof THREE.Mesh){ child.material.color.setHex('0x2f3a4c');}});" />            
    <input type="button" value="Green" onClick="mesh.traverse(function(child) {if(child instanceof THREE.Mesh){ child.material.color.setHex('0x44cc88');}});" />
    <input type="button" value="Texture" onClick="f1();" >
</nav>

选择颜色：

我收到以下警告消息三。材质：“贴图”参数未定义。我的物体的材质正在变成白色

---

这是解决我问题的代码：

function f1(){

        text = THREE.ImageUtils.loadTexture( 'images/crate.png' );
        mesh.traverse(function(child) {
            if(child instanceof THREE.Mesh){
                //alert("works");
                child.material.map = text;
                child.material.needsUpdate = true;
                child.geometry.buffersNeedUpdate = true;
                child.geometry.uvsNeedUpdate = true;
            }
        });
       }

---

其中child.geometry.buffersNeedUpdate=true和child.geometry.uvsNeedUpdate=true是必需的。

这一个解决了我的问题：

function f1(){

        text = THREE.ImageUtils.loadTexture( 'images/crate.png' );
        mesh.traverse(function(child) {
            if(child instanceof THREE.Mesh){
                //alert("works");
                child.material.map = text;
                child.material.needsUpdate = true;
                child.geometry.buffersNeedUpdate = true;
                child.geometry.uvsNeedUpdate = true;
            }
        });
       }

---

其中child.geometry.buffersNeedUpdate=true和child.geometry.uvsNeedUpdate=true是必需的。

最好将材质放在变量中，这样onclick看起来就像

onclick=“materialcolor.setHex（'0xffffff'）”

。通过这种方式，您也可以简单地调用一个函数，在单击时应用纹理贴图。我的问题是，我不知道调用的外观如何，因此纹理可以映射到网格，如mesh.traverse（函数（child）{if（child instanceof THREE.mesh）{child.material.color.setHex（'0x44cc88'）；}）；仅适用于纹理部分。因为如果我没记错的话，纹理贴图和仅仅改变颜色有点不同，你的问题有点模糊，看起来你可能会受益于看更多的例子。看一看。您只需更改材质实例的属性（可能还需要设置needsUpdate）即可更改材质属性。我已为我的问题添加了一个更新。你能告诉我我的方法是否正确吗？在f1方法中，你不需要创建新材质，只需将

map

参数设置为

texture

。例如，

child.material.map=texture

。您也不需要更新缓冲区或UV。如果您创建了一个jsfiddle，那么帮助您会容易得多。最好将材质放入一个变量中，这样onclick看起来就像

onclick=“materialcolor.setHex（'0xffffff'）”

。通过这种方式，您也可以简单地调用一个函数，在单击时应用纹理贴图。我的问题是，我不知道调用的外观如何，因此纹理可以映射到网格，如mesh.traverse（函数（child）{if（child instanceof THREE.mesh）{child.material.color.setHex（'0x44cc88'）；}）；仅适用于纹理部分。因为如果我没记错的话，纹理贴图和仅仅改变颜色有点不同，你的问题有点模糊，看起来你可能会受益于看更多的例子。看一看。您只需更改材质实例的属性（可能还需要设置needsUpdate）即可更改材质属性。我已为我的问题添加了一个更新。你能告诉我我的方法是否正确吗？在f1方法中，你不需要创建新材质，只需将

map

参数设置为

texture

。例如，

child.material.map=texture

。您也不需要更新缓冲区或UV。如果您创建了一个JSFIDLE，那么帮助您会容易得多