three.js で 3D 立方体を描画する詳細な例-jsチュートリアル-php.cn

three.js で 3D 立方体を描画する詳細な例

小云云

リリース： 2017-12-19 16:34:12

オリジナル

2902 人が閲覧しました

この記事では、例を挙げて 3D 立方体を描画する Three.js について詳しく説明します。Three.js は、右手座標系に基づいて、単純なまたはより複雑な 3 次元グラフィックスを作成し、適用することができます。カラフルなテクスチャとマテリアルを追加できます。光源を使用して、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 正方形全体を表示するキャンバスです。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Camera 相机</title>
 <style>
 #canvas {
 width: 400px;
 height: 300px;
 border: 1px solid red;
 margin: 50px auto;
 display:block;
 }
 </style>
</head>
<body>
 <canvas id="canvas"></canvas>
 <script src="./libs/three.min.js"></script>
</body>
</html>

ログイン後にコピー

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

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

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

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