2

背景: 私は JS を知っている開発者ですが、Three JS は比較的新しいものです。基本的な繰り返しアニメーションを使用した静的シーンを含むいくつかの小さなプロジェクトを実行しました。

私は現在、Google の Globe プロジェクトhttp://workshop.chromeexperiments.com/globe/の修正版に取り組んでいます。振り返ってみると、ゼロから始めるべきだったのかもしれませんが、彼らの開発者がとったアプローチを見るには良いツールでした。ThreeJS をすべてバラバラにすることなく更新できたらいいのにと思います (サポートされていないメソッドが多すぎて、修正できなかったバグがいくつかあります。少なくとも、試行した時間では修正できませんでした)。

オリジナルでは、すべての幾何学的ポイントを 1 つのオブジェクトにマージして、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」を試しましたが、何も機能していないようです。それが可能であることはわかっていますが、機能する方法が見つからないようです。

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 に答える