Edited at

Three.jsの基礎基礎メモ

More than 3 years have passed since last update.


準備


下記から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);


記載内容のサンプル

サンプル