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

【问题标题】：How to create Mesh based on a JSON-Object in three.js如何在 three.js 中基于 JSON-Object 创建 Mesh
【发布时间】：2016-05-02 12:07:42
【问题描述】：

我有一个 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);
}

最后我在浏览器中得到这个错误：Cannot read property '0' of undefined

如何在JSON 中引用geometry coordinates？

【问题讨论】：

标签： json ajax three.js

【解决方案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 数组中的每个对象调用它，则删除第一个循环

【讨论】：

感谢您的评论！但现在我遇到了一个问题，因为在我的情况下 model.geometry 是一个大字符串：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]]]}". if i wanna选择model.geometry.ccordinates 未知我只能选择model.geometry。
然后尝试另一个 JSON.parse 调用，否则 json 可能有错误

【解决方案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 更适合更复杂的表面。

【讨论】：