【Three】レンダラーやシーン、ライトなど

普段webアプリケーション開発をしていますが、気分転換にグラフィカルなものをやってみようとコツコツthree.jsを触ってみて、学んだことをまとめていく。

CDN

CDNを使う場合は以下のサイトから

シーン

3Dオブジェクトや光源を置く場所。ステージのようなもの。

const scene = new THREE.Scene();

カメラ

シーン内の3Dオブジェクトを撮影するカメラ。どの視点から撮影するかなどを設定する。ほとんどの場合はTHREE.PerspectiveCameraが使われるらしい。

const camera = new THREE.PerspectiveCamera(45, 960 / 540);

レンダラー

カメラやライト、物体で設定した3Dモデルを画面に表示するためのもの。

いろいろ種類があるみたいですが「WebGLRenderer」が基本的なレンダラーっぽい。

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#myCanvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// シーンやカメラを設定
// const scene = ...
// const camera = ...

renderer.render(scene, camera);