2012-05-03 8 views
1

私はHTML5を使いたいという単純なコンセプトを持っていますが、Javascriptで書かれたキャンバスとモデルビューアに関しては初心者です。私はデスクランプの3Dモデルを持っていて、マウスの動きに合わせてランプの頭部だけを回転させたいと思います。これはCSS3 box shadow effectという意味ですが、Mayaで3Dモデルを作成して、HTML5をロードしてカーソルの操作にJavascriptを使用したいと考えています。私は3D属性を保持するためにランプの頭の部分が必要です、私はベースのためのpngを使用することができます。私はこれが理にかなったことを願っています。通常はフラッシュを使用しますが、可能であればHTML5でこれを行いたいと思います。 3はそのお手伝いをしませんHTML5キャンバス要素とJavascriptで3Dモデルをロード

+1

チェックアウト[three.js](https://github.com/mrdoob/three.js/) –

+0

パーフェクト、これは私が必要とするものです。誰かがJSONモデルをthree.jsでロードする方法についていくつかの光を当てることができますか?ありがとう! – dcd018

答えて

1

CSSは、あなたが「プラグインを使用せずに任意の互換性のあるWebブラウザ内でインタラクティブな3DグラフィックスをレンダリングするためのJavaScript API」

でのWebGLを使用する必要がありますように聞こえます

私はあなたがthree.jsでそれを行うことができ、あまりにもWebGLのために新しいです

+0

逆に、私はすぐにオープンソーシングを計画している3D CSSエンジンを持っています。それはOPを助けるではない、私はちょうどあなたのコメントは驚くほど関連性が見つかりました:) –

+0

何ができるの3D CSSエンジン? 3Dオブジェクトのモデリング? –

+0

.objと.mtlファイルから直接。 –

2

(「test if your browser supports WebGL site」もあります)wikipedia articleofficial siteを試してみてください。 Blenderを使用している場合、モデルをjsonファイルに変換するコンバータスクリプトがあります。

次に、jsonファイルをthree.jsのjsonローダーを使用してキャンバスに読み込むことができます。私はこれらのリンクがjsonモデルを読み込むのに便利だと分かった。 https://code.google.com/p/jsc3d/

引用: ..JSC3Dは、2Dキャンバスを使用してレンダリング純粋なJavascriptのソフトウェア上に構築されているhttp://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html

関連する問題