Three.js - 将JSON文件类型添加到SceneLoader

时间:2014-10-30 11:31:17

标签: json three.js progress loader

http://threejs.org/examples/#webgl_loader_scene为例,我试图添加从Blender导出的js文件。该文件使用JSONLoader正确加载,但现在我希望它与其他文件结合使用并具有进度条。

            $( "progress" ).style.display = "block";

            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

            var loader = new THREE.SceneLoader();

            loader.addGeometryHandler( "binary", THREE.BinaryLoader );
            loader.addGeometryHandler( "ctm", THREE.CTMLoader );
            loader.addGeometryHandler( "vtk", THREE.VTKLoader );
            loader.addGeometryHandler( "stl", THREE.STLLoader );

            loader.addHierarchyHandler( "obj", THREE.OBJLoader );
            loader.addHierarchyHandler( "dae", THREE.ColladaLoader );
            loader.addHierarchyHandler( "utf8", THREE.UTF8Loader );
            loader.addHierarchyHandler( "json", THREE.JSONLoader );

            loader.callbackProgress = callbackProgress;

            loader.load( "scenes/test_scene.js", callbackFinished );

我添加了json HierarchyHandler并包含了JSONLoader.js文件。

loader.addHierarchyHandler( "json", THREE.JSONLoader );

然后我将它添加到"对象"下的test_scene.js中。其他dae和obj文件的位置。

"tree" : {
    "type": "json",
    "url" : "models/json/tree.js",
    "position" : [ -43, -10, 27 ],
    "rotation" : [ -1.57, 0, 0 ],
    "scale"    : [ 5, 5, 5 ],
    "visible"  : true
            },

控制台记录它读取为树引用的纹理文件但从未完成 - 进度条保持在99%。

但我收到的错误是:

Uncaught TypeError: Cannot read property 'fromArray' of undefined     SceneLoader.js:554

有谁知道为什么会发生这种情况或者我做错了什么? three.js示例加载除json之外的所有类型的文件。可能有这个原因,还是我只是遗漏了什么?我已经读过要折旧的SceneLoader,我应该考虑使用ObjectLoader但是没有如何这样做的例子。

谢谢!

1 个答案:

答案 0 :(得分:0)

实际上,我认为Three.js附带的SceneLoader示例包含一个JSON。如果我没有弄错的话,Scene Loader实际上能够加载JSON文件本身,而不需要任何HierarchyHandler。

我实际上认为您添加JSONLoader.js文件的尝试并未真正链接任何内容。

我看了一下这个例子:webgl_loader_scene.html。如果打开相关场景(test_scene.js),您可以在导入之间找到实际的JSON几何体:

"embeds": {

    "cube_fvc": {

        "metadata" : {
            "formatVersion" : 3
        },

        "scale" : 1.0,

        "materials": [{
            "DbgColor" : 15658734,
            "DbgIndex" : 0,
            "DbgName" : "Material",
            "colorAmbient" : [0.0, 0.0, 0.0],
            "colorDiffuse" : [0.8, 0.8, 0.8],
            "colorSpecular" : [0.5, 0.5, 0.5],
            "specularCoef" : 50,
            "transparency" : 1.0,
            "vertexColors" : true
        }],

        "vertices": [1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,0.999999,1.000000,1.000001,-1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000],

        "morphTargets": [],

        "normals": [],

        "colors": [16777215,16769421,16769424,8454135,15195931,7299839,16586715,16711687,1056014,6029475,13762484,9044089,7962349,6772991,16774622,4144383,11973887,1966063,1056285,9081232,13696943,5002581],

        "uvs": [[]],

        "faces": [131,0,1,2,3,0,0,1,2,3,131,4,7,6,5,0,4,5,6,7,131,0,4,5,1,0,0,8,9,10,131,1,5,6,2,0,0,11,12,13,131,2,6,7,3,0,14,15,16,17,131,4,0,3,7,0,18,19,20,21]

    }

},

所以我认为您需要做的就是使用SceneLoader所需的相同语法来引用JSON文件。