THREE.JS 入門チュートリアル(1) THREE.JSを使う前に理解する_基礎知識

Three.js は、WebGL で JavaScript が GPU を操作し、ブラウザ側で真の 3D を実現できる優れたオープンソース WebGL ライブラリです。ただし、このテクノロジーはまだ開発段階にあり、情報が非常に少ないため、愛好家は基本的にデモのソース コードや Three.js 自体のソース コードを通じて学ぶ必要があります。

海外の Web サイト aerotwist.com には、比較的簡単な入門チュートリアルが 6 つあります。それらを翻訳して共有してみました。
私はいくつかの実験プロジェクトで Three.js を使用しましたが、ブラウザー 3D プログラミングをすぐに始めるのに非常に便利であることがわかりました。 Three.js を使用すると、カメラ、オブジェクト、ライト、マテリアルなどを作成できるだけでなく、シェーダーを選択し、Web ページ上で 3D グラフィックをレンダリングするためにどのテクノロジー (WebGL、Canvas、または SVG) を使用するかを決定することもできます。 Three.js はオープンソースであり、プロジェクトに参加することもできます。ただし、今のところは基本に焦点を当て、このエンジンの使用方法を説明します。

Three.js は素晴らしいものですが、時には腹立たしいこともあります。たとえば、例を読んだり、(私の場合は) リバース エンジニアリングを行って特定の関数が何を行うかを判断したり、場合によっては GitHub で質問したりすることに多くの時間を費やします。質問が必要な場合は、doob 氏と AlteredQualia が最適です。

1. 基本
読者は 3D グラフィックスの知識があり、JavaScript をある程度マスターしていることを前提としています。そうでない場合は、最初に少し学習してください。そうしないと、このチュートリアルを直接読むと混乱する可能性があります。

私たちの三次元世界には次のようなものがあります。ステップごとに作成していきます。
1. シーン
2. レンダラ
3. カメラ
4. オブジェクト (マテリアル付き)
もちろん、他のものを作成することもできます。
2. ブラウザのサポート
ブラウザのサポートを簡単に見てみましょう。 Google の Chrome ブラウザは Three.js をサポートしています。私の実験では、Chrome はレンダラーのサポートと JavaScript インタプリタの速度の点で最高であり、Canvas、WebGL、SVG をサポートしており、非常に高速に動作します。 FireFox ブラウザは 2 位にランクされており、その JavaScript エンジンは Chrome よりも 0.5 秒遅いですが、レンダラーのサポートも優れており、FireFox の速度はバージョンの更新によりますます高速になっています。 Opera ブラウザは WebGL のサポートを段階的に追加しており、Mac の Safari ブラウザには WebGL を有効にするオプションがあります。一般に、これら 2 つのブラウザは Canvas レンダリングのみをサポートします。 Microsoft の IE9 は現在 Canvas レンダリングのみをサポートしており、Microsoft は WebGL の新機能をサポートするつもりはないようです。そのため、現時点では実験に IE9 を使用することは絶対にありません。
3. シーンをセットアップします
すべてのレンダリング テクノロジをサポートするブラウザを選択し、Canvas または WebGL (より標準化されたもの) を介してシーンをレンダリングすると仮定します。選択）。 Canvas は WebGL よりも幅広いサポートを備えていますが、WebGL は GPU 上で直接動作できるため、CPU は物理エンジンやユーザーとの対話など、レンダリング以外の作業に集中できます。

どのレンダラーを選択する場合でも、留意しなければならないことが 1 つあります。それは、JavaScript コードを最適化する必要があるということです。ブラウザにとって 3D レンダリングは簡単な作業ではありません (今すぐに実行できるのは素晴らしいことですが)。そのため、レンダリングが遅すぎる場合は、コードのどこにボトルネックがあるのか​​を把握し、可能であればそれを改善する必要があります。

ここまでは述べましたが、Three.js ソース コードをダウンロードして HTML ドキュメントに導入したと思います。では、シーンの作成はどのように始めればよいのでしょうか?次のように:

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

// シーン サイズを設定
var WIDTH = 400,
HEIGHT = 300;
// いくつかのカメラパラメータを設定します
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// DOM 構造内の要素を取得します
// - JQuery を使用すると仮定します
var $container = $('#container')
// レンダラー、カメラ、およびシーン
var renderer = new THREE.WebGLRenderer();
var Camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR); 🎜>var scene = new THREE.Scene();
// カメラをシーンに追加します
scene.add(camera)
// カメラの初期位置は原点です
// カメラを引いてください (翻訳者注: この方法でのみ原点を確認できます)
camera.position.z = 300
// レンダラーを開始します
renderer.setSize(WIDTH, HEIGHT);
// レンダラが DOM 構造に追加されます
$container.append(renderer.domElement);
ほら、簡単だよ！
4. メッシュ サーフェスの構築
これでシーン、カメラ、レンダラー (私の場合はもちろん WebGL レンダラー) が完成しました。まだ？実際、Three.js は特定の標準形式で 3D ファイルをロードするためのサポートを提供しています。これは、Blender、Maya、Cinema4D、またはその他のツールでモデリングしている場合に最適です。わかりやすくするために (結局のところ、まだ始めたばかりです!)、最初にプリミティブについて考えてみましょう。プリミティブは、最も基本的な球、平面、立方体、円柱などの基本的な幾何学的表面です。これらのプリミティブは、Three.js を使用して簡単に作成できます。

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

//球のパラメータを設定します (翻訳者注: 球は 16×16 のグリッドに分割されています。最後の 2 つのパラメータが 4 と 2 の場合、八面体が生成されます。想像してください)
var radius = 50,
segments = 16,
rings = 16;
// マテリアルがジオメトリをカバーしてメッシュを生成します
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(
radius,
segments,
rings),
spherematerial);
// シーンにメッシュを追加します
scene.add(sphere);

球体の材質は？コードでは spherematerial 変数を使用していますが、まだ定義していません。それでは、まずマテリアルの作成方法を見てみましょう。
5. マテリアル
間違いなく、これが Three.js の最も便利な部分です。この部分では、非常に使いやすい一般的なマテリアル モデルがいくつか提供されています。
1.基本マテリアル: 照明を考慮しないマテリアルを表します。これは現時点でしか言えません。
2.ランバート材料: (訳者注: ランバート表面、等方性反射)。
3.フォン マテリアル: (翻訳者注: フォン サーフェス、光沢のあるサーフェス、鏡面反射とランバート反射の間の反射で、現実世界の反射を説明します)。

さらに、他にもいくつかの種類のマテリアルがあります。簡単のため、ご自身で調べてください。実際、WebGL タイプのレンダラーを使用すると、マテリアルは非常に使いやすくなります。なぜ？ネイティブ WebGL では、レンダリングごとにシェーダーを自分で作成する必要があり、シェーダー自体が巨大なプロジェクトになるためです。簡単に言うと、シェーダーは GLSL 言語 (OpenGL シェーダー言語) を使用して作成され、GPU をプロシージャルに操作するために使用されます。つまり、照明や反射などを数学的にシミュレートする必要があり、すぐに非常に複雑な作業になります。 Three.js のおかげで、独自のシェーダーを作成する必要はありません。もちろん、自分で作成したい場合は、MeshShaderMaterial を使用できます。これは、これが非常に柔軟な設定であることを示しています。

次に、ランバーシアン マテリアルで球をカバーしましょう:

コードをコピーします コードは次のとおりです。

// 球面のマテリアルを作成します
var spherematerial =
new THREE.MeshLambertmaterial(
{
color: 0xCC0000
}); >

マテリアルを作成するときは、色に加えて、滑らかさや環境マップなど、他にも多くのパラメーターを指定できることを指摘しておく価値があります。場合によっては、この Wiki ページを検索して、マテリアルまたは Three.js エンジンによって提供されるオブジェクトに設定できるプロパティを確認する必要があります。

6. ライト 今シーンをレンダリングしたい場合は、赤い丸が表示されます。球体をランバーシアン マテリアルで覆いましたが、シーンには光がありません。したがって、デフォルト設定によれば、Three.js は完全な周囲光に戻り、オブジェクトの見かけの色はオブジェクト表面の色になります。単純なポイント ライトを追加しましょう:

コードをコピーします コードは次のとおりです:

/ / 点光源を作成します
var pointLight =
new THREE.PointLight(0xFFFFFF)
// 点光源の位置を設定します
pointLight.position.x = 10; pointLight.position.y = 50;
pointLight.position.z = 130;
// 点光源をシーンに追加します
scene.add(pointLight);
7. レンダリング ループ

明らかに、レンダラーに関するすべてが設定されています。すべての準備が完了しました。必要な作業は次のとおりです。

コードをコピーします

コードは次のとおりです: // 描画 renderer.render(シーン, カメラ)

一度だけではなく複数回レンダリングする可能性が高いため、ループを実行する場合は requestAnimationFrame を使用する必要があります。これは現時点ではブラウザでアニメーションを処理する最良の方法であり、まだ完全にはサポートされていませんが、Paul Irish のブログをチェックすることを強くお勧めします。
8. 共通オブジェクト プロパティ
Three.js のソース コードを参照してみると、多くのオブジェクトが Object3D から継承していることがわかります。この基本クラスには、位置、回転、スケーリング情報など、多くの便利なプロパティが含まれています。特に、私たちの球は Mesh オブジェクトであり、Mesh オブジェクトは Object3D オブジェクトから継承しますが、独自のプロパティのいくつか (ジオメトリとマテリアル) を追加します。なぜこんなことを言うのですか？画面上の何もしないボールだけでは満足できず、これらの (翻訳者注: 基本クラス内) プロパティを使用すると、メッシュ オブジェクトやさまざまなマテリアルの下位レベルの詳細を操作できるからです。

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

// 球はメッシュ オブジェクトです
sphere. geometry
// 球には点と面の情報が含まれています
sphere.geometry.vertices // 配列
sphere.geometry.faces // 別の配列
// メッシュ オブジェクトは object3d から継承しますオブジェクト
sphere.position // x、y、z が含まれます
sphere.rotation // 同上
sphere.scale // ... 同上

9. 厄介な秘密
すぐに理解していただけると幸いです。たとえば、メッシュ オブジェクトの頂点属性を変更しても、レンダリング ループ中には何も変化しないことがわかります。なぜ？ Three.js はメッシュ オブジェクトの情報を特定の最適化された構造にキャッシュするためです。本当に必要なことは、何かが変更された場合にキャッシュ内の構造を再計算する必要があることを伝えるフラグを Three.js に与えることです:

コードをコピー コードは次のとおりです。

// ジオメトリを動的に設定し、頂点を変更できるようにします。
sphere.geometry.dynamic = true; // Three .js に頂点を再計算する必要があることを伝えます
sphere.geometry.__dirtyVertices = true;
// Three.js に頂点を再計算する必要があることを伝えます
sphere.geometry.__dirtyNormals = true ;

他にもたくさんのロゴがありますが、これらの 2 つが最も便利だと思います。不必要な計算オーバーヘッドを避けるために、実際にリアルタイムで計算する必要があるプロパティのみを特定する必要があります。

10. 概要 この簡単な紹介が役立つことを願っています。袖をまくり上げて手を汚すことほど素晴らしいことはありません。そうすることを強くお勧めします。ブラウザーで 3D プログラムを実行するのは楽しいですが、Three.js のようなエンジンを使用すると多くの手間が省かれ、最初から本当に素晴らしいことに集中できるようになります。

このチュートリアルのソース コードをパッケージ化しました。参照として
ダウンロードできます。