Question

我有一个ajax请求，可以帮助我从网络服务器获取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？

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

我是用另一种方式做的...我只是在three.js中创建了默认的几何而不是BufferGeometry：

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更适用于更复杂的表面。

如何在three.js中基于JSON-Object创建Mesh

2 个答案: