在Three.js中使用帶有ShaderMaterials的Collada模型時顯示爲黑色的模型

Question

我嘗試將（從Blender導出的）collada文件加載到three.js場景中，然後用ShaderMaterial替換材質。

由於該collada文件中只有一個對象，因此它位於collada.scene.children [0]，因此我嘗試將材質屬性更改爲新創建的對象。我可以很容易地用線框或紋理StandardPhongMaterial替換材質，但只要添加了ShaderMaterial，模型只會以黑色顯示，不會有任何光照或紋理。

材料設置如下：

materials[0] = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); 

var shader = THREE.ShaderUtils.lib[ "normal" ]; 
var uniforms = THREE.UniformsUtils.clone(shader.uniforms); 
uniforms[ "tDiffuse" ].texture = THREE.ImageUtils.loadTexture("color.png"); 
uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture("normal.png"); 
uniforms[ "tSpecular" ].texture = THREE.ImageUtils.loadTexture("spec.png"); 
uniforms[ "enableDiffuse" ].value = true; 
uniforms[ "enableSpecular" ].value = true; 

materials[1] = new THREE.ShaderMaterial({ 
    uniforms: uniforms, 
    vertexShader: shader.vertexShader, 
    fragmentShader: shader.fragmentShader, 
    lights: true 
}); 

var basicTexture = THREE.ImageUtils.loadTexture("color.png ") 
materials[2] = new THREE.MeshPhongMaterial({ map: basicTexture }); 

型號的負載我將它添加到現場之前添加ShaderMaterial的模式，使所有必要的屬性可供選擇：

loader.load('model.dae', function(collada) { 
    model = collada.scene; 
    model.scale.x = model.scale.y = model.scale.z = 50; 
    model.rotation.y = 180; 
    model.updateMatrix(); 
    model.children[0].material = materials[1]; 
    model.children[0].geometry.computeTangents(); 
    scene.add(model); 
}); 

的完整的源代碼可在這裏找到：http://rainbowrangers.de/normalmap/

我該如何解決這個問題？

Answer 1

您正在使用舊格式。它應該是

制服[「tDiffuse」] .value = THREE.ImageUtils.loadTexture（「color.png」）;

參見遷移後在three.js所維基：https://github.com/mrdoob/three.js/wiki/Migration

質地均勻變化：現在紋理單元被自動分配，紋理對象進入Value屬性，而不是一個紋理{類型：「T」，值：0，texture：map} => {type：「t」，value：map}