ThreeJS無法加載JSON檔案

第一，我已經讀過this question沒有幫助ThreeJS無法加載JSON檔案

如何我做的：首先，我從C4D導出模型.ojb。然後我導入OBJ到www.trheejs /編輯

我填補所有空白

enter image description here

然後從樹我選擇我的對象，並將其導出到Threejs對象，它保存一個以.json文件

我的代碼

<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 kiss = new THREE.Object3D(), loader = new THREE.JSONLoader(true); 
loader.load("brikk2.json", function (geometry, materials) { 
    var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0xff0000, ambient: 0xff0000 })); 
    scene.add(mesh); 
}); 
      var render = function() { 
     requestAnimationFrame(render); 
     renderer.render(scene, camera); 
    }; 
    render(); 
</script>

當我運行有論文的錯誤消息

THREE.WebGLRenderer 67        three.js:20806 
THREE.WebGLRenderer: elementindex as unsigned integer not supported.   three.js:26942 
XHR finished loading: "http://xxxxxx.xx/tst/mrdoob-three2/brikk2.json".  three.js:12018 
    THREE.JSONLoader.loadAjaxJSON     three.js:12018 
    THREE.JSONLoader.load       three.js:11942 
    load           test.html:23 
    (anonymous function)       test.html:28 
Uncaught TypeError: Cannot read property 'length' of undefined    three.js:12087 
    parseModel              three.js:12087 
    THREE.JSONLoader.parse           three.js:12028 
    xhr.onreadystatechange           three.js:11969

JSON的我加載JSON文件的

{ 
"metadata": { 
    "version": 4.3, 
    "type": "Object", 
    "generator": "ObjectExporter" 
}, 
"geometries": [ 
    { 
     "uuid": "213E28EF-E388-46FE-AED3-54695667E086", 
     "name": "brikkG", 
     "type": "Geometry", 
     "data": { 
      "vertices": [0.036304,-0.016031,-0.027174,0.036304,0....... 


     ........ 232,1228,1139,1141,1140,1] 
     } 
    }], 
"materials": [ 
    { 
     "uuid": "F74C77E4-8371-41BC-85CA-31FC96916CC6", 
     "name": "lego", 
     "type": "MeshPhongMaterial", 
     "color": 16721408, 
     "ambient": 16777215, 
     "emissive": 0, 
     "specular": 16777215, 
     "shininess": 30, 
     "opacity": 1, 
     "transparent": false, 
     "wireframe": false 
    }], 
"object": { 
    "uuid": "3BAAB8CA-1EB7-464A-8C6D-FC4BBB3C63C6", 
    "name": "BrikkM", 
    "type": "Mesh", 
    "geometry": "213E28EF-E388-46FE-AED3-54695667E086", 
    "material": "F74C77E4-8371-41BC-85CA-31FC96916CC6", 
    "matrix": [1000,0,0,0,0,1000,0,0,0,0,1000,0,0,0,0,1] 
     } 
    }

結構

enter image description here

基本上我已經嘗試了所有我已閱讀有關導入原生JSON到ThreeJS，我試圖文件從treejs/editor或clara.io仍然有相同的錯誤信息，我不知道了，我花了3天試圖解決這個問題。

如果我嘗試創建幾何形狀像CubeGeometry它使沒有問題，但一旦我嘗試用本地JSON，沒有什麼工作了

有人能幫忙嗎？

來源

2014-05-25 Lefty

好吧，我在這裏找到了答案：http://helloenjoy.com/2013/from-unity-to-three-js/

原生JSON代碼是完美的，它只是沒有被故意要與JSONLoader但ObjectLoader（加載像我一樣我的一個不OBJLoader不匹配我的實驗）。 JSONLoader是加載json的意思，但是具有不同的格式/結構。 ObjectLoader的意思是加載原生格式，也是用json編寫的，但是使用本地結構/格式。

所以使用

var loader = new THREE.ObjectLoader(); 
      loader.load('brikk2.json', function (object) { 

         scene.add(object); 

      });

，它的工作

完整的示例代碼

<body> 
    <script src="build/three.min.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.setClearColor(0xffffff, 1); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    var ambient = new THREE.AmbientLight(0x101030); 
      scene.add(ambient); 
      var directionalLight = new THREE.DirectionalLight(0xffeedd); 
      directionalLight.position.set(0, 0, 1); 
      scene.add(directionalLight); 
      var loader = new THREE.ObjectLoader(); 
      loader.load('brikk2.js', function (object) { 
         scene.add(object); 
      }); 
     camera.position.z = 5; 
     var render = function() { 
      requestAnimationFrame(render); 
      renderer.render(scene, camera); 
     }; 
     render(); 
    </script> 
</body>

編輯

頂部的代碼我在上面的問題表明是正確的，但它用於幾何加載

loader = new THREE.JSONLoader(); 
loader.load('ugeometry.json', function (geometry) { 
      mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('environment.jpg', new THREE.SphericalReflectionMapping()), overdraw: 0.5 })); 
    scene.add(mesh);

所以回顧一下。

如果從三分球/編輯或Clara.io保存幾何使用JSONLoader，如果你保存爲對象中使用ObjectLoader，如果你保存爲場景，他們應該是SceneLoader（未經證實）

來源

2014-05-25 17:46:59 Lefty

這是有幫助的。你能發佈你的html嗎？ –

ThreeJS無法加載JSON檔案

回答

相關問題