準備

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

http://threejs.org/

CDNは下記から

//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js

基本構成

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

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

Scene

シーンの作り方

var scene = new THREE.Scene();

Light

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

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

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

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

Geometry

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

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

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

    var geometry = new THREE.SphereGeometry(50);

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

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

Material

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

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

Mesh

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

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

Mashに影をつける場合

cube.castShadow = true;

表示位置を指定する

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

Sceneに追加する

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クラスの引数に設定する

var controls = new THREE.OrbitControls(camera);

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

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

記載内容のサンプル

サンプル