RX100で撮り歩くブログ

RX100で撮った写真を中心によりよい生活を目指すブログ

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

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

CDN

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

cdnjs.com

シーン

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ライブラリ

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

  • 作者:Jos Dirksen
  • 発売日: 2016/07/23
  • メディア: 単行本(ソフトカバー)

参考URL

ics.media

qiita.com

qiita.com