javascript - 如何在单击时更改使用 JSONLoader 创建的对象的纹理 Material

Question

我正在使用 Three.js，在其中创建了一个对象。我创建了一些按钮，并且可以通过单击专用按钮来更改对象的 Material 颜色。

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

以下是按钮的工作方式:

<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>

这就是我使用 JSONLoader 创建对象的方式:

var loader = new THREE.JSONLoader();
loader.load('models/engine_s.js',  function( geometry ) {
  mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {map: false, color: 0x2f3a4c}) );
  //mesh.scale.set( 10, 10, 10 );
  mesh.rotation.x = -Math.PI / 4;
  mesh.position.y = 0;
  group.add( mesh );
  scene.add( group );
});

我看到了一些类似于以下行的解决方案:

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()函数:

<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>

我收到以下警告消息THREE.Material:“map”参数未定义。我的物体的 Material 正在变成白色。

这是 JSFiddle 上的代码

Answer 1

这个解决了我的问题:

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; 是必要的。