私は HTML5 を使用したい単純な概念を持っていますが、Javascript で記述されたキャンバスとモデル ビューアーに関してはまったくの初心者です。電気スタンドの 3D モデルがあり、ランプの頭の部分だけをマウスの動きで回転させたいです。このCSS3 のボックス シャドウ効果は、私が言いたいことのようなものですが、Maya で描画された 3D モデルが既にあり、それを HTML5 でロードし、カーソル操作に Javascript を使用したいと考えています。3D 属性を保持するためにランプの頭の部分だけが必要です。ベースには png を使用できます。これが理にかなっているといいのですが、通常はフラッシュを使用しますが、可能であれば HTML5 でこれを行いたいと考えています。
3 に答える
私もwebglは初めてです。three.jsでできます。Blender を使用している場合は、モデルを json ファイルに変換する変換スクリプトが利用可能です。
次に、three.js の json ローダーを使用してキャンバスに json ファイルをロードできます。これらのリンクは、json モデルをロードするのに役立つことがわかりました。それが役に立てば幸い
http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/
この例のソースをチェックしてください - http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html
CSS 3はそれを助けません。「プラグインを使用せずに、互換性のあるWebブラウザー内でインタラクティブな3DグラフィックをレンダリングするためのJavaScript API」であるWebGLを使用する必要があるようです。
ウィキペディアの記事と公式サイトを試してみてください(「ブラウザがWebGLサイトをサポートしているかどうかのテスト」もあります)
https://code.google.com/p/jsc3d/で jsc3d を試してください。
引用: ..JSC3D は、2D キャンバス テクノロジを使用した純粋な Javascript ソフトウェア レンダリングと、より効率的なレンダリングを提供するオプションの WebGL バックエンドに基づいて構築されています...