Collada模型在Three.js中显示为黑色
Collada model shows in black in Three.js
我正试图弄清楚Three.js的用法。我在dae文件中有一个Collada模型，Three.jss页面确实显示了它。但是，模型显示为黑色，没有任何可见的边缘。我在场景中有几个光源和一个红色的小立方体来显示它们是否生效。它们对多维数据集有影响，但对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>
现在，模型被加载并显示得很好，只是它是黑色的，不反射任何光线。我试了很多次来改变材料、颜色和我能找到的所有参数，但都无济于事。当我在谷歌地球中导入Collada数据时，对象看起来或多或少是一样的——没有可见的边或任何东西，只是一个彩色的形状。
我发现很多页面都在描述这种黑度问题，但它们通常与纹理和其他东西有关。
如果有人能帮忙，我会很高兴的。我确信我做错了什么。。。
由于您在Google Earth中遇到了同样的问题，所以问题似乎出在您的模型中，而不是加载程序中。确保collada文件的地图和其他外部资源也已保存，并且可以通过three.js.访问
解决这个问题的另一种方法有时可能很难，但可能会给你带来好的结果，那就是在代码中重新创建材料。你可能想这样做：
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);
});
相关文章：
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示，在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- Three.js-Skybox显示黑色
- Collada模型在Three.js中显示为黑色
- 推送提交后，如果输入字段为黑色，则显示验证检查或以红色字母显示警告
- 带有黑色禁用背景的引导模态显示
- 阴影框(图片库插件）仅显示黑色窗口
- Three.js:如何知道是否所有纹理都已完全加载并显示(并且没有黑色矩形残留）
- 使用CanvasRenderer的three.js纹理，但使用WebGLRenderer显示为黑色
- PHP图片上传:透明度显示为黑色
- Three.js Collada模型显示黑色，没有灯光，直到鼠标移动
- 在图片css的右上角显示带有黑色覆盖的图标
