普段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);
参考書

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ
- 作者:Jos Dirksen
- 発売日: 2016/07/23
- メディア: 単行本(ソフトカバー)