SQLの窓 イラストAC フリー素材

2013年04月22日

Three.js : 球を使った『パノラマ背景』

オリジナルソースコードは webgl_materials_cubemap_dynamic2.html です。名前が cubemap とあるのは、このパノラマの中央でオブジェクトをアニメーションして背景を映りこみさせる『cubeCamera』を使ってるからだと思います。

▼ 背景画像


ちょっと作るのは違う知識が必要そうなので、オリジナルの画像を使っています。
( 結構簡単に美しい画像を手に入れる事ができました )


▼ 実行中のスクリーンショット


実行ページ

※ 掲示板の一部に実装しています。

ソースコードは掲示板ページの一番下にありますが、Google Chrome ではマウスホイールでしかスクロールできないようなので注意して下さい( Three.js のコントロールの仕様です )

※ 掲示板で取得したコードは、リアルタイム HTML テスターでそのまま実行できるようにしています。( 同じパスで画像を同一ドメイン内に置いています )

この処理で重要なのは、mesh.scale.x = -1; です。具体的な仕様は解りませんが、スケールを負にする事によって、球の内側を見ているようになります。ですから、カメラ位置が 1 であるにもかかわらずカメラを中心に画像が表示されています( カメラは全て 0 では表示されない仕様です )


【Three.jsの最新記事】
posted by at 2013-04-22 00:20 | Three.js | このブログの読者になる | 更新情報をチェックする