ホームページ > 記事 > ウェブフロントエンド > three.jsによるシーンインスタンス作成の詳しい説明

three.jsによるシーンインスタンス作成の詳しい説明

小云云オリジナル: 2018-01-18 09:41:182694ブラウズ

この記事では、three.js の中国語ドキュメントを学習するためのシナリオを作成するための関連情報を、サンプルコードを通じて詳細に紹介します。必要な場合は、以下からフォローしてください。

Three.jsとは何ですか?

この記事を読んでいる方は Three.js についてある程度理解していると思いますので、Three.js とは何かを簡単にご紹介します
Three.js はブラウザ上で WebGL の 3D エフェクトを有効にするライブラリです。使い方は簡単です。生の WebGL の単純なキューブは数百行の Javascript とシェーダーコードになりますが、Three.js にはほんの少しのコードしか必要ありません

このセクションの目的は、three.js の概要を提供することです。まず、回転立方体を使用してシーンを構築しました。問題が発生してサポートが必要な場合は、ページの下部に参照用のソースコードがあります。

シーンには少なくとも 3 種類のコンポーネントが必要です

カメラ/画面に何をレンダリングするかを決定します
光源/マテリアルの表示方法と生成時のマテリアルの使用方法に影響しますシャドウ
オブジェクト/カメラの視点での主要なレンダリング構成です: 正方形、球体など。

始める前に

次の HTML コードをコンピューターに保存し、three.js をjs ディレクトリを選択し、参照しますブラウザで開きます

<html>
 <head>
 <meta charset=utf-8>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  // Our Javascript will go here.
 </script>
 </body>
</html>

次のコードが script タグ内にダウンロードされます

サンプルシーンを作成します

デモにthree.jsを使用するには、シーン、カメラの3つの要素が必要です、カメラシーンをレンダリングするレンダラー。

えー

何が起こっているのか説明するために少し時間を取りましょう。これで、シーン、カメラ、レンダラーが作成されました。

three.js には複数のカメラがあります。一時的に PerspectiveCamera (パースペクティブカメラ) を使用します

その最初の属性は、可視ビュー範囲であるビュー角度 (FOV) で、その値は角度のサイズを表します。

2 番目の属性はアスペクト比です。ほとんどの場合、幅を高さで割った値を使用する必要があります。そうしないと、ワイドスクリーン TV で古い映画のような画像が表示され、画像が潰れて見えます。

最後の 2 つの属性は、近景と遠景です。これら 2 つの面の間の領域のみがレンダリングされます。現時点ではこれについて心配する必要はありません。これらのパラメーターを使用するとパフォーマンスが向上します。

次にレンダラーについて話しましょう。これが魔法です。ここで使用する WebGLRenderer に加えて、three.js は、WebGL をサポートしていない古いブラウザーで使用するためのいくつかのレンダラーも提供します。

レンダラーインスタンスの作成に加えて、アプリケーションレンダリングのサイズも設定する必要があります。アプリケーションの幅と高さ全体 (この場合はブラウザウィンドウの幅と高さ) を埋める方法を使用することをお勧めします。パフォーマンス優先のアプリケーションの場合、setSize を使用して、半分のサイズでレンダリングされる window.innerHeight/2、window.innerWidth/2 などの小さい値を設定できます。

サイズ全体を低解像度でレンダリングしたい場合は、キャンバス要素の幅と高さが100 % の場合、アプリケーションは 1/2 の解像度でレンダリングされます。

次に、レンダリングされた要素を HTML に追加する必要があります。レンダラーはキャンバスを通してシーンを表示します。

「それはいいのですが、先ほどの立方体はどうでしょうか？」ここでそれを付け加えましょう。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

立方体を作成するには BoxGeometry が必要です。このオブジェクトには、立方体のすべての点 (頂点) と塗りつぶし (面) が含まれています。それについては後で説明します。

ジオメトリに加えて、色を付けるためのマテリアルも必要です。 three.js にはいくつかのマテリアルが用意されていますが、今回は MeshBasicMaterial を使用します。すべてのマテリアルは、すべてのプロパティを含むオブジェクトを受け入れて適用します。簡単にするために、色属性は 1 つだけ提供します: 緑 - 0x00ff00 CSS および PS と同じ 16 進カラーを使用します。

必要な 3 番目の要素はメッシュです。メッシュはマテリアルをジオメトリに適用するオブジェクトで、シーンに配置して自由に動き回ることができます。

scene.add() を呼び出すと、追加した内容はデフォルトで座標 (0, 0, 0,) に表示されます。これにより、カメラと立方体が内部で重なり合います。これを回避するには、カメラを少し外側に移動します。

レンダリングシーン

上記のコードをHTMLファイルにコピーすると、画面には何も表示されません。まだシーンをレンダリングしていないためです。したがって、レンダラーまたはアニメーションループを呼び出す必要があります。

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

これにより、レンダラーに 1 秒ごとに 1 フレームを描画させるループが作成されます。 Web ゲームプログラミングについてあまり詳しくない場合は、「setInterval 関数を作成すればいいのではないか?」と思われるかもしれません。実際には作成できますが、requestAnimationFrame にはそれ以上の利点があります。最も重要な利点は、ブラウザが別のタブに切り替わったときに requestAnimationFrame がレンダリングを一時停止するため、貴重な処理能力とバッテリー寿命が無駄にならないことです。

立方体を動かします

作成したコードを挿入すると、緑色の立方体が表示されるはずです。飽きないように回してみましょう。

次のコードをanimate関数のrenderer.renderに追加します:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。

结果

恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。

完整代码参考如下。琢磨一下并深刻理解其工作机理

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  renderer.render(scene, camera);
  };

  animate();
 </script>
 </body>
</html>

three.jsによるシーンインスタンス作成の詳しい説明

関連記事