Three.js チュートリアル

manapuraza
·

インターンで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)される。

終わり

成果

cube

今回書いたコードは以下

```

<!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>

```