Three.jsで3Dデジタル時計を作成する

Three.js（r79）の3D文字を利用してデジタル時計を作成してみる。手順は以下の通り。

• フォントのロード
• 3D文字の作成
• 現在時刻の取得
• デジタル時計の作成

フォントのロード

Three.jsで3D文字を作成するには、まずフォントをロードする必要がある。使えるフォントファイルはフォントをJSON形式に変換したもの。Facetype.jsで変換できるが、Three.jsのダウンロードファイルに使えるフォントファイルがいくつか含まれているのでそれを使う。

Three.jsのホームページからダウンロードした圧縮ファイルを解凍して、\three.js-r79\examples\fonts\optimer_regular.typeface.jsonを適当な場所にコピーする。フォントのロードは以下のような感じ。

var loader = new THREE.FontLoader();
loader.load("optimer_regular.typeface.json", (function(font) {
 // オブジェクト作成などの処理を行う
 // fontでロードされたフォントを参照できる
}));

3D文字の作成

3D文字の作成には、上記でロードしたフォントとTHREE.TextGeometryでジオメトリを作成し、あとは通常のThree.jsと同様にメッシュを作成する。

  // 第1引数に作成する文字列を指定し、残りの引数にパラメータを設定する
  // font: 使用するフォント
  // size: オブジェクトサイズ
  // height: オブジェクトの奥行き
  // curveSegments: 曲線の滑らかさ
  // bevelThickness: 斜体の傾き度
  // bevelSize: アウトラインからどの程度傾けるか
  // bevelEnabled: 斜体にするかどうか
  var geometry = new THREE.TextGeometry(char, {
   font: font,
   size: size,
   height: 0.1,
   curveSegments: 15,
   bevelThickness: 10,
   bevelSize: 8,
   bevelEnabled: false
  } );

  // マテリアルの作成
  var material = new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 0.7});

  // オブジェクトの作成
  var mesh = new THREE.Mesh( geometry, material );

現在時刻の取得

Javascriptでは以下のようにして現在時刻を取得できる。

    // 現在時刻取得
  var now = new Date();
  // 時の取得
    var hour = now.getHours();
  // 分の取得
    var min = now.getMinutes();
  // 秒の取得
    var sec = now.getSeconds();

デジタル時計の作成

とりあえず思いついたのが、デジタル時計の桁ごとに0から9の数字オブジェクトを作成して非表示にし、現在時間の数字オブジェクトだけを表示させる方法。この方法で3Dデジタル時計用のオブジェクトを作成するクラスを作成した（GitHubで公開）ので、これを利用して実際に3Dデジタル時計を表示してみる。

以下のようなデジタル時計が表示される。

• サンプルの表示