1

球体に 360 度画像を表示する単純なアプリケーションを作成しようとしています。次のステップは、ユーザーがパンするときに、この画像に「ホットスポット」を動的に追加することです。

私はさまざまなアプローチを試しました (Three.JS を深く掘り下げることを含む) が、それほど簡単ではないようです。(UV、位置、頂点など)。

A-Frame は、開発者が立ち上げて実行するのを非常に簡単にする点で優れています。球体に2つの「ホットスポット」があり、ホバー/フォーカスすると球体の背景が変化する例を見つけることができました。

カメラの方向に新しい「ホットスポット」を作成しようとしていますが、カメラの位置は決して変わらないが回転は変わるため、これは非常に難しいことがわかりました。

たとえば、パンした後、次のように表示されます。

<a-camera position="0 2 4" camera="" look-controls="" wasd-controls="" rotation="29.793805346802827 -15.699043586584567 0">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10" material="color:#4CC3D9;shader:flat;opacity:0.8" cursor="maxDistance:1000;fuse:true;timeout:10" geometry="primitive:ring;radiusOuter:0.016;radiusInner:0.01;segmentsTheta:64" position="0 0 -1" raycaster=""></a-cursor>
  </a-camera>

理想的には、この位置に新しいホットスポットを作成するには、位置の値に回転値を追加するだけで十分であり、それがホットスポットの正しい場所になると想定しましたが、残念ながらこれは機能しません。ホットスポットが間違った位置にあるか、カメラの方を向いていないか、見えなくなっています。

カメラの視点 (中央) に「ホットスポット」を作成するにはどうすればよいですか?

私が抱えている問題を示すのに役立つコードペンをセットアップしました。理想的には、パンして「ホットスポットの作成」をクリックすると、「ホットスポット」が真ん中に直接作成されます (赤と黄色のホットスポットと同じように)。

ありがとう！

更新: 私が持っていたアイデアは、背景のない二次球 (半径が小さい) を持つことです。交差するカメラ ビューの XYZ 座標を簡単に知ることができれば、これは非常に簡単になります。これを見つける方法はありますか？

4

2 に答える 2

1

はい、あなたの 2 番目のアイデアは正しいと思います。カメラでシーム位置を持つ新しい球体を作成できます。画面の中央に新しい「ホットスポット」を作成したい場合。カメラから「ホットスポット」へのレイキャスターを作成すると、球と交差します。ただし、マテリアルの side プロパティを「doubleside」で設定する必要があります。そうしないと、球と交差しません。を取得できますintersect[0].point。

var pos = new THREE.Vector3().copy(cameraEl.getComputedAttribute("position"));
cameraEl.object3D.localToWorld(pos);
var vector = new THREE.Vector3(( event.clientX / window.inneenter code hererWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
vector = vector.unproject(camera);
var raycaster = new THREE.Raycaster(pos, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects([sphere],true);
if(intersects.length > 0)
{
    console.log(intersects[0].point);
}

`

于 2016-11-04T03:00:18.067 に答える