教育機関向け活用例

4. 背景とアニメーションの基礎

このセクションでは、背景色の変更と、アニメーションの基本的な使い方を学びます。

背景色の変更

デフォルトでは、背景色は透明です。
Webページの基本色が白なので、これまでは背景が白く見えていました。
背景色を変更するには、次のようにscene.background に色を指定します。

scene.background = color(色)

例えば背景を黒にするには、次のように記述します。

index.html

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

scene.background = color("black")
controls.connect()
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.cube()

animate()

アニメーションの基礎

animateの引数で、アニメーションの処理を記述できます。

アニメーションしたいオブジェクトを変数に入れる

アニメーションしたいオブジェクトを変数に入れておくことで、アニメーション処理の中でそのオブジェクトを操作できます。

const myCube = create.cube()

ここで、myCube は変数名であり、自由に名前を付けられます (半角英字のみ)。

アニメーションする

animateの引数を次のようにします。

animate(({ delta, time }) => {
  // ここでアニメーション処理を記述
})

ここで、delta は前回のフレームからの経過時間(秒)、time はアニメーション開始からの経過時間(秒)です。
使用しない場合は省略できます。

例えば、次のように記述すると立方体がx軸周りに回転します。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
const cube = create.cube()
animate(({ delta }) => {
  cube.rotation.x += delta
})

オブジェクトの位置を変更する

オブジェクトの位置を変更するには、position.set を使います。
三角関数 (Math.sin, Math.cos) を使うと、オブジェクトを波打たせることができます。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
const cube = create.cube()
animate(({ delta, time }) => {
  cube.rotation.x += delta
  cube.rotation.y += delta
  cube.position.set(0, 0, Math.sin(time) * 2)
})