Three.js：グループ化を用いて3D空間でアナログ時計を作る。

こんにちはタクゾウです。
今回はthee.jsの勉強でアナログ時計を作成したので紹介します。

3D空間でメッシュを回転させる時の処理の順番がわからない場合は、
別記事の「Three.js：回転の起点となる軸を変えたい場合はグループを使おう」を参考にしてください。

Three.js：回転の起点となる軸を変えたい場合はグループを使おう

Three.jsで作ったアナログ時計のDEMO
コード説明
まとめ

Three.jsで作ったアナログ時計のDEMO

実際にアナログ時計を作ったDEMOはこちらになります。

参考 Three.js clockThree.js clock

コード説明

秒針・分針・時針のメッシュを作成する記述

three.js の世界では「常に」回転が先に起こってしまうので、移動したものをグループに入れてからグループを回転させましょう。

javascript

// box seconds
geometry = new THREE.BoxGeometry(10.0, 0.1, 0.1);
box01 = new THREE.Mesh(geometry, materialWhite);
box01.position.x = 4;
box01.position.z = 0;
group01.add(box01); //秒針のメッシュをグループ1に入れる。

// box minutes
geometry = new THREE.BoxGeometry(10.0, 0.2, 0.2);
box02 = new THREE.Mesh(geometry, materialWhite);
box02.position.x = 4;
box02.position.z = 0;
group02.add(box02); //分針のメッシュをグループ2に入れる。

// box hours
geometry = new THREE.BoxGeometry(7.0, 0.4, 0.4);
box03 = new THREE.Mesh(geometry, materialWhite);
box03.position.x = 2.5;
box03.position.z = 0;
group03.add(box03); //時針のメッシュをグループ3に入れる。

// group
//回転をさせる時は、グループのrotationを変更する。
group01.rotation.y = 0;
group02.rotation.y = 0;
group03.rotation.y = 0;
scene.add(group01);//グループ1をシーンに入れる。
scene.add(group02);//グループ2をシーンに入れる。
scene.add(group03);//グループ3をシーンに入れる。

リアルタイムに時間を適応させる記述

「2π」が一周なので、2*Math.PIに現在時刻分の角度を掛けています。
setIntervalで一秒ごとにtimer関数を走らせ、リアルタイムに時間が更新される実装にしています。

javascript

//timer
function timer(){
  date = new Date();
  seconds = date.getSeconds();
  minutes = date.getMinutes();
  hours = date.getHours();
  // 秒針の角度
  secondsAngle = 2 * Math.PI / 360 * seconds * -6;
  // 分針の角度
  minutesAngle = 2 * Math.PI / 360 * minutes * -6;
  // 時針の角度
  hoursAngle = 2 * Math.PI / 360 * hours * -30;
}

//timerを一秒おきに実装
window.setInterval(
function(){
  timer();
},
1000);

レンダリング最中に時間を更新する記述

レンダリングするたびに、現在時刻の針の角度をメッシュに反映させる処理

javascript

// rendering
function render(){
  if(run){requestAnimationFrame(render);}

  //時間更新
  group01.rotation.y = secondsAngle;//秒針を反映
  group02.rotation.y = minutesAngle;//分針を反映
  group03.rotation.y = hoursAngle;//時針を反映

  renderer.render(scene, camera);
}