Question

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

问题是： 如何使用纹理材质完成相同的处理，所以如果我点击按钮＆＃34; Texture＆＃34;，材料从颜色变为我希望在该对象上的纹理材质？有可能吗？

以下是按钮的工作方式：

<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：＆＃39; map＆＃39;参数未定义。我的物体的材料变成了白色。

以下是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; AND child.geometry.uvsNeedUpdate = true; 是必要的。

如何在点击

1 个答案: