ネイティブWebGL API開発を使用することがどれほど疲れているかを見てきました。このため、多数のWebGLフレームワークが開発されています。これらのフレームワークを使用すると、必要な3Dシーンをすばやく作成できます。これらのフレームワークは、シーン、カメラ、モデル、照明、材料など、さまざまな程度に3Dシーンを作成するさまざまな要素をカプセル化します。これらのカプセル化されたオブジェクトを使用すると、必要な3Dシーンを簡単に作成できるため、ロジックにより多くのエネルギーを集中するだけで済みます。
現在、他のフレームワークを圧倒するという利点は誰もいません。選択するフレームの種類は、あなたの個人的な好みに依存します。ただし、フレームワークを選択するときは、フレームワークの前回の更新時間を調べる方が良いと個人的に考えています。安定した更新されたフレームワークを選択すると、常に最新の機能を使用して、プログラムをより安定させることができます。
次の例では、開発のための3.jsフレームワークを使用します。
Three.JSは比較的包括的なオープンソースフレームワークであり、3Dシーンのさまざまな要素でよくカプセル化されています。それを使用して、カメラ、モデル、照明、材料などを簡単に作成できます。異なるレンダラーを選択することもできます。 Three.jsは、さまざまなレンダリング方法を提供します。キャンバスを使用してレンダリングするか、WebGLまたはSVGを使用してレンダリングすることを選択できます。
さらに、Three.jsは3Dファイルを多くの形式でロードでき、モデルファイルはBlender、Maya、Chinema4D、3Dmaxなどから届きます。 Three.jsはこれらのオブジェクトを非常に簡単に作成します。
わかりました、ナンセンスについて話さないでください、コードを見てください：
<！doctype html>
<html>
<head>
<title> threejsdemo </title>
<メタcharset = "utf-8">
<style>
体
{
マージン：0px;
バックグラウンドカラー：＃B0B0B0;
過負荷：非表示;
}
</style>
</head>
<body>
<スクリプトsrc = "three.js"> </script>
<スクリプト>
varカメラ、シーン、レンダラー。
var mesh;
init（）;
Animate（）;
function init（）{
シーン=新しい3.scene（）;
camera = new 3.perspectivecamera（70、window.innerwidth /window.innerheight,1,1000）;
Camera.Position.Z = 400;
shene.add（カメラ）;
Geometry = new 3.CubeGeometry（200,200,200）;
Material = new 3.meshbasicmaterial（{color：0xff0000、wireframe：true}）;
mesh = new 3.mesh（幾何学、材料）;
shene.add（mesh）;
renderer = new 3.webglrenderer（）;
renderer.setsize（window.innerwidth、window.innerheight）;
document.body.appendChild（renderer.domelement）;
}
関数animate（）{
RequestAnimationFrame（Animate）;
mesh.rotation.x += 0.05;
mesh.rotation.y += 0.05;
renderer.render（シーン、カメラ）;
}
</script>
</body>
</html>
これはすべてのコードであり、WebGL APIを使用した以前のコードと比較して、これは単純すぎます。
コードは非常に直感的で、ほんの数ステップです。
1.シーンシーンを作成します。
2。カメラカメラを作成します。
3.モデルのジオメトリを作成/ロードします。
4。材料を積み込みます。
5.モデルオブジェクトメッシュ（ジオメトリと素材で構成）をレンダリングします。
6.アニメーションを有効にします。
これは、各フレームワークによって提供される機能です。異なるフレームワークを使用することは、基本的に異なる場合がありますが、関数名が異なる場合があります。次のリファレンスには、多くのフレームワーク学習ドキュメントにリストされています。学習する方法をいくつか選択できます。
モデルデータに関しては、JSONが短く簡潔であるため、ネットワーク伝送により適しているため、1つのことを言いたいと思います。将来的には、WebGLに最適なモデルデータ形式になる可能性があるため、多くのフレームワークがJSON形式でモデルデータをサポートし始めています。
実用的なリファレンス：開発センター：https：//developer.mozilla.org/en/webgl
プレミアムオンライン開発ツール：http：//webglplayground.net/
さまざまなフレームワークの基本チュートリアル：http：//www.html5/ "> html5china.com/html5features/webgl/
Webgl中国のチュートリアル：http：//www.hiwebgl.com/?p=42
OAK3D中国のチュートリアル：http：//www.hiwebgl.com/?cat=57
cubicvr3d公式ウェブサイト：http：//www.cubicvr.org/
Three.jsグラフィックライブラリ：https：//github.com/mrdoob/three.js
さまざまなフレームワークの投稿の収集：http：//www.appcrews.com/2011/07/129.html