HTML5 での WebGL 3D の概要 (パート 2) - クラス ライブラリ開発と Framework_html5 チュートリアル スキルの紹介

ネイティブ WebGL API を使用して開発することがいかに面倒であるかは前に説明しました。このため、多数の WebGL フレームワークが開発されてきました。これらのフレームワークを使用すると、必要な 3D シーンをすばやく作成できます。これらのフレームワークは、シーン、カメラ、モデル、照明、マテリアルなど、3D シーンを作成するためのさまざまな要素をさまざまな程度にカプセル化します。これらのカプセル化されたオブジェクトを使用して、必要な 3D シーンを簡単に作成できます。ロジックについてはさらに詳しく説明します。

現状では他のフレームワークを圧倒するようなメリットはありませんが、どのフレームワークを選ぶかは個人の好みによると思いますが、フレームワークを選ぶ際には最終更新時刻を見た方が良いと個人的には思います。安定した更新されたフレームワークを使用すると、常に最新の機能を使用できるため、プログラムの安定性が高まります。

次の例は、Three.js フレームワークを使用して開発されています。
Three.js は、3D シーンのさまざまな要素を適切にカプセル化する、比較的包括的なオープンソース フレームワークです。これを使用して、カメラ、モデル、ライト、マテリアルなどを簡単に作成できます。 Three.js では、さまざまなレンダリング方法を選択することもできます。レンダリングにキャンバスを使用することも、WebGL または SVG を使用することもできます。

さらに、Three.js は、Blender、Maya、Chinema4D、3DMax などのモデル ファイルをさまざまな形式で読み込むことができます。そして、比較的基本的なものが組み込まれています: (球) Sphere、(平面) Planes、(立方体) Cube、(円柱) Cylinder。 Three.js を使用すると、これらのオブジェクトを非常に簡単に作成できます。

OK、これ以上ナンセンスはやめて、コードを見てください:

コードをコピーします

コードは次のとおりです:

<メタ文字セット="utf-8 ">




var カメラ,シーン,レンダラー;
var メッシュ;
init();
animate();

function init(){
シーン = 新しい 3。 Scene();
カメラ = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,1,1000);
カメラ.position.z = 400;
シーン.add(カメラ);
ジオメトリ = new THREE.CubeGeometry(200,200,200);
マテリアル = new THREE.MeshBasicmaterial( { color: 0xff0000, Wireframe: true } );
メッシュ = new THREE.Mesh(geometry,material);
scene.add (mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement) ;
}
function animate() {
requestAnimationFrame( animate );
Mesh.rotation.x = 0.05;
Mesh.rotation.y = 0.05;
renderer.render(シーン、カメラ );
}




これがすべてのコードです。WebGL API を使用した前のコードと比較すると、これは単純すぎます。
コードは非常に直感的で、いくつかの手順を実行するだけです。
1. シーンを作成します。
2. カメラを作成します。
3. モデル ジオメトリを作成/ロードします。
4. 素材を読み込みます。
5. モデル オブジェクト メッシュ (ジオメトリとマテリアルで構成される) をレンダリングします。
6. アニメーションを有効にします。

これは各フレームワークで提供される関数です。異なるフレームワークを使用しても、関数の名前が異なる場合があることを除いて、これらの手順は基本的に同じです。以下のリファレンスには、フレームワークの学習ドキュメントが多数リストされていますので、いくつか選択して学習することができます。

モデルデータに関しては、JSON は短くて簡潔であるため、ネットワーク送信に適しているとも言いたいと思います。将来的には、WebGL に最適なモデル データ形式になる可能性があるため、多くのフレームワークが JSON 形式のモデル データをサポートし始めています。

実用的なリファレンス:
開発センター: https://developer.mozilla.org/en/WebGL

高品質のオンライン開発ツール: http://webglplayground.net/
さまざまなフレームワークに関する基本チュートリアル: http://www.html5china.com/HTML5features/WebGL/
WebGL 中国語チュートリアル: http://www.hiwebgl.com/?p=42
Oak3D 中国語チュートリアル: http://www.hiwebgl.com/ ?cat =57
CubicVR3D 公式 Web サイト: http://www.cubicvr.org/
Three.js グラフィック ライブラリ: https://github.com/ mrdoob/three .js
さまざまなフレームワークのコレクション投稿: http://www.appcrews.com/2011/07/129.html