2009年11月10日

テトラポッドのWeb3D壁紙

テトラポッドのWeb3D壁紙

テトラポッドのWeb3Dを利用した壁紙を作ってみました。
下記のリンクからダウンロードして御利用ください。
tetrapod_old_wp.zip (2010.03.29 更新・ファイル名変更)
tetrapod_new_wp.zip (2010.03.29 追加)
(※Windows xp + IE6の環境で検証済み。環境によっては重いです。)

(※以下、「tetrapod_old_wp.zip」を例に説明します。)
解凍すると、「tetrapod_old.html」「tetrapod_old.zip」「3dh.jar」の3つのファイルが出てきますので、それら全てを同じフォルダに保存してください。
画像ファイルを壁紙に指定するのと同じ要領で、「tetrapod_old.html」を壁紙に指定してやると、以下のように、デスクトップ右下にクルクル回るテトラポッドが表示されます。
初期設定

「tetrapod_old.html」をテキストエディタで編集し、背景色や背景画像を設定するなど、好みのデザインに変更することも可能です。
設定方法は、以下に詳しく説明します。

背景色の変更
「tetrapod_old.html」をテキストエディタで開くと、下記のように「9dacbd」という6文字の文字列が3箇所出てきます。
これが背景色の初期値(水色)を指定している箇所です。
<body style="background-color:9dacbd;margin:0px;">
<param name="TitleBackColor" value="9dacbd">
<param name="BackColor" value="9dacbd">
まず、変更後の背景色のRGB値を調べ、それを16進数による表記に変換してください。
下記サイトを利用すると、簡単に変換できます。
RGB変換 (16進数→10進数) (16進数→10進数)
上記の「9dacbd」の部分を、16進数に変換して求まった6文字の文字列に書き換えてください。
これで、背景色が変更されます。

大きさ・位置の変更
テトラポッド表示部分の大きさ・位置については、下記の箇所で指定されています。
<applet code="J3DViewer.class" codebase="." archive="3dh.jar" width="300" height="300" style="position:absolute;right:50px;bottom:50px;">
幅が300px・高さが300pxの大きさで、デスクトップの右から50px・下から50pxの位置に表示するように指定していますので、数値を変更することで、大きさや位置の変更ができます。
左から○○pxとか、上から○○pxと指定したい場合は、「right」・「bottom」の部分を、「left」・「top」にそれぞれ置き換えてください。
詳しく理解されたい方は、下記ページ等を参照してください。
とほほのスタイルシート入門

影の表示・位置・色
影の表示については、下記の箇所で指定されています。
<param name="SoftShadowEnable" value="true">
<param name="SoftShadowDistance" value="9.00">
<param name="SoftShadowColor" value="808080">
「true」を削除すると、影が非表示になります。
「9.00」は、テトラポッドと影との距離を指定しており、「0」に変更すると地面に設置しているように見えますし、マイナスの値を指定すれば、地面に埋まっているように見えます。
「808080」は、影の色をRGB値の16進数表記で指定しているもので、背景色と同様に編集すれば、影の色を変更できます。

回転の向き・速度の変更
回転速度については、下記の箇所で指定されています。
<param name="InitRotSpeed" value="20,0,0">
「20,0,0」の、カンマで区切られた3つの数字をそれぞれ変更することで、回転の向きや速度が設定できます。
「0,0,0」に設定すると、自動回転をしなくなり、マウス操作でのみ回転するようになります。

背景画像の指定
記事トップの画像のように、テトラポッドの背景に画像を表示する方法です。
サンプルとして、実際に背景画像を設定した壁紙も用意しましたので、下記のリンクからダウンロードしてみてください。
tetrapod_old_wp_bg.zip (2010.03.29 更新・ファイル名変更)
tetrapod_new_wp_bg.zip (2010.03.29 追加)

(※以下、「tetrapod_old_wp_bg.zip」を例に説明します。)
解凍すると、「bg_all.gif」と「bg_part.gif」の2つの画像ファイルが追加されていますが、これらが背景画像として表示されるのです。
「tetrapod_old.html」をテキストエディタで開くと、下記の赤い文字の部分が追加されているのがわかります。
<body style="background-color:9dacbd;margin:0px;background-image:url(bg_all.gif);background-position:right bottom;background-repeat:no-repeat;">
「bg_all.gif」が「tetrapod_old.html」の背景画像として指定され、表示位置や表示のさせ方などが設定されています。
詳しく理解されたい方は、下記ページ等を参照してください。
とほほのスタイルシート入門
ただ、この記述だけでは、以下のように、テトラポッドの周辺には背景画像が表示されません。
Web3Dの背景画像設定前

以下の記述を追加し、Web3D部分の背景画像に「bg_part.gif」を設定します。
<param name="BackImage" value="bg_part.gif">
これで、記事トップの画像のように、背景画像が設定されました。
なお、「bg_part.gif」は、Web3Dの大きさや表示位置を考慮して、「bg_all.gif」から切り取って作成したものです。
この程度の編集であれば、Windows付属のペイントで十分可能ですし、ファイル形式の変換等には、ドラッグ&ドロップ画像変換などを使うと簡単です。
また、今回は「bg_all.gif」「bg_part.gif」とgifファイルを背景画像に指定しましたが、jpgファイルやpngファイルなどでも問題ありません。

最後に念のため。
この壁紙の御利用は個人で楽しむ範囲で御願いいたします。
無断で商用利用はしないでください。
また、自作として発表したり、無断で配布したりしないでください。
ファイルを編集加工したものも同様です。
●「Web3D」の最新記事
ホールブロック12ラティスプレスロックビーハイブS型ビーハイブ三方錐ブロック截頭型シェークブロックペルメックスエックスブロックパラクロスドロスU型テトラネオ三脚B(U型)ブロック三脚Bブロックストーンブロックリーフ型ストーンブロックロウタスユニシーロックB型アクロポッド4連ブロック
posted by Mcguffin at 23:46 | Comment(2) | TrackBack(0) | Web3D | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは。
海外の西海岸に住んでいるものです。
ブログを拝見させて頂きました。
見た事もない作りで感動を覚えました。
実は会社を設立をするにあたってロゴやウェブサイトを建築している最中で資料となるテトラポッドを探してました。 テトラポッドや海に関する工事などは一切販売する業務ではありませんが、会社コンセプトとしてテトラポッドがちょうど良かったのです。
これを今作っているサイトに使用してもよろしいでしょか?
Posted by みつおか のり at 2009年12月18日 03:40
コメントありがとうございました。
デリケートな部分があると思いましたので、メールで御返事させていただきました。
そちらを参照ください。
Posted by Mcguffin at 2009年12月18日 12:36
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。