如何用Three.js中的ShaderMaterial替換Collada導入的紋理？

Question

有沒有辦法在Three.js庫中通過Collada加載器導入的簡單3D模型中替換所有紋理？

我想完成的是通過指定帶有模型材質名稱的新文件，但添加「-color」，「-normal」和「-spec」，通過ShaderMaterial將顏色，鏡面和法線貼圖應用於模型「措辭：

」brochureFrontCover「 - > 」brochureFrontCover-color.jpg「， 」brochureFrontCover-normal.jpg「， 」brochureFrontCover-spec.jpg「

如果有良好的靈魂能告訴我怎麼這麼函數應看，我會非常感激。

腳本： http://dev.printhouse.co.uk/uv-simulator/j/Brochure.js

COLLADA模型： http://dev.printhouse.co.uk/uv-simulator/m/Brochure.dae

Answer 1

我想應該是這樣的：

THREE.SceneUtils.traverseHierarchy(dae, function (child) { 

    if (child.material) { 

     var shader = THREE.ShaderUtils.lib[ "normal" ]; 
     var uniforms = THREE.UniformsUtils.clone(shader.uniforms); 

     uniforms[ "tDiffuse" ].texture = THREE.ImageUtils.loadTexture(child.material.name + "-color.jpg"); 
     uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture(child.material.name + "-normal.jpg"); 
     uniforms[ "tSpecular" ].texture = THREE.ImageUtils.loadTexture(child.material.name + "-spec.jpg"); 

     uniforms[ "enableDiffuse" ].value = true; 
     uniforms[ "enableSpecular" ].value = true; 

     child.geometry.computeTangents(); 

     child.material = new THREE.ShaderMaterial({ 
      uniforms: uniforms, 
      vertexShader: shader.vertexShader, 
      fragmentShader: shader.fragmentShader, 
      lights: true 
     }); 

    } 

}); 

This example應該是一個很好的參考，如果您需要調整制服。