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

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

Three.jsとは何ですか?

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

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

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

• カメラ/画面に何をレンダリングするかを決定します

• 光源/マテリアルの表示方法と生成時のマテリアルの使用方法に影響しますシャドウ

• オブジェクト/カメラの視点での主要なレンダリング構成です: 正方形、球体など。

始める前に

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

 
 <meta>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 
 
 <script></script>
 <script>
  // Our Javascript will go here.
 </script>
 

次のコードが 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 应用。很简单，但总得突破。

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

 
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 
 
 <script></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>
 

相关推荐：

three.js通过模块导入实例分享

three.js如何本地运行详解

实例讲解Three.js加载外部模型

以上がthree.jsによるシーンインスタンス作成の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。