我在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文件是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.ObjectLoader();
loader.load("model(1).json", function ( obj ) {
scene.add( obj );
},
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
function ( xhr ) {
console.error( 'An error happened' );
}
);
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
我试图在浏览器（firefox）中打开它，但有些出错了。我在控制台THREE.WebGLRenderer 84和NaN% loaded中有两个警告（第二个来自我的html文件）。我的场景只有黑屏，没有任何反应。怎么可能通过three.js解决我的问题并将模型作为json加载到场景中？