Model showing up black when using Collada Models with ShaderMaterials in Three.js

Question

I tried to load a collada file (exported from Blender) into a three.js scene and then replace the material with a ShaderMaterial.

Since there is only one object in this collada file it is located at collada.scene.children[0] so I tried to change the material property to a newly created one. I can easily replace the material with a wireframe or even a textured StandardPhongMaterial, but as soon as I add a ShaderMaterial the model only shows up in black without any lighting or texturing.

The material setup is as follows:

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 });

On Model load I add the ShaderMaterial to the model before adding it to the scene so that all necessary attributes are available:

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);
});

The full source code is available here: http://rainbowrangers.de/normalmap/

How do I fix this?

Answer 1

You are using an old format. It should be

uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "color.png" );

See the Migration post at the three.js Wiki: https://github.com/mrdoob/three.js/wiki/Migration

texture uniform changes: texture units are now assigned automatically, texture object goes to value property instead of texture one { type: "t", value: 0, texture: map } => { type: "t", value: map }