Open7

WebGL と Three.js のお勉強

yuyao17yuyao17

WebGLは2Dや3Dをブラウザ上でレンダリング可能としてくれるJSネイティブAPI

CPUではなくGPUを駆使してレンダリングする。だから早い

でも四角の形を作るだけでも100行ぐらいコードを書く必要あり無理ゲー(その上ライティングやアニメーションしようとしたらやばい)

Three.js はそれを扱いやすいようにしてくれるラッパーみたいなもん

yuyao17yuyao17

3D 環境に置いて必要なもの:

  • シーン(映画でいうセットみたいな)
  • オブジェクト(映画でいう役者)
  • カメラ(そのまんま)
  • Renderer(描画するため)
yuyao17yuyao17

オブジェクトとは

  • 実際は Mesh というオブジェクトの種類
  • 簡単にいうとそのオブジェクトの形(geometry) + 質感(material)を定義したもの

まずは四角形のベーシックボックスを作ってみる

// シーンの作成
const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(1, 1, 1) // width, height, depth
const material = new THREE.MeshBasicMaterial({ color: 'red' }) // 色指定

const cube = new THREE.Mesh(geometry, material)

// ちなみにこういう書き方もできる

const cube = new THREE.Mesh(
   new THREE.BoxGeometry(1, 1, 1),
   new THREE.MeshBasicMaterial({ color: 'red' })
)

// 必ずシーンに追加することを忘れずに
scene.add(cube)
yuyao17yuyao17

カメラとは

  • オブジェクトをみるPOV
  • Three.js には色んな種類のカメラがあるが、普通は PerspectiveCamera なのかな。docs にも一番よく使われるやつって書いてるし
  • FOV(field of view)この値は高ければ高いほど上下で見える場所が広がるけど高すぎたら周りがぼやけたり変に伸びたりする。
  • aspect ratio はほとんどの場合 width / height

const sizes = {
   width: 800,
   height: 600
}
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height) // FOV, aspect ratio

// 必ずシーンに追加することを忘れずに
scene.add(camera)
yuyao17yuyao17

Renderer とは

  • そのまんまのことをする(描画)
<canvas class="webgl"></canvas>
const canvas = document.querySelector(".webgl");

const renderer = new THREE.WebGLRenderer({ canvas });

renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);

赤いボックスが見当たらない

yuyao17yuyao17

あーカメラのポジションとか指定してなかったらかか(デフォだと同じ場所なので、ボックスの中にカメラがある感じ)

カメラの位置を変えよう

const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height);
camera.position.z = 3;

scene.add(camera);

positionの他にもscaleとrotationが各オブジェクトにある(camera, mesh)

なぜならそいつらは全員Object3Dクラスを継承してるから