three.jsを使う

# three.jsを使う

---

### three.jsとは

WebGLを扱うためのJavaScriptのライブラリ

---

### 対象ブラウザ

- どのブラウザでも動く訳じゃない
- IEとかはWebGLは対応しない(ただしIEは終了した)

---

### サンプルを動かす

https://github.com/mrdoob/three.js.git

ダウンロード

```
git clone --depth=1 https://github.com/mrdoob/three.js.git
```

依存パッケージのインストール

```
cd three.js
npm install
```

開発サーバーの起動

```
npm start
```

Webブラウザで http://localhost:8080/examples/ にアクセスする

---

サンプルのソースを読んでみる

examples/canvas_morphtargets_horse.html

馬みたいなやつ

---

### サンプルソース内の関数など

- init()
  - 初期化
- onWondowResize()
  - ウィンドウが変更されたときの処理
- animate()
  - 描画開始関数
- render()
  - １回のレンダリング時の処理

---

### 初期化(1)

コンテナ要素作成

```
container = document.createElement( 'div' );
document.body.appendChild( container );
```

カメラ作成

```
aspect = window.innerWidth / window.innerHeight;
camera = new THREE.PerspectiveCamera(50, aspect, 1, 10000);
camera.position.y = 300;
var point = new THREE.Vector3(0, 0, 0);
camera.target = point;
```

---

### 初期化(2)

シーン作成

```
scene = new THREE.Scene();
```

ライト作成

```
var light = new THREE.DirectionalLight( 0xefefff, 2 );
light.position.set( 1, 1, 1 ).normalize();
scene.add(light);
```

(ライトの設定は見栄えにかなり影響する)

---

### 初期化(3)

モデルデータのロード

```
var data_path = '/js/horse.js';
var loader = new THREE.JSONLoader(true);
loader.load(data_path, function(geometry){
material = new THREE.MeshLambertMaterial( // 材質
{color: 0x606060,
morphTargets: true,
overdraw: 0.5
});
mesh = new THREE.Mesh(geometry, material); // メッシュ
mesh.scale.set(1.5, 1.5, 1.5);
scene.add(mesh);
});
```

---

### 初期化(4)

レンダラーの作成

```
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth, window.innerHeight);
```

レンダラーのDOM要素を追加

```
container.appendChild(renderer.domElement);
```

ブラウザのサイズ変更時のハンドラ登録

```
window.addEventListener( 'resize', onWindowResize, false );
```

---

### 初期化でする事

- カメラの作成と設定
- シーンの作成
- THREE.JSONLoade
- THREE.MeshLambertMaterial
- HREE.Mesh
- レンダラーの作成
- THREE.DirectionalLight
- モデルデータの作成
- THREE.Scene
- ライトの作成
- THREE.PerspectiveCamera
- THREE.CanvasRenderer
- 必要なハンドラーの登録とかその他諸々
- window.addEventListener

---

#### ウィンドウサイズ変更時の処理

アスペクト比を設定

```
camera.aspect = window.innerWidth / window.innerHeight;
```

射影matrixを更新 (たぶんどう映るかという内部情報を更新)

```
camera.updateProjectionMatrix();
```

レンダラーサイズを設定

```
renderer.setSize( window.innerWidth, window.innerHeight );
```

---

### 描画開始関数 animate()

フレームの描画更新の設定

```
requestAnimationFrame( animate );
render();
```

---

#### フレーム毎の描画処理 render()①
カメラの位置と向きを変更

```
theta += 0.1;
camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
camera.lookAt(camera.target);
```

---

#### フレーム毎の描画処理 render()②

キーフレームの選択

```
if (mesh) {
var time = Date.now() % duration;
var keyframe = Math.floor( time / interpolation );
```

キーフレームが違っていたら有効なキーフレームを切り替える

```
if ( keyframe != currentKeyframe ) {
mesh.morphTargetInfluences[ lastKeyframe ] = 0; // 0にする事で無効になる
mesh.morphTargetInfluences[ currentKeyframe ] = 1; // 1にする事で有効になる
mesh.morphTargetInfluences[ keyframe ] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];
}
renderer.render( scene, camera );
```

---

## 自分で作った3Dモデルをthree.jsで動かす

(モデリングもBlenderでやります)

---

### Blender

- http://www.blender.org/
- 3DCG開発環境
- Blenderのインストールの説明は省略

---

まずはモデリング

---

## 猿

- BlenderのHello world的存在
- スザンヌという名前が付いている
- add monkey

---

Blenderを起動したら
真ん中の立方体を削除

fn+delete
を押すとOK?と聞かれるので
Deleteを選択してenter

---

スザンヌを追加
spaceを押してモーダルを出して
“add monkey”とtypeしenter

---

#### 作成したデータをthree.js用に出力

---

作成したデータをthree.js用に出力

---

- ./examples/obj/blenderscene
- ./examples/obj/blenderscene/scene.blend
- ./examples/obj/blenderscene/scene.Cube.js
- ./examples/obj/blenderscene/scene.js
- ./examples/obj/blenderscene/scene.Monkey.js
- ./examples/obj/blenderscene/scene.Plane.js

---

Three.jsのソースツリーからBlender用のpluginを探す

```
./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs
./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/__init__.py
./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/export_threejs.py
./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/import_threejs.py
```

---

#### 作成したデータをthree.js用に出力

Blender用のpluginをBlenderのplugin用ディレクトリにコピー

```
cp ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs Blender/blender.app/Contents/MacOS/2.68/scripts/addons/
```

```
cp ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs $BLENDER_DIR -R
```

注) BLENDER_DIRはBlenderのplugin用ディレクトリに置き換えてください

---

#### 作成したデータをthree.js用に出力

1.「メニュー > File > User Preferences」を選択。
2. Addonsタブの ImportExportを選ぶ。
2. 右端のチェックをONにするとThree.js形式のデータの出力機能が有効になる。

エクスポートする。JSON形式で出力される。

---

エクスポートしたデータを
自分の作成したページに
表示させてみる

---

マウスでグルグルしたい

---

イベントハンドラ追加
```
function rotate_object(event) {
if ( mesh ) {
mesh.rotation.x = event.clientX / 10;
mesh.rotation.y = event.clientY / 10;
}
}
```
こんな処理の関数を
document.addEventListener()で登録する

---
## TrackballControls を使ってみよう

---

#### TrackballControllsを追加

examples/js/controls/TrackballContorolls.js を読み込む必要有り

```
var trackball;
function init(){
〜省略〜
trackball = new THREE.TrackballControls(camera, renderer.domElement);
〜省略〜
}
〜省略〜
function render() {
trackball.update();
renderer.render(scene, camera);
}
```
rotate_object()はもういらない

### まとめ

- 3DCGっぽいと見た目に箔がつく
- Three.js/Blender楽しい
- モデリングの技術結構重要

---

みんなやろうよ
three.js

---

元データ
- https://www.slideshare.net/TakesxiSximada/threejs-30716363
- https://www.slideshare.net/TakesxiSximada/threejs-30716344