如何在three.js中基於JSON對象創建網格

我有一個ajax請求，它可以幫助我從Web服務器獲取JSON對象！如何在three.js中基於JSON對象創建網格

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

這是一個對象，我這個數組中有很多人。

現在我想創建一個網格！我認爲這是可以的功能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); 
}

最後我在瀏覽器中出現此錯誤內部完成：無法讀取屬性「0」的未定義

我怎麼可以參考geometry coordinates裏面的JSON？

來源

2016-04-25 Moehre

從你提供什麼，似乎加載的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陣列

來源

2016-04-25 20:41:14

感謝您的評論！但現在我有一個問題，因爲model.geometry是一個很大的字符串在我的情況：幾何：「」{「類型」：「多邊形」，「座標」：[[[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]]}}「如果我想要選擇model.geometry.ccordinates它是未知的，我只能選擇model.geometry。 – Moehre

然後嘗試另一個JSON.parse調用或JSON可能有錯誤 –

我做到了，以另一種方式中的每個對象......我剛剛創建的，而不是在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更適用於更復雜的曲面。

來源

2016-04-28 10:48:23 Moehre

如何在three.js中基於JSON對象創建網格

回答

相關問題