为什么Three.js的ColladaLoader.js不能加载我的文件?

时间:2018-02-14 21:57:39

标签: javascript three.js xmlhttprequest collada

所以,我正在尝试使用three.js,并且我正在尝试加载我从Ark Survival Evolved(Raptor.dae)中找到并下载的.dae文件。

我拼凑了一个html页面,用猛禽文件,两盏灯和一个地板创建一个webgl场景;我拼凑了一个烧瓶服务器来提供html和资产(直接从Windows资源管理器打开html会导致交叉来源错误,我无法弄清楚如何修复,所以我创建了Web服务器。)

我知道一切正常,直到它试图加载这个特定的文件,因为我可以得到three.js附带的演示精灵来正确提供。

这是加载raptor文件的代码部分。

var raptor
// loading manager
var loadingManager = new THREE.LoadingManager( function() {
    scene.add( raptor );
} );
// collada
var loader = new THREE.ColladaLoader( loadingManager );
loader.load( './static/models/Raptor/Raptor.dae', function ( collada ) {
    raptor = collada.scene;
    raptor.scale.set(0.1,0.1,0.1);
} );
loader.setCrossOrigin( '' );

这是我得到的错误。

Navigated to http://127.0.0.1:5000/raptor
THREE.WebGLRenderer 89
THREE.ColladaLoader: DOMParser: 4.136962890625ms
XHR finished loading: GET "http://127.0.0.1:5000/static/models/Raptor/Raptor.dae".
    load @ three.js:30874
    load @ ColladaLoader.js:25
    (anonymous) @ raptor:47
THREE.ColladaLoader: File version 1.4.1
THREE.ColladaLoader: Parse: 0.06298828125ms
THREE.ColladaLoader: Build: 0.06689453125ms
Uncaught TypeError: Cannot read property 'childNodes' of undefined
    at getElementsByTagName (ColladaLoader.js:62)
    at parseScene (ColladaLoader.js:3333)
    at THREE.ColladaLoader.parse (ColladaLoader.js:3463)
    at Object.onLoad (ColladaLoader.js:27)
    at XMLHttpRequest.<anonymous> (three.js:30794)
getElementsByTagName @ ColladaLoader.js:62
parseScene @ ColladaLoader.js:3333
parse @ ColladaLoader.js:3463
(anonymous) @ ColladaLoader.js:27
(anonymous) @ three.js:30794
XMLHttpRequest.send (async)
    load @ three.js:30874
    load @ ColladaLoader.js:25
    (anonymous) @ raptor:47

这是指向错误中提到的两个文件的链接。

three.js

ColladaLoader.js

three.js存储库中的

elf.dae

Google云端硬盘

Raptor.dae

我对这个文件和elf文件之间的区别感到茫然。我已经在Notepad ++中打开并阅读它们,但我还没弄清楚导致挂起的原因究竟是什么。

非常感谢任何帮助或指导。

2 个答案:

答案 0 :(得分:0)

你的COLLADA模型在Blender中正确加载,所以我认为这是THREE.ColladaLoader中的一个错误。您可能希望在three.js存储库中提交包含此信息的问题。

与此同时,使用a blender exporter转换为glTF会使用THREE.GLTFLoader提供在three.js中有效的结果。

glTF file in Google Drive

预览:https://gltf-viewer.donmccurdy.com/

结果:

screenshot of raptor model

答案 1 :(得分:0)

在脚本中原来是bug。它不是完全正确地解析xml数据。它将最顶部的骨骼设置为“ ID8”,而不是“ ID9”。 “ ID8”指向视觉场景。