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

2012年10月28日

Three.js の WebGL+Canvas の実行サンプル / 二平面とローポリゴン 3D モデル

SkyDrive へ移動



いずれも、FlyControl を改造したコントロールを実装しています。
※ オレンジ部分をマウスカーソルで押しつづけるか、キーで操作するかです。

※ Three.js は、49〜52 までを同梱しています。
※ スライダーには jQuery を使用しています。

Three.js は、49 と 50 間で大きな仕様変更があったので、いろいろな動作確認の為に4種類入っています。

特に、Blender で作成される Three.js 用の 3D モデル用のファイルは、49と50で処理が変更されて、画像を反転させないと正しく表示されませんでした。それぞれのバージョンのスクリプトで作成すれば問題は出ません。

また、ColladaLoader を使って Dae をロードする場合、50 以降ではテクスチャが二つ以上だと正しく描画されないようです。( 49 を使うと動作しますが、バージョン毎に違うので同じバージョンのものを使う必要があります )



サンプルパターン

1) slider_webgl.htm
2) slider_canvas.htm

単純な二平面ですが、webgl では裏側は Light が対象となるマテリアルを使用しています。また、IEWebGL をインストールすると、IE でも動作します。基本的には、Google Chrome と Firefox で動作しますが、Firefox のみが ローカルでも動きます( Firefox の特徴 )。それ以外はローカルに Webサーバーが必要となります。




サンプルパターン

1) slider_webgl.htm
ライトが関与するようにしています。

2) slider_canvas.htm
Canvas では ライトは使えません

3) slider_webgl_dae.htm
ライトが関与しますが、XML データを書き換えて自己発光になるようにコードを書いています

こちらでも、IEWebGL をインストールすると、slider_webgl 動作しますが、IE では ColladaLoader が使えません( XML 処理で、IE では使えないメソッドを使っているからです )

【Three.jsの最新記事】
posted by at 2012-10-28 01:47 | Three.js | このブログの読者になる | 更新情報をチェックする


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