如何在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对象创建网格

回答

相关问题