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 では表示されない仕様です )


posted by at 2013-04-22 00:20 | Three.js | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX