光球内部の要素の位置を計算する

Im a-sky要素を使用して360°光球を表示する。光球内部の要素の位置を計算する

私の問題は、「マーカー」のように動作しなければならないいくつかの要素を光球内部に配置しなければならないということです。私はこれらの要素の位置を計算する方法を理解していません。

たとえば、サイズ4096x2048の写真があり、169,1349に単純なボックスを配置したいとしましょう。

私は球の半径を知っています（5000）、私は便利なサイズを選ぶことができます、私はその "ピクセル位置"（169,1349）の位置を取得する方法を知っている球の内部にある。

ヒント

出典

2016-12-13 Strae

申し訳ありませんが、この時間は本当に簡単だった：コードは次のようですここで私たちの要素を入れたいと思っています。

レコードだけのために、反対の機能は次のとおりです。

function vector3ToSphericalCoords(vector) { 
    var phi = Math.acos(vector.y/Math.sqrt(vector.x * vector.x + vector.y * vector.y + vector.z * vector.z)); 
    var theta = Math.atan2(vector.x, vector.z); 
    return { 
    longitude: theta < 0 ? -theta : (Math.PI * 2.0) - theta, 
    latitude: (Math.PI/2.0) - phi 
    }; 
};

本来の機能がここで見つけることができます：mistic100/Photo-Sphere-Viewer（画面内の要素の位置を取得するにはすてきな機能もあります）

出典

2016-12-14 12:00:43 Strae

a-sky球面の位置を計算する場合は、メソッドがあります。カメラの位置から光線を作り、この光線は球面に当たります。このヒットポイントは、私たちが計算したい位置です。

distanceは中心からの距離をある

function sphericalCoordsToVector3(distance, latitude, longitude){ 
    return new THREE.Vector3(
    distance * -Math.cos(latitude) * Math.cos(longitude), 
    distance * Math.sin(latitude), 
    distance * -Math.cos(latitude) * Math.sin(longitude) 
); 
}

（カメラ）：自分の質問に答えるための

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.3.2/aframe.min.js"></script> 
 
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v2.5.2/dist/aframe-extras.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>sphere position</title> 
 
<script> 
 
    document.addEventListener("click",function(){ 
 
    var camera = document.querySelector("a-camera"); 
 
    var cursor = document.querySelector("a-cursor"); 
 
    var camera_pos = new THREE.Vector3().copy(camera.object3D.getWorldPosition()); // get camera's world position 
 
    var cursor_pos = new THREE.Vector3().copy(cursor.object3D.getWorldPosition()); // get cursor's world position 
 
    var direction = new THREE.Vector3().subVectors(cursor_pos,camera_pos); //calculate direction from camera to cursor 
 
    var raycaster = new THREE.Raycaster(camera_pos,direction.normalize()); // make raycaster 
 
    var sky = document.querySelector("a-sky"); 
 
    var intersects = raycaster.intersectObject(sky.object3D.children[0]); //let raycaster intersect the 'a-sky' sphere 
 
    console.log(intersects[0].point); 
 

 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
<a-scene> 
 
    <a-camera universal-controls position="0 1.6 0"> 
 
    <a-cursor></a-cursor> 
 
    </a-camera> 
 
    <a-sky material="side:double"></a-sky> 
 
</a-scene> 
 
</body> 
 
</html>

出典

2016-12-14 03:23:30

ニースしかし、私はカーソル位置を持っていない.. – Strae

光球内部の要素の位置を計算する

答えて

関連する問題