Three.jsの超基本

Three.jsを触ってみたので、自身が忘れないために基本的な部分を書き残します。


超基本2はこちら->[**Three.jsの超基本2**](https://qiita.com/yuma11/items/b951e02e3b348800cd90)

## Three.jsって何？

> [Wikipedia](https://ja.wikipedia.org/wiki/Three.js)より引用
three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリ及びアプリケーションプログラミングインタフェースである。

要は、Three.jsを使えばwebブラウザ上で簡単に3DCGのコンテンツを作れるということです。


## Three.jsの導入
以下のサイトからjsファイルをダウンロード。
**・[threejs](https://threejs.org/)**

CDNはこちらから
・https://cdnjs.com/libraries/three.js/


## Scene(ステージ)
物体を置くためのステージ。

```js

(function() {
    var scene;
    scene = new THREE.Scene();
})();
```

add関数で物体をステージに追加する。

```js

scene.add(box); // Mesh(物体)を引数で渡す
```

## Mesh(物体)
物体そのもの。
引数にGeometry(形状)とMaterial(材質)を渡すことができる。

```js

(function() {
  var box;
  box = new THREE.Mesh(
    // 物体の形状を設定(幅, 高さ, 奥行き)
    new THREE.BoxGeometry(50, 50, 50),
    // 物体の材質を設定(色の指定は、始めに「0x」をつける)
    new THREE.MeshLambertMaterial({ color: 0xff0000 }),
  );
})();
```

### Geometry(形状)
【立方体を作る場合】

```js

new THREE.BoxGeometry("幅", "高さ", "奥行き")
```

【球体を作る場合】

```js
new THREE.SphereGeometry（"半径", "経度分割数", "緯度分割数", "開始経度", "経線中心角", "開始緯度", "緯線中心角"）
```

【円柱を作る場合】

```js
new THREE.CylinderGeometry（"上面の半径", "底面の半径", "高さ", "円周の分割数", "高さの分割数", "フタをしない場合->true", "フタをする場合->false"）
```
### Material(材質)
【陰がつかない均一な塗りつぶしを表現】

```js
new THREE.MeshBasicMaterial({ color: 0xff0000 })
```
【影のある光沢感のないマットな質感を表現】

```js
new THREE.MeshLambertMaterial({ color: 0xff0000 })
```
【影のある光沢感のあるマットな質感を表現】

```js
new THREE.MeshPhongMaterial({ color: 0xff0000 })
```

## Camera(カメラ)
ステージ上にカメラを設置する。
設置したカメラ越しに見える物体が、レンダラーを介して描画される。

```js

(function() {
  var camera;
  // カメラの作成(画角, アスペクト比, 描画開始距離, 描画終了距離)
  camera = new THREE.PerspectiveCamera(45, width/ height, 1, 1000);
  // カメラの位置(X軸, Y軸, Z軸)
  camera.position.set(200, 100, 300);
  // 注視点の設定
  camera.lookAt(scene.position);
})();
```


## Light(ライト)
物体を照らすライトをステージ上に設置する。

```js

(function() {
  var light;
  // ライトの作成(色, 光の強さ)
  light = new THREE.DirectionalLight(0xffffff, 1);
  // ライトの位置(X軸, Y軸, Z軸)
  light.position.set(0, 100, 30);
  // ライトをステージに追加
  scene.add(light);
})();
```

ステージ全体に均等に光を当てたい場合は、**「AmbientLight」**を使用する。

```js

(function() {
  var ambient;
  ambient = new THREE.AmbientLight(0x404040);
  scene.add(ambient);
})();
```

## renderer(レンダラー)
設定したステージ、物体、カメラ、ライトなどをHTMLに結びつける。


```js
// アンチエイリアスをtrueにすることで、物体のギザギザを目立たなくする
renderer = new THREE.WebGLRenderer({ antialias: true });
// レンダラーのサイズを調整
renderer.setSize(width, height);
// 背景色を指定
renderer.setClearColor(0xefefef);
// デバイスの解像度を指定
renderer.setPixelRatio(window.devicePixelRatio);
// HTML要素に紐付ける
document.getElementById('stage').appendChild(renderer.domElement);
```

## Helper(ヘルパー)
グリッドや軸、ライトの位置などを表示してくれる。

```js
var gridHelper;
var axisHelper;
var lightHelper;

// グリッドを表示
gridHelper = new THREE.GridHelper(全体のサイズ, １マスのサイズ);
scene.add(gridHelper);
// 座標軸を表示
axisHelper = new THREE.AxisHelper(線の長さ);
scene.add(axisHelper);
// ライトの位置を表示
lightHelper = new THREE.DirectionalLightHelper(light,表示する大きさ);
scene.add(lightHelper);
```


## コードを全てまとめると

```js

(function() {

  var scene;
  var box;
  var light;
  var ambient;
  var camera;
  var gridHelper;
  var axisHelper;
  var lightHelper;
  var renderer;
  var width = 500;
  var height = 250;

  // ステージの作成
  scene = new THREE.Scene();

  // 物体の作成
  box = new THREE.Mesh(
    new THREE.BoxGeometry(50, 50, 50),
    new THREE.MeshLambertMaterial({ color: 0xff0000 }),
  );
  box.position.set(0, 40, 0);
  scene.add(box);


  // ライトの設定
  light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(0, 100, 30);
  scene.add(light);

  ambient = new THREE.AmbientLight(0x404040);
  scene.add(ambient);


  // カメラの設定
  camera = new THREE.PerspectiveCamera(45, width/ height, 1, 1000);
  camera.position.set(200, 100, 300);
  camera.lookAt(scene.position);


  // ヘルパーの設定
  gridHelper = new THREE.GridHelper(300, 10);
  scene.add(gridHelper);
  axisHelper = new THREE.AxisHelper(1000);
  scene.add(axisHelper);
  lightHelper = new THREE.DirectionalLightHelper(light, 20);
  scene.add(lightHelper);


  // レンダラーの設定
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  renderer.setClearColor(0xefefef);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.getElementById('stage').appendChild(renderer.domElement);

  // 描画する
  renderer.render(scene, camera);

})();
```
<br/>
上記のコードを書くことで、以下の3D立方体を作成することができます。
<img width="784" alt="スクリーンショット 2020-02-23 14.59.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528941/099b6a9b-912c-1ee9-8bae-1f47edfa86c3.png">