インターンでThree.jsを使う機会があったので、それを学んだ時のメモとして、導入について書きます。
導入（インポート）
Three.jsを表示するには`scean`, `camera`, `renderer`の3つが必要
```
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
```
THREE.PerspectiveCamera(`FOV`, `aspect`, `near`, `far`);
FOV: Field of view: ディスプレイ上に見られるシーンの範囲（度）
aspect: アスペクト比のことで幅 / 高さ
near: nearよりも近いオブジェクトは描画されない
far: farよりも遠い値は描画されない
const render = new THREE.WebGLRenderer();
レンダラーとしてWebGLRendererを利用しているがサポートしていない環境でも後方互換が用意されている
renderer.setSize(window.innerWidth, window.innerHeight);
アプリの描画するサイズを設定アプリで塗りつぶしたい領域の幅と高さを使用することを勧める。パフォーマンスを重視する場合はsetSizeにwindow.innerWidth/2やwindow.innerHeight/2のような小さい値を与えることで半分のサイズでレンダリングされる
サイズを維持しつつより低い解像度でレンダリングしたい場合はupdateStyle（三番目の引数）としてfalseを指定してsetSizeを呼び出すことができる。
Cubeを作成
cubeを作成するにはgeometry, materal, mesh（ジオメトリを受け取り、それにマテリアルを適用させるオブジェクト）が必要
```
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5;
```
BoxGeometry: 全ての頂点、面を含むオブジェクト
MeshBasicMateril: 全てのマテリアルに適用されるプロパティを設定
scene.add(): デフォルトでは追加したものが座標上(0, 0, 0)に表示される
Sceneのレンダリング
描画にはレンダリングまたはアニメーションループが必要
```
function animate() {
requestAnimationFrame( animate ); renderer.render( scene, camera );
}
animate();
```
画面が更新されるたびにrendererがシーンを描画する。
60fpsで描画している
ユーザが別のタブに移動した時に一時停止して貴重な処理能力とバッテリーを温存する
cubeのアニメーション
animete()関数の中でrenderer.renderを呼び出している箇所の近くにかのコードを挿入
```
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
```
x座標とy座標をインクリメントしている。
これをanimate()関数の中で書くことでフレームごとに実行(60fps)される。
終わり
成果
今回書いたコードは以下
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
// Our Javascript will go here.
// scean, camera, rendererを作成
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// cubeを作成
// cubeを作成
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
```