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

【问题标题】：Three.js - Adding JSON file type to SceneLoaderThree.js - 将 JSON 文件类型添加到 SceneLoader
【发布时间】：2014-12-26 10:13:32
【问题描述】：

以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，但没有示例说明如何这样做。

谢谢！

【问题讨论】：

标签： json three.js progress loader

【解决方案1】：

其实我觉得 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 文件。

【讨论】：