コメント：多数のWebGLフレームワークが開発されているため、ネイティブWebGL APIを使用して開発するのがどれほど疲れているかがわかりました。これらのフレームワークは、3Dシーンを作成するさまざまな要素をさまざまな程度にカプセル化します。必要な3Dシーンをすばやく作成できます。興味のある友達はそれについて学ぶことができます。おそらく、この記事はあなたに役立つでしょう。
ネイティブ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
プレミアムオンライン開発ツール：
さまざまなフレームワークの基本的なチュートリアル：
WebGL中国のチュートリアル：？p = 42
OAK3D中国のチュートリアル：？cat = 57
cubicvr3d公式ウェブサイト：
Three.jsグラフィックライブラリ：https：//github.com/mrdoob/three.js
さまざまなフレームのコレクション投稿：