Three.js 实验：时钟背景烟雾缭绕时光流淌特效

Clock with shader。感觉像是中间被点燃的纸张，从燃烧的洞口散发出浓浓的黑烟。

smoke,clock

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2591
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// --------------------------

var width, height, prevTime;
var velArr;
var xPosArr;

var isText = false;

var totalWidth = 0;
var canvas = document.getElementById('c');

var canvasTexture;
var textureCanvas = document.createElement("canvas");
textureCanvas.width = window.innerWidth;
textureCanvas.height = window.innerHeight;
var textureCtx = textureCanvas.getContext("2d");

var camera, scene, renderer;
var uniforms;

width = window.innerWidth;
height = window.innerHeight;

canvas.width = width;
canvas.height = height;

var col = {
    bl: 100
};
var tl = new TimelineLite();
tl.to(col, 2, {
    bl: 200,
    onComplete: onComplete1
});

function onComplete1() {
    tl.to(col, 2, {
        bl: 100,
        onComplete: onComplete2,
        delay: .5
    });
}

function onComplete2() {
    tl.to(col, 2, {
        bl: 200,
        onComplete: onComplete1,
        delay: .5
    });
}

// ================

init();
loop();

function init() {

setCanvasTexture();
    setText();

camera = new THREE.Camera();
    camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneGeometry(2, 2);

uniforms = {
        canvasSource: {
            type: 't',
            value: canvasTexture
        },
        time: {
            type: "f",
            value: 1.0
        },
        resolution: {
            type: "v2",
            value: new THREE.Vector2()
        }
    };

var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

renderer = new THREE.WebGLRenderer({
        canvas: canvas
    });
    uniforms.resolution.value.x = window.innerWidth;
    uniforms.resolution.value.y = window.innerHeight;

renderer.setSize(window.innerWidth, window.innerHeight);

}

function loop() {
    uniforms.time.value += 0.05;
    setText();

renderer.render(scene, camera);

requestAnimationFrame(loop);
}

function setText() {

textureCtx.fillStyle = "#fff";
    textureCtx.fillRect(0, 0, width, height);

/*
     yoCtx.fillStyle = "#000000";
     yoCtx.fillRect(width/4, height/4, width/2, height/4);
     */
    var date = new Date();
    var curHour = date.getHours();
    var curHourStr = curHour < 10 ? "0" + curHour : curHour;
    var curMin = date.getMinutes();
    var curMinStr = curMin < 10 ? "0" + curMin : curMin;
    var curSec = date.getSeconds();
    var curSecStr = curSec < 10 ? "0" + curSec : curSec;
    var curTime = curHourStr + ":" + curMinStr + ":" + curSecStr;

var textLeft;
    var textTop;
    var xPos, yPos;
    textureCtx.font = "Bold 80px Helvetica";

var textWidth = textureCtx.measureText(curTime);
    var textExtraWidth = textWidth.width * 1.2;

var extraHeight = 80;

if (!velArr) {
        velArr = [];
        for (var yy = 0; yy < height / extraHeight + 1; yy++) {
            velArr[yy] = -Math.random() - .5;
        }

xPosArr = [];

for (var yy = 0; yy < height / extraHeight + 1; yy++) {
            xPosArr[yy] = [];
            for (var xx = 0; xx < width / textExtraWidth + 2; xx++) {
                xPos = textExtraWidth * xx + Math.random() * 10 - 5 + velArr[yy];
                xPosArr[yy][xx] = xPos;

}
        }

totalWidth += parseInt(width / textExtraWidth + 3) * textExtraWidth;
    }

var colNum = parseInt(col.bl)
    var colRgb = "rgb(" + colNum + ", " + colNum + ", " + colNum + ")";
    textureCtx.fillStyle = colRgb;

for (var yy = 0; yy < height / extraHeight + 1; yy++) {

for (var xx = 0; xx < width / textExtraWidth + 2; xx++) {

textureCtx.font = "Bold 80px Helvetica";

xPosArr[yy][xx] += velArr[yy];
            if (xPosArr[yy][xx] < -textExtraWidth) xPosArr[yy][xx] += totalWidth;

yPos = extraHeight * yy;

//var fontNum = parseInt(75 + 10 *Math.random());

//yoCtx.font = "Bold 80px Arial";
            textureCtx.save();
            textureCtx.translate(xPosArr[yy][xx], yPos);

textureCtx.fillText(curTime, 0, 0);
            textureCtx.restore();
        }

}

if (canvasTexture) canvasTexture.needsUpdate = true;
}

function setCanvasTexture() {
    canvasTexture = new THREE.Texture(textureCanvas);

canvasTexture.magFilter = THREE.NearestFilter;
    canvasTexture.needsUpdate = true;
}

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

编译

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
html {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
q,
blockquote {
    quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none;
}
a img {
    border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
body {
    overflow: hidden;
}
canvas {
    width: 100%;
    height: 100%;
}

HTML

void main()	{
        vUv = uv;

gl_Position = vec4( position, 1.0 );

}

</script>

void main()	{

vec2 sp = gl_FragCoord.xy / resolution.xy - vec2(0.5, 0.5);

float col = texture2D(canvasSource, vUv).r;
        //vec2 sp = vec2(texture2D(canvasSource, gl_FragCoord).r, texture2D(canvasSource, gl_FragCoord).g);
        vec2 p = (0.8 * 0.8 *sp) * 12.0 - vec2(0.0);
        vec2 i = p;
        float c = 1.0;

float inten = 1.1;

for(int n = 0; n < 18; n++){
            float t = time * (1.0 - (3.0 / float(n + 7)));
            i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
            c += 11.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));
        }

c /= float(20);
        c = 1.8 - sqrt(c);
        //c *= .18;

gl_FragColor = vec4(vec3(c*c*col) , 1.0) * vec4(0.0, 0.5, 0.9, 1.0);
    }

</script>

Clock with shader。感觉像是中间被点燃的纸张，从燃烧的洞口散发出浓浓的黑烟。

smoke,clock

编辑器支持Emmet

快捷键

Clock with shader。感觉像是中间被点燃的纸张，从燃烧的洞口散发出浓浓的黑烟。

smoke,clock

Three.js 文本特效 - 透明烟雾背景

WebGL Three.js三维时钟的水中倒影动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：