オリジナルソースコードは webgl_materials_cubemap_dynamic2.html です。名前が cubemap とあるのは、このパノラマの中央でオブジェクトをアニメーションして背景を映りこみさせる『cubeCamera』を使ってるからだと思います。 ▼ 背景画像ちょっと作るのは違う知識が必要そうなので、オリジナルの画像を使っています。 ( 結構簡単に美しい画像を手に入れる事ができました )
▼ 実行中のスクリーンショット
実行ページ ※ 掲示板の一部に実装しています。 ソースコードは掲示板ページの一番下にありますが、Google Chrome ではマウスホイールでしかスクロールできないようなので注意して下さい( Three.js のコントロールの仕様です ) ※ 掲示板で取得したコードは、リアルタイム HTML テスターでそのまま実行できるようにしています。( 同じパスで画像を同一ドメイン内に置いています ) この処理で重要なのは、mesh.scale.x = -1; です。具体的な仕様は解りませんが、スケールを負にする事によって、球の内側を見ているようになります。ですから、カメラ位置が 1 であるにもかかわらずカメラを中心に画像が表示されています( カメラは全て 0 では表示されない仕様です )
|
|
【Three.jsの最新記事】
- r69 で再チェックしました / Three.js(r53) で追加された LineDashedMaterial のサンプルを簡素化して解りやすくしました
- Three.js(r69) : Lineメソッドで使用する頂点の配列を持つ Geometry オブジェクト
- Three.js : 好きな背景透過画像を飛翔させる
- Three.js : Vector3 オブジェクトのコンストラクタ / result = x || 0; という書き方
- Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』
- Three.js の canvas_geometry_birds の『鳥』だけを取り出して考える
- ユーザ定義の THREE.UserCubes1 オブジェクトを使って、カメラでその周りを周回する
- Three.js : カメラが発射する Ray(光) にヒットするオブジェクトを総取りする
- Three.js の点線表示の詳細( 特に Windows で WebGL では線の太さは実装なし )
- Three.js でキューブの『テクスチャ面設定』とスケール・X軸回転を jQuery のスライダーでテストする
- Three.js の座標系の向きを テクスチャを貼りつけたキューブと jQuery のスライダー で確認する
- Three.js を使って DAZStudio でレンダリングした女性をちょっと湾曲した炎の前に立たす 〜 Three.js エフェクトの可能性
- Three.js 3Dゲームワールド(を夢見て)リアルサンプル
- Three.js の webgl_geometry_minecraft.html で使われている Cube World を使って、3D モデルを乗っけてカメラを動かすとかなりいい雰囲気です
- THREE.Scene クラスの remove メソッド
- Three.js の個別ソースを使った部分カスタマイズ
- Three.js : あるスケールでの平均した座標集合の作成
