Wie man Mesh basierend auf einem JSON-Objekt in three.js erstellt

Question

Ich habe eine Ajax-Anfrage, die mir hilft, ein JSON-Objekt von einem Webserver zu bekommen!

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-Datei:

[{"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"}, ...]

Dies ist ein Objekt, und ich habe eine Menge von ihnen in diesem Array.

Jetzt möchte ich ein Mesh erstellen! Ich denke, das kann in der Funktion handleLoadedGeometry()

//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); 
} 

Am Ende habe ich diesen Fehler im Browser erfolgen: kann nicht lesen Eigenschaft ‚0‘ undefinierter

Wie kann ich beziehen sich auf geometry coordinates innerhalb der JSON?

Answer 1

von dem, was Sie vorgesehen, scheint die geladene JSON ein Array von mehreren Objekten, die ist, warum Sie den Fehler

etwas versuchen, wie dieser

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); 
    }   
} 

oder die erste Schleife entfernen, wenn Sie es nennen für jedes Objekt in der JSON-Array

Answer 2

ich tat es auf eine andere Weise ... ich habe gerade statt BufferGeometry die Standard-Geometrie in 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); 
    } 
}; 

Und jetzt funktioniert es! Ich denke, BufferGeometry ist mehr für komplexere Oberflächen.