2

背景：我是一个懂 JS 的开发者，但是对 Three JS 比较陌生。我做过一些涉及带有基本重复动画的静态场景的小项目。

我目前正在研究 Google Globe 项目http://workshop.chromeexperiments.com/globe/的修改版本。回想起来，我可能应该从头开始，但这是一个很好的工具，可以看到他们的开发人员采取的方法。我只是希望我现在可以更新 ThreeJS 而不让整个事情崩溃（有太多不受支持的方法和一些我永远无法修复的错误，至少在我尝试它的那个小时内没有）。

在最初，他们将所有几何点合并到一个对象中以加快 FPS。出于我的目的，我正在使用 JSON 更新地球上的点，并且永远不会超过 100 个（实际上可能不超过 60 个），因此它们需要保持独立。我已经删除了“组合”阶段，因此我现在可以单独将数据分配给点，然后调整高度变化动画。

我的问题是，如何手动选择一个点（这是一个立方体几何），以便我可以修改高度值？我在 GitHub 上浏览了 Stack Overflow 和 Three JS，但我不确定我是否理解这个过程。我正在分配一个 ID 以使其与传递给它的数据直接相关（我知道 WebGL 为粒子添加了一个单独的名称/ID，但我需要一些与我正在做的事情更直接相关的东西为简单起见）。这似乎工作正常。但同样，作为一名 JS 开发人员，我在 jQuery 中尝试过 .getElementById(id) 和 $('#'+id) ，但都不起作用。我意识到 Geometry 对象的行为方式与 HTML DOM 对象不同，所以我想这就是我遇到困难的地方。

将数据点添加到地球的代码：

function addPoint(lat, lng, size, color, server) {
    geometry = new THREE.Cube(0.75, 0.75, 1, 1, 1, 1, null, false, { px: true,
    nx: true, py: true, ny: true, pz: false, nz: true});

    for (var i = 0; i < geometry.vertices.length; i++) {
        var vertex = geometry.vertices[i];
        vertex.position.z += 0.5;
    }

    var point = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial ({
        vertexColors: THREE.FaceColors
    }));

    var phi = (90 - lat) * Math.PI / 180;
    var theta = (180 - lng) * Math.PI / 180;

    point.position.x = 200 * Math.sin(phi) * Math.cos(theta);
    point.position.y = 200 * Math.cos(phi);
    point.position.z = 200 * Math.sin(phi) * Math.sin(theta);

    if($('#'+server).length > 0) {
        server = server+'b';
    }

    point.id = server;

    point.lookAt(mesh.position);

    point.scale.z = -size;
    point.updateMatrix();

    for (var i = 0; i < point.geometry.faces.length; i++) {
        point.geometry.faces[i].color = color;
    }

console.log(point.id);

    scene.addObject(point);
}

所以现在回去，我知道我不能使用 point.id 因为显然那只会在函数内部引用。但我尝试了“Globe.id”、“Globe.object.id”、“object.id”，但似乎没有任何效果。我知道这是可能的，但我似乎找不到有效的方法。

4

1 回答 1

0

好的，我通过玩结构找到了一种适用于此的方法。

本质上，场景被标记为“地球”，所有对象都是它的子对象。因此，将场景视为一个数组，我们可以使用以下结构成功地将一个对象传递给一个 var：

地球 > 场景 > 儿童 > [对象]

使用匹配函数，我们遍历每个项目并找到所需的几何对象并将其分配给临时变量以进行动画/调整：

function updatePoints(server){
    var p, lineObject;

    $.getJSON('/JSON/'+server+'.json', function(serverdata) {

        /* script that sets p to either 0 or 1 depending on dataset */

        var pointId = server+p;

        //Cycle through all of the child objects and find a patch in 
        for(var t = 3; t < globe.scene.children.length; t++) {
            if(globe.scene.children[t].name === pointId) {
                //set temp var "lineObject" to the matched object
                lineObject = globe.scene.children[t];
            }
        }

        /* Manipulation based on data here, using lineObject */
    });
}

我不知道这是否是其他人对此有疑问的问题，但我希望它对其他人有帮助！:)

编辑：刚刚意识到这不是一个键控数组，所以我可以使用 .length 来获取对象的总数

于 2012-10-08T19:04:43.750 回答