導入
この記事では、主にThree.jsの関連する概念を説明し、読者がThree.jsと関連する知識の比較的完全な理解を開発するのに役立ちます。
このWebは近年急速に発展しています。 HTML5の人気により、Webページのパフォーマンス機能はますます強力になっています。 Webページには、すでに多くの複雑なアニメーションと絶妙な効果があります。
しかし、人々はいつも貪欲です。それで、これ以上に他に何ができるでしょうか？そのうちの1つは、WebGLGを介してWebページに高性能の3Dグラフィックスを描画することです。
opengl、webglから3.js
多くの人がおそらくOpenGLについて聞いたことがあります。これは最も一般的に使用されているクロスプラットフォームグラフィックライブラリです。
WebGLは、OpenGLによって設計されたWeb指向のグラフィックスターン標準であり、グラフィックレンダリングを活用してより高いパフォーマンスを実現する一連のJavaScript APIを提供します。
Three.jsは、WebGLインターフェイスをカプセル化および簡素化することにより形成される使いやすいグラフィックライブラリです。
簡単に言えば、WebGLはブラウザによって提供されるインターフェイスと見なすことができます。 JavaScriptでは、これらのAPIを直接使用して3Dグラフィックを描画できます。また、Three.jsは、これらのインターフェイスをより便利にカプセル化するのに役立ちます。
webglと3.jsの比較
WebGLを持っているので、なぜ3つのjsが必要なのですか？
これは、WebGLのしきい値が比較的高く、比較的数学的な知識が必要であるためです。 WebGLはフロントエンドAPIを提供しますが、WebGLとフロントエンドの開発は本質的に2つの異なる方向であり、知識の重複はほとんどありません。関連性は、それらがすべてWebプラットフォーム上にあり、すべてJavaScriptを使用していることです。フロントエンドのプログラマーは分析ジオメトリに精通している場合がありますが、線形代数にまだ精通している人はほとんどいないはずです（たとえば、逆転置マトリックスを見つけようとしますか？）。マトリックス操作の物理的意義が使用されていることは言うまでもありません。
したがって、フロントエンドエンジニアが短時間でWebGLを開始することは非常に困難です。
したがって、Three.jsはWebGLが提供するインターフェイスの非常に優れたカプセル化を備えており、多くの詳細を簡素化し、学習コストを大幅に削減します。そして、WebGLでは柔軟性の低下はほとんどありません。
したがって、Three.jsから始めることをお勧めします。これにより、より短い研究の後、ほとんどの需要シナリオに直面することができます。
Three.JS学習問題
Three.jsを始めることは比較的簡単ですが、実際に学習すると、恥ずかしい問題が見つかります。関連する学習資料はほとんどありません。
通常、この人気のあるライブラリには非常に完全な文書があり、多くの場合、公式の文書や公式の入門チュートリアルから学ぶための最良の方法があります。しかし、3つはそうではありませんが、そのドキュメントは初心者には簡潔すぎます。
ただし、役人は非常に豊富なさまざまな例を提供しており、必要なほとんどすべての使用法は特定の例に反映されています。しかし、これらの例は始めるのに適していませんが、開始後のさらなる学習に適しています。
ここに比較的良いチュートリアルがいくつかあります：
Three.js Guite Guide
これは、Three.jsの優れた軽量入門チュートリアルです。著者は非常に優れた執筆スタイルを持っており、基本的な知識は簡潔で簡単に理解できるように説明されています。
Three.JS開発ガイド（最初の中国語版）
学習3.js-第2版
学習3.js：webglのJavaScript 3Dライブラリは、 Three.jsの少数の最高の入門書です。これは、より包括的な方法でThree.jsのさまざまな機能を説明しています。
機能がある場合は、2015年に公開された英語版の第2版を読むことをお勧めします。
中国語版は、2012年に公開された元の本の初版から翻訳されています。概念のほとんどは適用可能ですが、多くの詳細が変更されています。
Three.jsチュートリアル
これは外国のチュートリアルの翻訳であり、合計6つの記事があります。私はあまり説明していませんが、それぞれの基本機能を使用する方法についての詳細です。グラフィックスファンデーションを持つ学生により適しています。
もちろん、これらの材料は、実際の学習プロセス中に間違いなく十分ではありません。問題に遭遇したとき、あなたはまだ自分で資料をチェックする必要があります。ただし、Three.jsが非常に頻繁に更新されることを思い出してください。今ではR80バージョンです。 R1は2010年4月にリリースされて以来、これは72番目のバージョンです（中央の一部のバージョン番号がスキップされました）。したがって、インターネットで見つかった情報の一部は現在のバージョンには適していない可能性があるため、識別に注意を払う必要があります（以前に推奨された情報には多かれ少なかれそのような問題があります）。
Three.jsのいくつかの概念
画面に3Dグラフィックを表示するには、一般的にこのアイデアは次のようです。
3次元スペースを構築します
3つでは、観測点を選択し、観測方向/角度などを決定するのはシーン（シーン）と呼ばれます。
3つはカメラ（カメラ）と呼んで、シーンに観察するためのオブジェクトを追加します
メッシュ、ライン、ポイントなどを含む3つのオブジェクトには多くの種類があります。それらはすべて、Object3Dクラスから継承され、観測されたシーンを画面上の指定された領域にレンダリングします。
これを行うには、3つのレンダラーを使用してください
これらの概念を3つ詳細に見てみましょう。
シーン
シーンはすべてのオブジェクトのコンテナであり、作成する3次元の世界にも対応しています。
カメラ座標系
カメラは、3次元の世界のオブザーバーです。この世界を観察するためには、まず宇宙の位置を説明する必要があります。
一般的な右側の座標系は3つで使用されます。
3次元投影
3つには2つのタイプのカメラがあります。つまり、正書法の投影カメラ3。視点カメラとパースペクティブプロジェクションカメラ3.perspectiveカメラ。
直交投影と視点投影の違いを上の図に示します。左の写真は直交投影です。オブジェクトによって放出される光は画面に平行に投影され、はるかに正方形が同じサイズです。正しい絵は視点の予測であり、これは遠くおよび小さい方が大きく、物事を見るという通常の感覚と一致しています。
ウィキペディア：3D投影
直交プロジェクションカメラ
注：図の「視点」は、3つのカメラに対応しています。
ここでは、視覚体の概念を追加します。視覚体は幾何学的な体であり、視覚体のオブジェクトのみが私たちに見られ、視覚体の外側のオブジェクトは遮断されます。これは、不要な操作を削除するためです。
正書法の投影カメラのビューボディは立方体です。 Orthographiccameraのコンストラクターは次のとおりです。Orthographiccamera（左、右、上、下、近く、遠い）
カメラ自体はポイントと見なすことができますが、左は左方向と右方向の左飛行機とカメラの間の距離を示します。他のパラメーターにも同じことが当てはまります。したがって、6つのパラメーターは、それぞれ表示本体の6つの面の位置を定義します。
視聴本体のオブジェクトは、近くの平面に平行に投影されると想定することができ、その後、飛行機近くの画像が画面にレンダリングされると想定できます。
パースペクティブプロジェクションカメラ
Perspective Projection CameraのViewing Bodyは4エッジプラットフォームであり、そのコンストラクターは次のとおりです。
FOVは、図の視点に対応します。これは、上部と下側の間の角度です。アスペクトは、飛行機近くのアスペクト比です。視覚シーンを決定する唯一の方法である、近くの近くの距離と遠路距離をはるかに追加します。
パースペクティブプロジェクションカメラは、私たちの通常の視聴感と非常に一致しているため、ほとんどの場合、パースペクティブ投影カメラを使用して3D効果を示します。
オブジェクト
カメラを使用すると、何かを見る必要がありますよね？シーンにいくつかのオブジェクトを追加します。
3つに表示するための多くのオブジェクトがあり、そのすべてがObject3Dクラスから継承されています。ここでは、主にメッシュとポイントを見ます。
メッシュ
私たちは皆、コンピューターの世界では、アークが有限ポイントで構成される有限ラインセグメントで接続されていることを知っています。多くの線があるとき、それは滑らかな弧のように見えます。
コンピューターの3次元モデルは似ています。一般的な慣行は、三角形のグリッドを使用してそれを説明することです。このモデルをメッシュモデルと呼びます。
これは有名なスタンフォードウサギです。 3Dグラフィックスでのその位置は、デジタル画像処理のよく知られている分野であるLenaの位置に似ています。
このウサギを見てください。三角形の数が増えると、その表面はより滑らか/正確になります。
3つでは、メッシュのコンストラクターは次のとおりです。メッシュ（ジオメトリ、材料）
ジオメトリはその形状であり、素材はその材料です。
メッシュだけでなく、これらの2つのプロパティは多くのオブジェクトを作成するために使用されます。これら2つの重要な属性を見てみましょう。
ジオメトリ
ジオメトリ、形状は非常に直感的です。ジオメトリは、モデルを使用してポイントのセットとポイント間の関係（ポイントを形成するポイント）を保存して、オブジェクトの形状を記述する目的を実現します。
3つは、立方体（実際には立方体）、平面（実際に長方形）、球、円、シリンダー、丸いテーブルなど、多くの基本的な形状を提供します。
また、各ポイントの位置を自分で定義することで形状を構築することもできます。
より複雑な形状の場合、外部モデルファイルを介してインポートすることもできます。
材料
素材、素材、これは形ほど直感的ではありません。
材料は、実際には、色、テクスチャ、滑らかさ、透明性、反射率、屈折率、光度など、オブジェクト表面の形状を除くすべての視覚属性のコレクションです。
ここでは、材料、地図、テクスチャの関係について説明します。
この資料は上記で言及されており、地図などが含まれています。
ステッカーは実際には「貼り付け」と「貼り付け」で、写真と写真を投稿する場所が含まれます。
テクスチャに関しては、実際には「絵」です。
3つはさまざまな材料を選択でき、拡散/鏡面反射やその他の材料を自由に選択できます。
ポイント
メッシュについて話した後、別のオブジェクトであるポイントを見てみましょう。
ポイントは実際にはポイントの集まりです。これは以前に粒子系と呼ばれていました。 R68バージョンでPointCloudと名前が変更され、R72バージョンでポイントに変更されました。名前の変更は、主にドーブ氏が粒子システムが粒子と関連する物理的特性の処理を含む完全なシステムであるべきであると考えているためです。したがって、最終的にはこのクラスはポイントという名前です。
ポイントを達成するために使用できる典型的な効果はこれです：公式の例
ライト
神は言った：光があるに違いない！
光と影の効果は、写真を豊かにする重要な要素です。
3つは、アンビエントライトのアンビエントライト、ポイント光源ポイントライト、スポットライトスポットライト、方向性の光の方向ライト、半球光半球光、その他の光など、さまざまな光源を提供します。
必要な光源をシーンに追加するだけです。
レンダラー
さまざまなオブジェクトがシーン、ライト、およびオブジェクトを観察するカメラに組み込まれており、画面に表示されるものをレンダリングする時が来ました。それがレンダリングが行うことです。
レンダラーはキャンバスオブジェクトにバインドし、サイズ、デフォルトの背景色などのプロパティを設定できます。
レンダラーのレンダリング関数を呼び出し、シーンとカメラを渡すと、画像をキャンバスにレンダリングできます。
写真を動かします
これで、静的な画像を取得できますが、どのように移動できますか？
非常に簡単なアイデアは、シーン内のオブジェクトの位置、角度、およびさまざまな特性を変更し、レンダリング関数をレンダリングすることです。
では、再レンダリングのタイミングをどのように判断しますか？
HTML5は、各ページの塗装前に渡された関数を自動的に呼び出すrequestAnimFrameを提供します。
最初にこれをレンダリングする場合：
function render（）{renderer.render（sean、camera）;}これに変更するだけです：
関数render（）{requestAnimationFrame（render）; object.position.x += 1; renderer.render（シーン、カメラ）;}オブジェクトは移動できます！
栗を与えます
簡単な例を使用して、このプロセスを整理しましょう。
まず、キャンバス要素を含むページを書きます。
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/lib/lib/ HTML、ボディ{マージン：0;パディング：0; } #three_canvas {position：absolute;幅：100％;高さ：100％; } </style> </head> <body> <canvas id = "three_canvas"> </canvas> </body> </html>以下のJavaScriptの部分をしましょう
最初にRendererを初期化します
function initrenderer（）{width = document.getElementById（ 'three_canvas'）。clientWidth; height = document.getElementById（ 'three_canvas'）。clientheight; renderer = new 3.webglrenderer（{//キャンバスをレンダラーキャンバスにバインドする：document.getElementbyId（ 'three_canvas'）}）; renderer.setsize（幅、高さ）; //レンダリングサイズをcanvas renderer.setclearcolor（0xffffff、1.0）と同じに設定します; //デフォルトの色と透明性を設定}初期化シナリオ：
function initscene（）{sean = new 3.scene（）;}カメラの初期化：
function initcamera（）{//ビューポートの中心に面した単純な直交投影カメラは、キャンバスサイズと同じです。カメラ=新しい3.othographiccamera（width / -2、width / 2、height / 2、height / -2、1、1000）; //カメラ位置camera.x = 0を設定します。 camera.position.y = 0; Camera.Position.Z = 200; //カメラの上向き方向Camera.up.x = 0を設定します。 camera.up.y = 1; camera.up.z = 0; //カメラのフォーカス位置を設定します（実際に方向を決定するために）カメラ（{x：0、y：0、z：0}）;};}カメラの位置と方向を独自に決定するために、3つの位置、UP、およびLookatの属性は不可欠です。
ここでは、直交プロジェクションカメラを作成しました。ここでは、座標系のユニットの長さが画面のピクセルに対応するように、便利なため、画面の解像度と一致するビューサイズを保持します。
カメラをZ軸に配置し、座標起点に面し、カメラの上方向はy軸です。 Upの方向とLookatの方向は垂直でなければならないことに注意してください（自分の頭と自分を比較するかどうかがわかります）。
これがシーンに追加されたキューブです：
function initobject（）{//左の100 varジオメトリ= new 3.cubegeometry（100、100、100）のキューブを作成します。 object = new 3.mesh（geometry、new 3.meshnormalmaterial（））; seen.add（object）;}通常の材料のメッシュノルマルマテリアルを使用して、キューブの各面の色がこの顔に面する方向に関連しているようにし、観察/デバッグが容易になることに注意してください。
この単純なデモでは、私は光と影の効果を追加するつもりはありません。通常の素材は光に反応しません。
最後に、アニメーションループを作成します
関数render（）{requestAnimationFrame（render）; object.rotation.x += 0.05; object.rotation.y += 0.05; renderer.render（シーン、カメラ）;}それぞれの塗装により、キューブが少し回転します。
ページが読み込まれているときは、以前の機能を呼び出すだけです
function threeStart（）{initrenderer（）; initcamera（）; initscene（）; initobject（）; render（）;} window.onload = threestart（）;完全なデモは次のようになります：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/lib/lib/ HTML、ボディ{マージン：0;パディング：0; } #three_canvas {position：absolute;幅：100％;高さ：100％; } </style> </head> <body> <canvas id = "three_canvas"> </canvas> <script> varレンダラー、カメラ、シーン、ライト、オブジェクト; var幅、高さ; function initrenderer（）{width = document.getElementById（ 'three_canvas'）。clientWidth; height = document.getElementById（ 'three_canvas'）。clientheight; renderer = new 3.webglrenderer（{canvas：document.getElementbyId（ 'three_canvas'）}）; renderer.setsize（幅、高さ）; renderer.setClearColor（0xfffff、1.0）; } function initcamera（）{camera = new 3.othographiccamera（width / -2、width / 2、height / 2、height / -2、1、1000）; camera.position.x = 0; camera.position.y = 0; Camera.Position.Z = 200; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookat（{x：0、y：0、z：0}）; } function initscene（）{sean = new 3.scene（）; } function initobject（）{var geometry = new 3.cubegeometry（100、100、100）; object = new 3.mesh（geometry、new 3.meshnormalmaterial（））; shene.add（object）; }関数render（）{requestAnimationFrame（render）; object.rotation.x += 0.05; object.rotation.y += 0.05; renderer.render（シーン、カメラ）; } function threeStart（）{initrenderer（）; initcamera（）; initscene（）; initobject（）;与える（）; } window.onload = threestart（）; </script> </body> </html>HTMLとして保存した後、それを開いて、そのような回転キューブが画面の中央に表示されます。
まとめ
これが3.jsの導入です。この記事では、基本的に3つの重要なコンポーネントについて言及しています。実際、私が要約したいことはたくさんありますが、この記事でそれらを書くことは面倒に思えるかもしれません。この記事の当初の意図は、読者がそれを読んだ後に3つのjsを直感的かつ一般的に理解させることであり、あまりにも多くの詳細を含めるつもりはないことです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。