こんにちはタクゾウです。
今回はthee.jsの勉強でアナログ時計を作成したので紹介します。
3D空間でメッシュを回転させる時の処理の順番がわからない場合は、
別記事の「Three.js:回転の起点となる軸を変えたい場合はグループを使おう」を参考にしてください。

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);
}
まとめ
今回はシンプルな時計にしましたが、
マテリアルや、ジオメトリーを変更することで面白い演出ができると思います。
コメントを残す