準備
下記からjsをダウンロード
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);