绘制一个简单的液晶时钟模型表面纹理


本文介绍的是如何在Three.js中为一个拆分好uv的3D液晶时钟模型表面增加显示时间的表盘。主要用到的是Canvas以及Date相关函数,用到了Moment库。

代码

canvas/time_canvas.html

该需求其实很简单,在canvas上对应的地方绘制对应的内容即可,必须保证贴图在3D模型上能够正常显示。

(function () {
    var canvasDOM=document.getElementById('canvas');
    canvasDOM.width=1024;
    canvasDOM.height=1024;
    var c = canvasDOM.getContext('2d');
    time();
    function time() {
        c.clearRect = (0, 0, canvasDOM.width, canvasDOM.height);
        c.fillStyle = 'rgb(38,38,38)';
        c.fillRect(0, 0, canvasDOM.width, canvasDOM.height);
        c.textAlign = 'center';
        c.fillStyle = 'rgb(0,255,242)';
        c.font = '110px Bahnschrift';
        c.fillText(moment().format('YYYY-MM-DD'), 512, 730);

        c.font = '220px Bahnschrift';
        c.fillText(moment().format('HH:mm:ss'), 512, 940);
        canvasDOM.toDataURL("image/jpeg", 0.5);

        requestAnimationFrame(time)
    }
})()

评论