Collada model shows in black in Three.js

Question

I'm trying to figure out the use of Three.js. I have a Collada model in a dae file and a Three.js page do display it. However, the model appears in black without any visible edges. I have several light sources in the scene and a small red cube to show if they take effect. They have effect on the cube, but not on the Collada object.

Here's the html page:

<html> 
<head> 
<title>Test 3</title> 
<style> 
body { margin: 0; } 
canvas { width: 100%; height: 100% } 
</style> 
</head> 
<body> 
<script src="three.min.js"></script> 
<script src="three.js/examples/js/loaders/ColladaLoader.js"></script>
<script src="three.js/examples/js/controls/OrbitControls.js"></script>
<script> 
// preparations
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 11000 ); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );

// Test-Cube
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xff0000 } ); 
var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
scene.add( cube );      

// Lights - and spheres to show their position
var light = new THREE.PointLight(0xfffff3, 0.8);
light.position.set(-100,200,100);
scene.add(light);    
var sphereSize = 1; 
var pointLightHelper = new THREE.PointLightHelper( light, sphereSize ); 
scene.add( pointLightHelper );    
var light2 = new THREE.PointLight(0xd7f0ff, 0.2);
light2.position.set(200,200,100);
scene.add(light2);    
var pointLightHelper2 = new THREE.PointLightHelper( light2, sphereSize );     scene.add( pointLightHelper2 );    
var light3 = new THREE.PointLight(0xFFFFFF, 0.5);
light3.position.set(150,200,-100);
scene.add(light3);    
var pointLightHelper3 = new THREE.PointLightHelper( light3, sphereSize ); 
scene.add( pointLightHelper3 );

// a grid
var gridXZ = new THREE.GridHelper(100, 10);
gridXZ.setColors( new THREE.Color(0x8f8f8f), new THREE.Color(0x8f8f8f) );
gridXZ.position.set(0,0,0 );
scene.add(gridXZ); 

camera.position.z = 200;

// skybox
var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
scene.add(skyBox);

// load Collada model
var dae;
var loader = new THREE.ColladaLoader(); 
loader.options.convertUpAxis = true;
loader.load("file://testfile.dae", 
    function ( collada ) { 
        dae = collada.scene;
        scene.add(dae);
    }); 

function render() { 
    requestAnimationFrame( render ); 
    cube.rotation.x += 0.01; 
    cube.rotation.y += 0.01; 
    controls.update();
    renderer.render( scene, camera ); 
} 
render();

</script> 
</body> 
</html>

And here is the Collada model:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
    <asset>
        <contributor>
            <authoring_tool>...</authoring_tool>
        </contributor>
        <created>2015-03-19T07:37:03.331</created>
        <modified>2015-03-19T07:37:03.331</modified>
        <unit meter="1.0" name="meters"/>
        <up_axis>Z_UP</up_axis>
    </asset>
    <library_materials>
        <material id="default_ai_0.2_sh_0.2_tr_0.0_dc_r_0.8_g_0.8_b_0.8_sc_r_1.0_g_1.0_b_1.0_ec_r_0.0_g_0.0_b_0_mat">
            <instance_effect url="#default_ai_0.2_sh_0.2_tr_0.0_dc_r_0.8_g_0.8_b_0.8_sc_r_1.0_g_1.0_b_1.0_ec_r_0.0_g_0.0_b_0_eff"/>
        </material>
    </library_materials>
    <library_effects>
        <effect id="default_ai_0.2_sh_0.2_tr_0.0_dc_r_0.8_g_0.8_b_0.8_sc_r_1.0_g_1.0_b_1.0_ec_r_0.0_g_0.0_b_0_eff">
            <profile_COMMON>
                <technique sid="COMMON">
                    <lambert>
                        <emission>
                            <color>0.0 0.0 0.0 1.0</color>
                        </emission>
                        <diffuse>
                            <color>0.8 0.8 0.8 1.0</color>
                        </diffuse>
                        <reflective>
                            <color>1.0 1.0 1.0 1.0</color>
                        </reflective>
                        <reflectivity>
                            <float>0.2</float>
                        </reflectivity>
                        <transparency>
                            <float>0.0</float>
                        </transparency>
                    </lambert>
                </technique>
                <extra>
                    <technique profile="GOOGLEEARTH">
                        <double_sided>0</double_sided>
                    </technique>
                </extra>
            </profile_COMMON>
        </effect>
    </library_effects>
    <library_geometries>
        <geometry id="geometry0">
            <mesh>
                <source id="geometry0-position">
                    <float_array id="geometry0-position-array" count="30">-4.979 -4.316 3.806 0.0 0.0 3.806 0.0 0.0 0.0 -4.979 -4.316 0.0 7.316 -8.959 3.806 7.316 -8.959 0.0 6.112 -9.987 3.806 6.112 -9.987 0.0 2.318 -13.233 3.806 2.318 -13.233 0.0</float_array>
                    <technique_common>
                        <accessor count="10" source="#geometry0-position-array" stride="3">
                            <param name="X" type="float"/>
                            <param name="Y" type="float"/>
                            <param name="Z" type="float"/>
                        </accessor>
                    </technique_common>
                </source>
                <source id="geometry0-texCoords">
                    <float_array id="geometry0-texCoords-array" count="0"></float_array>
                    <technique_common>
                        <accessor count="0" source="#geometry0-texCoords-array" stride="2">
                            <param name="S" type="float"/>
                            <param name="T" type="float"/>
                        </accessor>
                    </technique_common>
                </source>
                <vertices id="geometry0-vertex">
                    <input semantic="POSITION" source="#geometry0-position"/>
                </vertices>
                <triangles count="16" material="default_ai_0.2_sh_0.2_tr_0.0_dc_r_0.8_g_0.8_b_0.8_sc_r_1.0_g_1.0_b_1.0_ec_r_0.0_g_0.0_b_0_tri">
                    <input offset="0" semantic="VERTEX" source="#geometry0-vertex"/>
                    <p>7 9 3 7 3 2 7 2 5 4 6 7 4 7 5 6 8 9 6 9 7 8 0 3 8 3 9 0 1 2 0 2 3 1 0 8 1 8 6 1 6 4 1 4 5 1 5 2</p>
                </triangles>
            </mesh>
        </geometry>
    </library_geometries>
    <library_visual_scenes>
        <visual_scene id="myobject">
            <node>
                <instance_geometry url="#geometry0">
                    <bind_material>
                        <technique_common>
                            <instance_material symbol="default_ai_0.2_sh_0.2_tr_0.0_dc_r_0.8_g_0.8_b_0.8_sc_r_1.0_g_1.0_b_1.0_ec_r_0.0_g_0.0_b_0_tri" target="#default_ai_0.2_sh_0.2_tr_0.0_dc_r_0.8_g_0.8_b_0.8_sc_r_1.0_g_1.0_b_1.0_ec_r_0.0_g_0.0_b_0_mat"/>
                        </technique_common>
                    </bind_material>
                </instance_geometry>
            </node>
        </visual_scene>
    </library_visual_scenes>
    <scene>
        <instance_visual_scene url="#myobject"/>
    </scene>
</COLLADA>

Now, the model is loaded and displayed fine - except that it's black and does not reflect any light. I have tried a lot to change materials and colors and all parametersI could find, but none helped. When I import the Collada data in Google Earth, the object looks more or less the same - no visible edges or anything, just a colored shape.

I found many pages describing this blackness problem, but they usually have to do with textures and other stuff.

I'd be happy if someone could help. I'm sure I did something wrong...

Arman Arman · Accepted Answer · 2015-03-21T02:57:44

Since you get the same problem in Google Earth, it seems the problem is in your model not the loader. Make sure the collada file's maps and other external resources are also saved and are accessible by three.js.

Another way to solve the problem which might be hard sometimes but potentially gives you nice results is recreating the material inside your code. you might want to do it this way:

loader.load("file://testfile.dae", 
function ( collada ) { 
    dae = collada.scene;
    my_material = new THREE.MeshPhongMaterial() //or any other material
    //set map, shininess, etc. if needed
    dae.material = my_material
    scene.add(dae);
});

Collada model shows in black in Three.js

1 Answers