【发布时间】：2015-05-23 21:19:10
【问题描述】：
我正在尝试弄清楚 Three.js 的用途。我在 dae 文件中有一个 Collada 模型，并且 Three.js 页面确实显示了它。但是，模型显示为黑色，没有任何可见边缘。我在场景中有几个光源和一个小的红色立方体来显示它们是否生效。它们对立方体有影响，但对 Collada 对象没有影响。
这是html页面：
<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>
这是 Collada 模型：
<?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>
现在，模型已加载并正常显示 - 只是它是黑色的并且不反射任何光线。我已经尝试了很多来改变材料和颜色以及我能找到的所有参数，但没有任何帮助。当我在 Google 地球中导入 Collada 数据时，该对象看起来或多或少相同 - 没有可见的边缘或任何东西，只有一个彩色的形状。
我发现很多页面描述了这个黑度问题，但它们通常与纹理和其他东西有关。
如果有人可以提供帮助，我会很高兴。我确定我做错了什么......
【问题讨论】：
标签： javascript three.js collada