three.jsのJSONオブジェクトに基づいてメッシュを作成する方法

Question

WebサーバーからJSONオブジェクトを取得するのに役立つajaxリクエストがあります。

function _loadModel(filename) { 
    var request = new XMLHttpRequest(); 
    request.open("GET", filename);//open(method, url, async) 
    request.onreadystatechange = function() { 
     console.info(request.readyState +' - '+request.status); 
     if (request.readyState == 4) {//4 == finished download 
      if(request.status == 200) { //OK -> bezogen auf http Spezifikation 
       handleLoadedGeometry(filename,JSON.parse(request.responseText)); 
      } 
      else if (document.domain.length == 0 && request.status == 0){ //OK but local, no web server 
       handleLoadedGeometry(filename,JSON.parse(request.responseText)); 
      } 
      else{ 
       alert ('There was a problem loading the file :' + filename); 
       alert ('HTML error code: ' + request.status); 
      } 
     } 
    } 
    request.send();// send request to the server (used for GET) 
} 
_loadModel('http://localhost:8080/bbox?XMIN=3500060&YMIN=5392691&XMAX=3500277&YMAX=5393413') 

JSONファイル：

[{"building_nr": 5, "geometry": "{\"type\":\"Polygon\",\"coordinates\":[[[3500267.16,5392933.95,456.904],[3500259.19,5392933.01,456.904],[3500258.586,5392938.152,456.904],[3500258.02,5392942.97,456.904],[3500265.98,5392943.94,456.904],[3500266.552,5392939.097,456.904],[3500267.16,5392933.95,456.904]]]}", "polygon_typ": "BuildingGroundSurface"}, ...]

これは、1つのオブジェクトであり、私はこの配列にそれらの多くを持っています。

メッシュを作成します。 私はブラウザにこのエラーが出る終わり

//Callback funktion 
function handleLoadedGeometry(filename, model) { 

    var geom = new THREE.BufferGeometry(); 

    for (var i=0;i<10;i++) 
    { 
     var vertex = new THREE.Vector3(); 
     vertex.x = model.geometry[i].coordinates[0]; 
     vertex.y = model.geometry[i].coordinates[1]; 
     vertex.z = model.geometry[i].coordinates[2]; 
     geometry.vertices.push(vertex); 
    } 

    geom.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); 
    var material = new THREE.MeshBasicMaterial({ color: 0xff00f0 }); 
    var mesh = new THREE.Mesh(geom, material); 
    Scene.scene.add(mesh); 
} 

）（これは、関数handleLoadedGeometry内で行うことができると思う：は、プロパティを読み取ることができません「0」未定義

の

どのように私はを参照することができますJSONの中のgeometry coordinates？

Answer 1

あなたはロードされたJSONは、あなたがエラーを取得する理由

この

function handleLoadedGeometry(filename, models) { 

    for (var i=0; i<models.length; i++) 
    { 
     var model = models[i]; 
     var coordinates = model.geometry.coordinates; 
     var positions = []; 
     for (var j=0; j<coordinates.length; j++){ 
      positions.push(coordinates[j][0]); 
      positions.push(coordinates[j][1]); 
      positions.push(coordinates[j][2]); 
     } 
     var geometry = new THREE.BufferGeometry(); 
     // buffer attributes contain an array not vectors 
     var positionAttribute = new THREE.BufferAttribute(new Float32Array(positions),3); 
     geometry.addAttribute("position", positionAttribute); 
     var material = new THREE.MeshBasicMaterial({ color: 0xff00f0 }); 
     var mesh = new THREE.Mesh(geom, material);  
     Scene.scene.add(mesh); 
    }   
} 

またはあなたがそれを呼び出す場合は、最初のループを削除するような何かをしようとしている複数のオブジェクトの配列が含まれているようです提供するものからJSON配列

Answer 2

内の各オブジェクトのために私は別の方法でそれをやった...私はちょうど代わりBufferGeometryのthree.jsのデフォルトのジオメトリを作成しました：

function handleLoadedGeometry(filename) { 

    var material = new THREE.MeshBasicMaterial({color: 0xFF0000}); 

    for (var i=0; i<filename.length; i++) 
    { 
     var model = filename[i]; // erstes Objekt 
     var coordinates = JSON.parse(model.geometry); 
     var geometry = new THREE.Geometry(); 
     var coordinates_updated = _transformCoordinates(coordinates.coordinates[0]); 

     for (var j = 0; j<coordinates_updated.vertices.length; j++){ 


      geometry.vertices.push(
       //new THREE.Vector3(coordinates.coordinates[0][j][0], coordinates.coordinates[0][j][1], coordinates.coordinates[0][j][2])//x,y,z Koordinatenpunkte für Surface 1 
       new THREE.Vector3(coordinates_updated.vertices[j][0],coordinates_updated.vertices[j][1],coordinates_updated.vertices[j][2]) 
      ); 
      geometry.faces.push(
       new THREE.Face3(0,1,2), 
       new THREE.Face3(0,3,2) 

      geometry.computeBoundingSphere(); 
     } 
     var mesh = new THREE.Mesh(geometry, material); 
     Scene.scene.add(mesh); 
    } 
}; 

そして今は動作します！ 私はBufferGeometryがより複雑なサーフェイスのためのものだと思います。