three.jsのHTML5円形パノラマ

最近、ますますインターネット上の円形パノラマに出くわすことができます。 たとえば、同じチーズの家を見てみましょう。 この壮大な小さなものは、レストラン、ホテル、ホテルなどですぐに当たり前になるかもしれません。しかし、コンピューターのフラッシュに問題がある場合はどうすればいいですか？ これは、IT部門の厳しいセキュリティポリシーのために、私の仕事で生じた実際の状況です。

この短い記事では、WebGL + THREE.jsでインタラクティブなパノラマを作成する際に遭遇した困難について説明します。





パノラマの要件を定義します。

• Canvasパノラマはひどく、別の新しいIEがサポートするため、WebGLを使用します。
• マウスボタンをドラッグアンドホールドしてパノラマを表示します。
• 注意を払い、情報を提供するように設計されたアクティブな要素。
• 1ページに複数のパノラマを表示する機能。

これを実装する方法を理解するために、以下を紹介することを提案します。「私たちは、パノラマテクスチャが適用される内面に球体の中心にいます。 私たちは、向きを変えたり、見下ろしたりできるカメラです。 「球体の内側の表面（判明したように、表面の近く）には要素があり、それらの上にマウスを移動すると、情報を示すウィンドウが表示されます。」

範囲

パノラマの実装には、キュービックと球状の少なくとも2つのオプションがあります。 視覚的に同一のアクティブな要素の配置は、中心からの等距離を意味するため、球体を選択しました。 プロトタイプの場合、ライブラリの開発者サイトから既存のパノラマサンプルを取得します。 1つの例外を除き、完全に適合しています。 これは、テクスチャを裏返しにした球体です。 これがどのように見えるか想像するのは難しいです。

mesh.scale.x = -1;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

残念ながら、この詳細は要素を追加する可能性に終止符を打ちます。 一番下の行は、ポインターを使用して空間内のオブジェクトに関する情報を取得するには、ポインターのポイントからベクトルの方向に光線（レイキャスター）を「発射」する必要があります。この場合のみ、カメラ（論理ポイント始まり）は中にありません。 これは、テクスチャが外側からのみ引き伸ばされるために行われますが、球体の問題にsideプロパティを追加するだけで修正できるようになりました。

 mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' ) side: THREE.BackSide } ) );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ところで、これはTHREE.jsの世界での典型的なオブジェクト作成です。 原則として、オブジェクトのジオメトリ、マテリアル（テクスチャ）が作成され、シーンに追加されます。

アイテム

次に、これらの非常にアクティブな要素がどうなるかを考える必要があります。 理想的には、それらは常にカメラに面して表示されるフラットスプライトである必要があります。 はい、そうです:)







しかし、ここで私たちは驚きを求めています。 THREE.jsには、レンダリング用の2つの「クラス」があります： WebGLRendererとCanvasRenderer 。 そして、2つのタイプの単純なオブジェクト： パーティクル （パーティクル）とスプライト 。 WebGLはSpriteで動作し、CanvasはParticleで動作します。 同時に、WebGLが必要であり、Spriteオブジェクトにはスペースがありません。 つまり、マウスでそれに乗ることは不可能です。

さて、平面ジオメトリ（PlaneGeometry）を持つ3Dオブジェクトを使用して、これらの同じスプライトを取得してシミュレートしましょう。

 var itemGeometry = new THREE.PlaneGeometry(35, 35), pointMapHovered = THREE.ImageUtils.loadTexture( "img/information-hover.PNG" ), pointMap = THREE.ImageUtils.loadTexture( "img/information-unhover.PNG" ); point = new THREE.Mesh( itemGeometry, new THREE.MeshBasicMaterial({ map: pointMap, transparent:true // ,  ,  -    }) );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これがなぜそうなのかについて注意を喚起したいと思います。ポイントとテクスチャのジオメトリはキャッシュされ、毎回マテリアルが再作成されます。 実際、マウスをポイントの上に置くと、たとえばテクスチャが明るいテクスチャに置き換えられますが、MeshBasicMaterialがキャッシュされ、全員に共通している場合、全員が明るくなります。 マウスのホバリングについては、すべてが簡単です- ここから始めます 。

問題を引き起こした最後の重要な部分は、ページ上のパノラマエリアの座標を、正確なポイント選択のためのWebGLスペースの座標に再計算することでした。 視覚的には、要素は表示されますが、ページ上の座標は3D空間の座標と一致しません。 StackOverFlowに答えがありました。

データ

1つのページで多くのパノラマを表示できるはずなので、すべてのデータをJSONに配置することをお勧めします。 このようなもの：

 { "points": [ { "coords": { "x": 302.0282521739266, "y": -32.30522607035554, "z": 389.86440214968525 }, "header": "", "body": "." }, ], "texture": "panorama.jpg", "name": " " }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

異なるパノラマを表示するには、球のテクスチャを置き換え、ポイントを削除し、座標によって新しいポイントを作成します。

どうした

ご覧ください