##Three.jsとは
WebGLを簡単に利用するためのライブラリ。
宇宙で地球をグルグル回すみたいなことが少ない手数でできる。
簡単とはいうもののカメラなどの独特の考え方があるので、慣れが必要。
##用語の説明
- Scene => オブジェクトの配置先の3D空間。描画対象。
- Camera => シーンをのぞくカメラ
- Geometry => 形
- Material => 材質
- Texture => materialに設定できる画像
- Mesh => geometryとmaterialをもとに作られるオブジェクト
- Renderer => レンダリングしてくれるやつ
- 座標空間 => 中心が(0, 0, 0)。左上基点じゃないので使いやすい。zはプラスが手前。
用語が多くてよくわからん。
##公式チュートリアル チュートリアル
##ひとことで
Geometry(形)とMaterial(材質)からMesh(オブジェクト)を作って、
それをSceneに追加してCameraからのぞいた絵が、ブラウザにRenderingされる。
##より具体的に
立方体と緑色から緑色の立方体を作って、
それをシーンに追加してカメラからのぞいた絵が、ブラウザに表示される。
##コード ###Sceneを作る var scene = new THREE.Scene()
###Cameraを設置する var camera= new THREE.PerspectiveCamera(75, 16 / 9, 1, 500) camera.position.z = 50 ####THREE.PerspectiveCameraの引数
- 画角・・・FOV(frustum vertical field of view, in degrees)。75度。
- アスペクト比・・・縦横。16:9。
- 近く・・・カメラから見た一番近く。それ以前はカット。1。
- 遠く・・・カメラからみた一番遠く。それ以降はカット。500。
この1とか500にはPixelとかMeterみたいな単位があるわけではない。
座標系におけるただの数字。
###Rendererを作成する
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1920, 1080);
document.body.appendChild(renderer.domElement);
WebGLのRenderer(描画してくれるやつ)を設定する。
内部的にはgetContext('webgl')してる。
サイズを設定してDOM(canvas)をbodyにappendする。
###Mesh = Geometry + MaterialをSceneに追加
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
立方体のGeometry(形)をnewして、
緑色のMaterial(材質)をnewして、
それをもとにMesh(緑色の立方体)をnewする。
で、SceneにMeshを追加する。
まだレンダリングされてないのでなにも表示されない。
###Renderingする
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
60FPSでレンダリング(描画)を繰り返す。 requestAnimationFramとは
レンダリングを回しておけば、
cube.rotation.x += 0.1
とかすると状態の変更が反映される。