三JS - 未捕獲TypeError：無法讀取未定義的屬性'長度'在THREE.JSONLoader.parse

我想只渲染攪拌機導出的JSON（導出爲在三個JS中使用）。我這樣做如下。三JS - 未捕獲TypeError：無法讀取未定義的屬性'長度'在THREE.JSONLoader.parse

<!DOCTYPE html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Three.js JSON Loader Demo</title> 
    <script type="text/javascript" src="three.min.js"></script> 
    <script type="text/javascript"> 

    var renderer; // A three.js WebGL or Canvas renderer. 
    var scene;  // The 3D scene that will be rendered, containing the model. 
    var camera; // The camera that takes the picture of the scene. 
    var light;  // A light shining from the direction of the camera. 

    var model; // The three.js object that represents the model. 

    var rotateX = 0; // rotation of model about the x-axis 
    var rotateY = 0; // rotation of model about the y-axis 

    function modelLoadedCallback(geometry, materials) { 

     var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 

     /* Determine the ranges of x, y, and z in the vertices of the geometry. */ 

     var xmin = Infinity; 
     var xmax = -Infinity; 
     var ymin = Infinity; 
     var ymax = -Infinity; 
     var zmin = Infinity; 
     var zmax = -Infinity; 

     for (var i = 0; i < geometry.vertices.length; i++) { 
      var v = geometry.vertices[i]; 
      if (v.x < xmin) 
       xmin = v.x; 
      else if (v.x > xmax) 
       xmax = v.x; 
      if (v.y < ymin) 
       ymin = v.y; 
      else if (v.y > ymax) 
       ymax = v.y; 
      if (v.z < zmin) 
       zmin = v.z; 
      else if (v.z > zmax) 
       zmax = v.z; 
     } 

     /* translate the center of the object to the origin */ 
     var centerX = (xmin+xmax)/2; 
     var centerY = (ymin+ymax)/2; 
     var centerZ = (zmin+zmax)/2; 
     var max = Math.max(centerX - xmin, xmax - centerX); 
     max = Math.max(max, Math.max(centerY - ymin, ymax - centerY)); 
     max = Math.max(max, Math.max(centerZ - zmin, zmax - centerZ)); 
     var scale = 10/max; 
     object.position.set(-centerX, -centerY, -centerZ); 
     console.log("Loading finished, scaling object by " + scale); 
     console.log("Center at (" + centerX + ", " + centerY + ", " + centerZ + ")"); 

     /* Create the wrapper, model, to scale and rotate the object. */ 

     model = new THREE.Object3D(); 
     model.add(object); 
     model.scale.set(scale,scale,scale); 
     rotateX = rotateY = 0; 
     scene.add(model); 
     render(); 

    } 

    function render() { 
     renderer.render(scene, camera); 
    } 


    function init() { 
     try { 
      var theCanvas = document.getElementById("cnvs"); 

      scene = new THREE.Scene(); 
      camera = new THREE.PerspectiveCamera(50, theCanvas.width/theCanvas.height, 0.1, 100); 
      camera.position.z = 30; 

      light = new THREE.DirectionalLight(); 
      light.position.set(0,0,1); 
      renderer = new THREE.WebGLRenderer({ 
        canvas: theCanvas, 
        antialias: true 
        }); 

      scene.add(light); 
      render(); 

      var loader = new THREE.JSONLoader(); 
      loader.load("DummyBox.js", modelLoadedCallback); 

     } 
     catch (e) { 
      document.getElementById("message").innerHTML = "Sorry, an error occurred: " + e; 
     } 
    } 

    </script> 
    </head> 
    <body onload="init()" bgcolor="#CCC"> 

    <noscript> 
    <p style="color: #A00; font-weight: bold">Sorry, but this page requires JavaScript!</p> 
    </noscript> 

    <div style="float:left"> 
    <canvas width=350 height=400 id="cnvs" style="background-color:black"></canvas> 
    </div> 

    </body> 
    </html>

的DummyBox.js內容是

{ 
    "metadata":{ 
     "generator":"io_three", 
     "type":"BufferGeometry", 
     "normal":36, 
     "version":3, 
     "position":36 
    }, 
    "data":{ 
     "index":{ 
      "type":"Uint16Array", 
      "itemSize":1, 
      "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] 
     }, 
     "attributes":{ 
      "position":{ 
       "type":"Float32Array", 
       "itemSize":3, 
       "array":[1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,0.999999,1,1,1,1,-1,1,1,-1,1,-1,1,1,-1,-1,0.999999,1,1,-1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,0.999999,1,1,1,1,-1,0.999999,1,1,1,-1,1,0.999999,1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,1,1,-1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1] 
      }, 
      "normal":{ 
       "type":"Float32Array", 
       "itemSize":3, 
       "array":[-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1] 
      } 
     } 
    } 
}

我是新來的三個js和無法弄清楚是什麼問題。有沒有任何網站可以通過..導出的JSON文件中是否有任何問題。

來源

2017-04-10 Harish_N

你使用的是哪一個版本的THREE.js？ – TheJim01

從https://threejs.org/build/three.min.js得到最新版本 –

我想我應該使用BufferGeometryLoader。但得到這個錯誤，不能找到構造函數THREE.BufferGeometryLoader –

json腳本看起來沒問題。如果更換裝載機類（如已通過@ TheJim01提到）

var loader = new THREE.BufferGeometryLoader(); //new THREE.JSONLoader();

和處理這樣的幾何形狀在modelLoadedCallback功能（more here）：

var geometry = new THREE.Geometry().fromBufferGeometry(geometry);

你將經歷無錯誤。

PS。材料參數modelLoadedCallback函數未定義。你可以這樣定義：

var materials = new THREE.MeshLambertMaterial({color:0xff0000});

來源

2017-04-10 21:51:40 cameraman

我在'var loader = new THREE.BufferGeometryLoader（）'錯誤' 錯誤是：構造函數BufferGeometryLoader不可用。 –

下載並使用最新的threejs縮小庫[這裏]（https://threejs.org/build/three.min.js） – cameraman

三JS - 未捕獲TypeError：無法讀取未定義的屬性'長度'在THREE.JSONLoader.parse

回答

相關問題