3D 立方体の描画に関する Three.js チュートリアル

Three.js は、右手座標系に基づく 3D JavaScript ライブラリで、単純またはより複雑な 3D グラフィックスを作成し、カラフルな光源を追加したり、3D シーンでオブジェクトを移動したりできます。スクリプトアニメーションなどを追加します。この記事では、three.jsを使用して3D立方体を描画する方法を紹介します。必要な場合は参照してください。

はじめに

three.js は、WebGL フレームワークであり、キャンバス上で 3D 効果を実現できます。 3D 効果の実現は中国ではまだ比較的新しいことであり、参考になる情報はあまりありません。この記事はあくまで3D立方体の描き方を紹介する入門記事です。

Three.js の基本概念

Three.js には、シーン、カメラ、レンダラーという 3 つの基本概念が含まれています。

シーンは描画する必要のあるオブジェクトであり、カメラは視野角を表し、レンダラーは描画のキャリアです(ブラウザのDOM要素に添付できます)。

つまり、私たちは撮影しますカメラを通してシーンを撮影し、それをターゲットのメディアに描画します。

シーン、カメラ、レンダラーを作成する

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 );

上記のコードは、最初にシーンを作成し、次に PerspectiveCamera (立体カメラ) を作成し、次に WebGL レンダラーを作成します (Three.js は非 3D Canvas 2D レンダラーもサポートしていることに注意してください)。それを HTML ドキュメント本文の DOM 子要素に添付します。

紹介の後、まず実装のレンダリングを紹介します。

これは実装のレンダリングですが、かなり 3 次元ですよね?

描画前の準備

コードを記述する前に、まず最新のthree.jsフレームワークパッケージをダウンロードし、独自のページを導入する必要があります。

具体的な実装プロセス

キャンバスを準備します

このキャンバスは、上の図の黒いボックスである 3D 正方形全体を表示するキャンバスです。

nbsp;html>


 <meta>
 <meta>
 <meta>
 <title>Camera 相机</title>
 <style>
 #canvas {
 width: 400px;
 height: 300px;
 border: 1px solid red;
 margin: 50px auto;
 display:block;
 }
 </style>


 <canvas></canvas>
 <script></script>

描画のアイデアを明確にしましょう

次の描画プロセスには、キャンバス、シーン、カメラ、レンダラーなどの複数の概念が関係します。

描画プロセスのコードをより深く理解し、記憶を助けるために、まず次の概念を理解します:

今旅行中で、とても美しい写真を見て、この 3D 世界を描きたいとします。それを記録してください

• この美しいシーンがシーンです

• 写真をはっきりと見るために、写真をキャンバスに配置します

• 最後に、レンダラーを使用して修正してレンダリングします。

このようにして、この 3D 世界を正常に表示することができます。

【プログラムはまだ本番に近づいています。

以上が3D 立方体の描画に関する Three.js チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。