Модель Collada показывает черным в Three.js

Я пытаюсь выяснить использование Three.js. У меня есть модель Collada в файле dae, и на ней отображается страница Three.js. Однако модель выглядит черным без видимых краев. У меня есть несколько источников света на сцене и небольшой красный куб, чтобы показать, действуют ли они. Они влияют на куб, но не на объект Collada.Модель Collada показывает черным в Three.js

Вот 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 Планета Земля, объект выглядит более или менее одинаковым - никаких видимых границ или чего-то еще, только цветной формы.

Я нашел много страниц, описывающих эту проблему черноты, но они обычно имеют отношение к текстурам и другим вещам.

Буду рад, если кто-то поможет. Я уверен, что я сделал что-то не так ...

источник

2015-03-20 nokul

Поскольку у вас такая же проблема в 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); 
});

источник

2015-03-21 02:57:44 aarman

Другие модели (например, текстуры) для модели afaik отсутствуют. Хотя я не знаю, что вы подразумеваете под «картами». Я попытался установить новый материал по-разному, но это не повлияло. – nokul

@nokul Вы когда-нибудь решали это? – user2061057

Модель Collada показывает черным в Three.js

ответ

Смежные вопросы