1

http://workshop.chromeexperiments.com/globe/のWebGLグローブを使用しています。地球のいずれかのポイントがクリックされた場合、そのポイントの経度と緯度を取得する必要があります。これらのパラメータは、2Dマップ用のGoogleマップに渡されます。

どうすれば長くなることができますか。と緯度。webglグローブから？

この関数を通して私はダブルクリックされたポイントを取得し、このポイントを通して私は長いものを見つけています。と緯度。しかし、結果は正しくありません。クリック点が正しく決まっていないようです。

function onDoubleClick(event) {
        event.preventDefault();

        var vector = new THREE.Vector3(
            ( event.clientX / window.innerWidth ) * 2 - 1,
            -( event.clientY / window.innerHeight ) * 2 + 1,
            0.5
        );

        projector.unprojectVector(vector, camera);

        var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());

        var intersects = ray.intersectObject(globe3d);

        if (intersects.length > 0) {

            object = intersects[ 0 ];

            console.log(object);
            r = object.object.boundRadius;
            x = object.point.x;
            y = object.point.y;
            z = object.point.z;
            console.log(Math.sqrt(x * x + y * y + z * z));

            lat = 90 - (Math.acos(y / r)) * 180 / Math.PI;
            lon = ((270 + (Math.atan2(x, z)) * 180 / Math.PI) % 360) - 180;
            
            console.log(lat);
            console.log(lon);

        }
    }

ここからWebGLグローブを入手してくださいhttps://github.com/dataarts/webgl-globe/archive/master.zipMozilla で直接開くことができます。Chromeで開くと、クロスオリジンのために地球表面の画像が不足しています。リソース共有ポリシー。仮想ホストに配置する必要があります。

4

2 に答える 2

3

このように機能を使ってみてください

    function onDoubleClick(event) {
        event.preventDefault();

        var canvas = renderer.domElement;
        var vector = new THREE.Vector3( ( (event.offsetX) / canvas.width ) * 2 - 1, - ( (event.offsetY) / canvas.height) * 2 + 1,
0.5 );

        projector.unprojectVector( vector, camera );

        var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());

        var intersects = ray.intersectObject(globe3d);

        if (intersects.length > 0) {

            object = intersects[0];

            r = object.object.boundRadius;
            x = object.point.x;
            y = object.point.y;
            z = object.point.z;

            lat = 90 - (Math.acos(y / r)) * 180 / Math.PI;
            lon = ((270 + (Math.atan2(x, z)) * 180 / Math.PI) % 360) - 180;

            lat = Math.round(lat * 100000) / 100000;
            lon = Math.round(lon * 100000) / 100000;
            window.location.href = 'gmaps?lat='+lat+'&lon='+lon;

        }
    }
于 2012-11-09T13:54:50.610 に答える
0

私はあなたが共有するコードを少し修正して使用しました、そしてそれは素晴らしい働きをします。

それを正しく機能させる方法は、新しいTHREE.Vector3に何を渡すかを正確に理解することです。

この関数には3つのパラメーター（x、y、z）が必要です

私たち/あなたの場合のzは0.5としてスカルプトされ、それは大丈夫です

xとyは-1と1の間の数値である必要があるため、この値を取得するには、キャンバス上のクリック座標をキャッチし、この式を使用して、これらをこの範囲の値（-1 .. .. 0 ... 1）;

var vectorX = ((p_coord_X / canvas.width ) * 2 - 1);
var vectorY = -((p_coord_Y / canvas.height ) * 2 - 1);

ここで、p_coord_Xとp_coord_Yはクリックの座標（キャンバスの左上隅を参照）であり、canvasはwebglグローブが存在するキャンバス領域です。

問題は、クリックのX座標とY座標をピクセル単位で取得する方法です。これは、キャンバスがHTML環境にどのように配置されているかによって異なるためです。私の場合、適切でない原因で提案された解決策は常に誤った結果を返しました。そのため、クリックしたときにキャンバス領域のx座標とy座標を正確に取得するソリューションを作成します（私の場合も、scrollYページ修正を挿入する必要がありました）。

ここで、キャンバス領域を4平方で分割すると想像してください。北西の象限をクリックすると、たとえば-0.8、-05 xおよびyの値、SEのクリック、つまり0.6、0.4の値が返されます。

次のray.intersectObject（）関数は、クリックベクトル変換されたデータを使用して、クリックが地球と交差するかどうかを理解し、一致する場合は、座標latとlonを正しく返します。

于 2013-12-11T11:13:51.107 に答える