Javascript 将模型加载到场景中

我在blender中创建了一个简单的模型，然后将其导出为json格式，如下所示：

{
    "metadata": {
        "version": 4.4,
        "type": "Object",
        "generator": "Object3D.toJSON"
    },
    "geometries": [
        {
            "uuid": "A46CC9F4-2709-41D0-98E7-D07FF9DC2890",
            "type": "BufferGeometry",
            "data": {
                "attributes": {
                    "position": {
                        "itemSize": 3,
                        "type": "Float32Array",
                        "array": [0.686574,-0.102986,-1.89577,-0.686574,-0.102986,1.89577,-0.686573,-0.102986,-1.89577,-0.686574,0.102986,-1.89577,0.686573,0.102986,1.89577,0.686574,0.102986,-1.89577,0.686574,0.102986,-1.89577,0.686574,-0.102986,1.89577,0.686574,-0.102986,-1.89577,0.686573,0.102986,1.89577,-0.686574,-0.102986,1.89577,0.686574,-0.102986,1.89577,-0.686574,-0.102986,1.89577,-0.686574,0.102986,-1.89577,-0.686573,-0.102986,-1.89577,0.686574,-0.102986,-1.89577,-0.686574,0.102986,-1.89577,0.686574,0.102986,-1.89577,0.686574,-0.102986,-1.89577,0.686574,-0.102986,1.89577,-0.686574,-0.102986,1.89577,-0.686574,0.102986,-1.89577,-0.686574,0.102986,1.89577,0.686573,0.102986,1.89577,0.686574,0.102986,-1.89577,0.686573,0.102986,1.89577,0.686574,-0.102986,1.89577,0.686573,0.102986,1.89577,-0.686574,0.102986,1.89577,-0.686574,-0.102986,1.89577,-0.686574,-0.102986,1.89577,-0.686574,0.102986,1.89577,-0.686574,0.102986,-1.89577,0.686574,-0.102986,-1.89577,-0.686573,-0.102986,-1.89577,-0.686574,0.102986,-1.89577],
                        "normalized": false
                    },
                    "normal": {
                        "itemSize": 3,
                        "type": "Float32Array",
                        "array": [0,-1,0,0,-1,0,0,-1,0,0,1,0,0,1,0,0,1,0,1,-0.000001,0,1,-0.000001,0,1,-0.000001,0,0,-0.000005,1,0,-0.000005,1,0,-0.000005,1,-1,-0.000001,0,-1,-0.000001,0,-1,-0.000001,0,0.000001,0.000005,-1,0.000001,0.000005,-1,0.000001,0.000005,-1,0,-1,0,0,-1,0,0,-1,0,0,1,0,0,1,0,0,1,0,1,0.000002,0,1,0.000002,0,1,0.000002,0,-0.000001,0.000002,1,-0.000001,0.000002,1,-0.000001,0.000002,1,-1,-0.000001,0,-1,-0.000001,0,-1,-0.000001,0,0.000001,0.000003,-1,0.000001,0.000003,-1,0.000001,0.000003,-1],
                        "normalized": false
                    }
                },
                "index": {
                    "type": "Uint16Array",
                    "array": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]
                },
                "boundingSphere": {
                    "center": [0,0,0],
                    "radius": 2.018894
                }
            }
        }],
    "materials": [
        {
            "uuid": "C34E0E05-B2F6-44B9-B810-D97E70E983E3",
            "type": "MeshBasicMaterial",
            "color": 7722888,
            "depthFunc": 3,
            "depthTest": true,
            "depthWrite": true,
            "skinning": false,
            "morphTargets": false
        }],
    "object": {
        "uuid": "FD99C549-4D01-4176-8003-8994CBE8B321",
        "type": "Mesh",
        "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
        "geometry": "A46CC9F4-2709-41D0-98E7-D07FF9DC2890",
        "material": "C34E0E05-B2F6-44B9-B810-D97E70E983E3"
    }
}

然后，我遵循three.js文档，希望将我的模型加载到场景中。Html文件是：

我的前三个.js应用程序
正文{页边距：0；}
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var loader=new THREE.ObjectLoader（）；
load（“model（1.json）”，函数（obj）{
场景。添加（obj）；
},
函数（xhr）{
log（（xhr.loaded/xhr.total*100）+'%loaded'）；
},
函数（xhr）{
console.error（‘发生了错误’）；
}
);
var render=函数（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
};
render（）；

我花了一些时间，但我发现了问题：相机处于0,0,0，这是在对象内部。只需添加

camera.position.z=5并且您应该看到它。还添加
显示：块更改为画布样式规则，这样您就可以摆脱滚动条。我得到
100%加载
btw，模型文件与html文件位于同一文件夹中。谢谢，它工作正常。仍然有一个错误
THREE.webgl84
。我应该忽略它吗？这不是一个错误。这不是一个错误，它只是显示您正在使用的ThreeJS的哪个版本。这只是一个控制台日志，你可以忽略它。