Question

背景：我是一个了解JS的开发者，但对于三个JS来说相对较新。我做了一些涉及基本重复动画的静态场景的小项目。

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

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

我的问题是，如何手动选择单个点（多维数据集几何），以便我可以修改高度值？我在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'，似乎没什么用。我知道这是可能的，我似乎无法找到一种有效的方法。

Answer 1

好的，我发现了一种适用于此结构的方法。

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

Globe＆gt;场景＆gt;儿童＆gt; [对象]

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

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来获取对象总数

三个JS按id选择几何

1 个答案: