教育機関向け活用例

2. カメラコントロールとガイド

このセクションでは、カメラの簡単な操作方法と、座標をわかりやすくするためのガイドの表示方法を学びます。

カメラコントロール

controls を使うことで、ユーザのマウス操作やタッチ操作によってカメラを操作することができます。

controls を利用するには、1行目の使うものリストに controls を追加し、controls.connect() を記述するだけです。

index.html

const { camera, create, animate, controls } = init();

controls.connect()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.cube()

animate()

これだけで、マウスやタッチ操作によってカメラを操作することができます。
実際に試してみましょう。

また、マウスホイール (スマホならピンチイン・アウト) でズームイン・アウトができます。
さらに、マウス右ドラッグ (スマホなら2本指でスワイプ) でカメラ位置を並行に移動できます。

カメラの自動回転

カメラを自動で回転させることもできます。

controls.autoRotate = true
controls.autoRotateSpeed = 10

カメラはy軸を中心に自動で回転します。
カメラの手動操作をONにするかどうかに関わらず利用できます。

index.html

const { camera, create, animate, controls } = init();

controls.autoRotate = true
controls.autoRotateSpeed = 10
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.cube()

animate()

ガイドの表示

3D 空間上で座標をわかりやすくするために、ガイドを表示することができます。
ガイドの表示には、helper を使います。

helper.grid()

で、y = 0 のx-z 面にグリッドを表示することができます。

helper.axes()

軸を表示することができます。

index.html

const { camera, create, animate, controls, helper } = init();

controls.autoRotate = true
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.cube()

animate()