オリジナルソースコードは webgl_materials_cubemap_dynamic2.html です。名前が cubemap とあるのは、このパノラマの中央でオブジェクトをアニメーションして背景を映りこみさせる『cubeCamera』を使ってるからだと思います。 ▼ 背景画像ちょっと作るのは違う知識が必要そうなので、オリジナルの画像を使っています。 ( 結構簡単に美しい画像を手に入れる事ができました )
▼ 実行中のスクリーンショット
実行ページ ※ 掲示板の一部に実装しています。 ソースコードは掲示板ページの一番下にありますが、Google Chrome ではマウスホイールでしかスクロールできないようなので注意して下さい( Three.js のコントロールの仕様です ) ※ 掲示板で取得したコードは、リアルタイム HTML テスターでそのまま実行できるようにしています。( 同じパスで画像を同一ドメイン内に置いています ) この処理で重要なのは、mesh.scale.x = -1; です。具体的な仕様は解りませんが、スケールを負にする事によって、球の内側を見ているようになります。ですから、カメラ位置が 1 であるにもかかわらずカメラを中心に画像が表示されています( カメラは全て 0 では表示されない仕様です )
|
|
2013年04月22日
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 %>この記述は、以下の場所で使用します
|
|
