Three.jsの基礎基礎メモ

##準備

####下記からjsをダウンロード

http://threejs.org/

####CDNは下記から
//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js

##基本構成

• Scene (舞台）
• ーMesh (部品）
• ーーGeometry (形状）
• ーーMaterial (素材）
• ーLight (光）
• ーCamera (カメラ）

これらをレンダリング（描画）する。

##Scene
####シーンの作り方

js

var scene = new THREE.Scene();

##Light
DirectionalLight・・・太陽光のような一方向から光をあてるライト

js

var light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(0,100,30);
scene.add(light);

AmbientLight・・・自然光のように全体的に光を当てるライト

js

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

##Geometry
BoxGeometry・・・立方体を作る
new THREE.BoxGeometry(幅, 高さ, 奥行き)

js

    var geometry = new THREE.BoxGeometry(50, 50, 50);

SphereGeometry・・・球体を作る
new THREE.SphereGeometry(半径, 経度分割数, 緯度分割数, 開始経度, 経線中心角, 開始緯度, 緯線中心角)

js

    var geometry = new THREE.SphereGeometry(50);

CylinderGeometry・・・円柱を作る
new THREE.CylinderGeometry(上面の半径, 底面の半径, 高さ,円周の分割数, 高さの分割数, フタをしない:true,フタをする:false)

js

    var geometry = new THREE.CylinderGeometry( 5, 5, 20);

##Material

• MeshBasicMaterial・・・光をほとんど反射しない（質感小）
• MeshLambertMaterial・・・光をそこそこ反射する（質感中）
• MeshPhongMaterial・・・光をよく反射する（質感大）

js

    var material = new THREE.MeshLambertMaterial({
        color: 0x2FCDB4
    });

##Mesh
Geometry (形状）、Material (素材）を元に、Mesh (部品）を作成します。

js

 var cube = new THREE.Mesh(geometry, material);

Mashに影をつける場合

js

cube.castShadow = true;

表示位置を指定する

js

cube.position.set(0, 50, 0);

Sceneに追加する

js

scene.add(cube);

##Camera
カメラの作り方

var camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(200, 300, 500);
camera.lookAt(cube.position);

PerspectiveCamera・・・奥行きを見渡せる遠近法のカメラ

new THREE.PerspectiveCamera(視野角,画面サイズ,カメラの見える範囲最小値,最大値)

camera.lookAt・・・カメラの視野の中心座標を指定

camera.lookAt({x:0, y:0, z:0 });

##AxisHelper
部品を追加したあとに、3D空間がわかりやすくなるガイドのようなもの。

var axis = new THREE.AxisHelper(1000);
axis.position.set(0,0,0);
scene.add(axis);

##OrbitControls.jsで画面を操作する
###OrbitControls.jsとは
OrbitControls.jsを使用すると、マウスドラッグやマウスホイールによるカメラ移動を簡単に実装できる。

※OrbitControls.jsを使用中はlookAt関数が使えなくなります。

###使い方
①カメラオブジェクトをOrbitControlsクラスの引数に設定する

js

var controls = new THREE.OrbitControls(camera);

②renderの直前でupdateする(直後でもいいみたい）

js

var renderer = new THREE.WebGLRenderer();
controls.update();
renderer.render(scene, camera);

##記載内容のサンプル
サンプル