ホームページ > 記事 > ウェブフロントエンド > 3D 立方体の描画に関する Three.js チュートリアル
3D 立方体の描画に関する Three.js チュートリアル
- 小云云オリジナル
- 2018-01-18 10:22:274725ブラウズ
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 正方形全体を表示するキャンバスです。
<!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 世界を描きたいとします。それを記録してください
この美しいシーンがシーンです
写真をはっきりと見るために、写真をキャンバスに配置します
最後に、レンダラーを使用して修正してレンダリングします。
このようにして、この 3D 世界を正常に表示することができます。
【プログラムはまだ本番に近づいています。
以上が3D 立方体の描画に関する Three.js チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。