#はじめに

こんな感じのやつを電子工作で作ってみたくなって、イメージを沸かせるためにjavascriptで書いてみました。
自分用のメモ代わりの記事です。
ちなみに電子工作全くやったことないです。
three.jsを使っています。three.js初めて使いました。
#ソース
書きなぐっています。すいません。
あーコロン動かすの忘れた。まあいいや。おやすみなさい。
<html>
<head>
<meta charset="utf-8" />
<style>
body {
    margin: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script>
// ページの読み込みを待つ
$(e => {
    // サイズを指定
    const width = 960 / 2;
    const height = 540 / 2;

    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer({
      canvas: document.querySelector('#myCanvas')
    });
    renderer.setSize(width, height);

    // シーンを作成
    const scene = new THREE.Scene();        

    // カメラを作成
    const camera = new THREE.PerspectiveCamera(
      45,
      width / height,
      1,
      10000
    );
    camera.position.set(0, 200, 1000);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    // カメラを作成
    //const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2);

    // コンテナーを作成
    const container = new THREE.Object3D();
    scene.add(container);

    // マテリアルを作成
    const material = new THREE.MeshStandardMaterial({
      color: 0xcccccc,
      side: THREE.DoubleSide,
      flatShading: true,
    });

    // 平行光源を作成
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);
    // 環境光を作成
    const ambientLight = new THREE.AmbientLight(0x999999);
    scene.add(ambientLight);

    // アニメーション用の回転角度
    let rotXShift = 0.0025;
    let rotYShift = 0.01;

    const numDefs = [
        /* 0 */ [ 0, 1, 2, 4, 5, 6 ],
        /* 1 */ [ 2, 5 ],
        /* 2 */ [ 0, 2, 3, 4, 6 ],
        /* 3 */ [ 0, 2, 3, 5, 6 ],
        /* 4 */ [ 1, 2, 3, 5 ],
        /* 5 */ [ 0, 1, 3, 5, 6 ],
        /* 6 */ [ 0, 1, 3, 4, 5, 6 ],
        /* 7 */ [ 0, 2, 5 ],
        /* 8 */ [ 0, 1, 2, 3, 4, 5, 6 ],
        /* 9 */ [ 0, 1, 2, 3, 5, 6 ],
    ];

    const meshes = [];    

    createClock();

    const shifts = [];
    for(let i = 0; i < meshes.length; i += 1) {
        shifts.push([ 0, 0, 0, 0, 0, 0, 0 ]);
    }    

    tick();

    function updateShifts() {
        const time = getCurrentTime();
        initShifts();
        for(let i = 0; i < shifts.length; i += 1) {
            const shift = shifts[i];
            const t = parseInt(time[i]);
            const def = numDefs[t];
            def.forEach(n => {
                shift[n] = 1;
            });
        }
    }

    function initShifts() {
        for(let i = 0; i < shifts.length; i += 1) {
            for(let j = 0; j < 7; j += 1) {
                shifts[i][j] = -1;
            }
        }
    }

    function createClock() {
        const a = 20,
            b = 60, 
            c = 100,
            s = 5,      // 数字の要素の幅
            ss = 10,    // 数字間の幅
            cr = 20,    // :(コロン)の半径
            cbs = 60;   // コロンの上下のスペース
            cs = 20;    // コロンと数値のスペース

        // 時
        meshes[0] = createNumber(-a - ss * 0.5
             - (a + ss + a + s + a + b + a + s + a + cs + cr * 2 + cs + a + s + a + b + a + s), a, b, c, s, ss);
        meshes[1] = createNumber(a + ss * 0.5 + s + 2 * a + b + s
            - (a + ss + a + s + a + b + a + s + a + cs + cr * 2 + cs + a + s + a + b + a + s), a, b, c, s, ss);

        // 分
        meshes[2] = createNumber(-a - ss * 0.5, a, b, c, s, ss);
        meshes[3] = createNumber(a + ss * 0.5 + s + 2 * a + b + s, a, b, c, s, ss);  

        // 秒
        meshes[4] = createNumber(-a - ss * 0.5
             + a + ss + a + s + a + b + a + s + a + cs + cr * 2 + cs + a + s + a + b + a + s, a, b, c, s, ss);
        meshes[5] = createNumber(a + ss * 0.5 + s + 2 * a + b + s
            + a + ss + a + s + a + b + a + s + a + cs + cr * 2 + cs + a + s + a + b + a + s, a, b, c, s, ss);

        // 時と分のコロン
        createColon(-a - ss * 0.5, a, b, c, s, ss, cr, cbs, cs);  

        // 分と秒のコロン    
        createColon(-a - ss * 0.5
         + cr + cs + a + s + a + b + a + s + a + ss + a + s + a + b + a + s + a + cs + cr , a, b, c, s, ss, cr, cbs, cs); 
    }    

    //先頭ゼロ付加
    function padZero(num) {
        var result;
        if (num < 10) {
            result = "0" + num;
        } else {
            result = "" + num;
        }
        return result;
    }

    function getCurrentTime() {
        var now = new Date();
        return padZero(now.getHours()) + padZero(now.getMinutes()) + padZero(now.getSeconds());
    }

    // コロンを作成
    function createColon(shiftX, a, b, c, s, ss, cr, cbs, cs) {

        const ret = [];
        let geometry, mesh;
        geometry = new THREE.CylinderGeometry(cr, cr, c, 8);  
        mesh = new THREE.Mesh(geometry, material); 
        mesh.position.x = shiftX - 2 * a - b - s * 2 - a - cs - cr;
        mesh.position.y = cbs / 2;
        mesh.position.z = 0;
        mesh.rotation.x = Math.PI * 0.5;
        container.add(mesh);
        ret.push(mesh);

        geometry = new THREE.CylinderGeometry(cr, cr, c, 8);  
        mesh = new THREE.Mesh(geometry, material); 
        mesh.position.x = shiftX - 2 * a - b - s * 2 - a - cs - cr;
        mesh.position.y = -cbs / 2;
        mesh.position.z = 0;
        mesh.rotation.x = Math.PI * 0.5;
        container.add(mesh);
        ret.push(mesh);

        return ret;
    }

    // 数字を作成する
    function createNumber(shiftX, a, b, c, s, ss) {
        return [
            createHexGeometry({x: shiftX - b * 0.5 - a - s, y: 2 * a + b + s, z: 0 }, a, b, c),
            createHexGeometry({x: shiftX - 2 * a - b - s * 2 , y: (2 * a + b + s) * 0.5, z: 0 }, a, b, c, 1),
            createHexGeometry({x: shiftX, y: (2 * a + b + s) * 0.5, z: 0 }, a, b, c, 1),
            createHexGeometry({x: shiftX - b * 0.5 - a - s, y: 0, z: 0 }, a, b, c),
            createHexGeometry({x: shiftX - 2 * a - b - s * 2 , y: -(2 * a + b + s) * 0.5, z: 0 }, a, b, c, 1),
            createHexGeometry({x: shiftX, y: -(2 * a + b + s) * 0.5, z: 0 }, a, b, c, 1),
            createHexGeometry({x: shiftX - b * 0.5 - a - s, y: -(2 * a + b + s), z: 0 }, a, b, c),
        ];
    }

    // 六角柱を作成する
    function createHexGeometry(pos, a, b, c, rot) {
        // 六角柱の蓋を定義する
        const vertices = [
            // 上面の蓋
            new THREE.Vector3(a + b / 2,    0,      c / 2),     // #0
            new THREE.Vector3(b / 2,        a,      c / 2),     // #1
            new THREE.Vector3(-b / 2,        a,      c / 2),    // #2
            new THREE.Vector3(-a - b / 2,    0,      c / 2),    // #3
            new THREE.Vector3(-b / 2,        -a,      c / 2),   // #4
            new THREE.Vector3(b / 2,        -a,      c / 2),    // #5
            new THREE.Vector3(a + b / 2,    0,      -c / 2),    // #6
            new THREE.Vector3(b / 2,        a,      -c / 2),    // #7
            new THREE.Vector3(-b / 2,        a,     -c / 2),    // #8
            new THREE.Vector3(-a - b / 2,    0,      -c / 2),   // #9
            new THREE.Vector3(-b / 2,        -a,      -c / 2),  // #10
            new THREE.Vector3(b / 2,        -a,      -c / 2),   // #11
        ];

        const faces = [
            new THREE.Face3(0, 1, 5), // 上面
            new THREE.Face3(1, 2, 5), // 上面
            new THREE.Face3(2, 4, 5), // 上面
            new THREE.Face3(2, 3, 4), // 上面
            new THREE.Face3(6, 11, 7), // 下面
            new THREE.Face3(7, 11, 8), // 下面
            new THREE.Face3(8, 11, 10), // 下面
            new THREE.Face3(8, 10, 9), // 下面
            new THREE.Face3(0, 6, 7), // 側面 
            new THREE.Face3(7, 1, 0), // 側面
            new THREE.Face3(1, 7, 8), // 側面 
            new THREE.Face3(8, 2, 1), // 側面
            new THREE.Face3(2, 8, 9), // 側面 
            new THREE.Face3(9, 3, 2), // 側面
            new THREE.Face3(3, 9, 10), // 側面 
            new THREE.Face3(10, 4, 3), // 側面
            new THREE.Face3(4, 10, 11), // 側面 
            new THREE.Face3(11, 5, 4), // 側面
            new THREE.Face3(5, 11, 6), // 側面 
            new THREE.Face3(6, 0, 5), // 側面 
        ];

        const geometry = new THREE.Geometry();
        vertices.forEach(v => geometry.vertices.push(v));
        faces.forEach(f => geometry.faces.push(f));
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = pos.x;
        mesh.position.y = pos.y;
        mesh.position.z = pos.z;
        if(rot) {
            mesh.rotation.z = Math.PI * 0.5;
        }
        container.add(mesh);
        return mesh;
    }    

    // 毎フレーム時に実行されるループイベントです
    function tick() {

        // 移動情報取得
        updateShifts();

        // 数字を動かす
        for(let i = 0; i < meshes.length; i += 1) {
            const shift = shifts[i];
            for(j = 0; j < 7; j += 1) {
                const delta = shift[j];
                meshes[i][j].position.z += 5 * delta;
                if(meshes[i][j].position.z > 50) {
                    meshes[i][j].position.z = 50;
                } else if(meshes[i][j].position.z < -50) {
                    meshes[i][j].position.z = -50;
                }
            }
        }

        // コンテナを回転させる
        container.rotation.x += rotXShift;
        container.rotation.y += rotYShift;
        
        if(container.rotation.x >= Math.PI * 0.2
            || container.rotation.x <= -Math.PI * 0.2) {
            rotXShift *= -1;
        }
        if(container.rotation.y >= Math.PI * 0.2 || 
            container.rotation.y <= -Math.PI * 0.2) {
            rotYShift *= -1;
        }

        // レンダリング
        renderer.render(scene, camera);

        requestAnimationFrame(tick);
    }
});
</script>
</head>
<body>
    <canvas id="myCanvas"></canvas>
</body>
</html>