TweenMax.js+Three.js 3D数字掉落动效的倒计时动画

3D Countdown，本例可以学习如何在WebGL中使用自定义字体的三维文本。

webgl, clock, drop, number

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var con = console;
var end = new Date();
end.setDate(end.getDate() + 2);

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;

var lastSecond = null,
    lastArray = [];

var existing = [];

var frame = 0;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {
        clearInterval(timer);
        countdown.innerHTML = 'Event closed!';
        return;
    }

function pad(n) {
        return String((String(n).length === 1) ? "0" + n : n);
    }

var days = pad(Math.floor(distance / _day));
    var hours = pad(Math.floor((distance % _day) / _hour));
    var minutes = pad(Math.floor((distance % _hour) / _minute));
    var seconds = pad(Math.floor((distance % _minute) / _second));

if (lastSecond !== seconds) {
        // frame++;
        // if (frame < 50) return;

// countdown.innerHTML = days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + 'secs';

// var arr = (days + ":" + hours + ":" + minutes + ":" + seconds).split("");
        // var arr = (days + "" + hours + "" + minutes + "" + seconds).split("");
        var arr = [].concat(
            days.split("")
        ).concat("days").concat(
            hours.split("")
        ).concat("hrs").concat(
            minutes.split("")
        ).concat("mins").concat(
            seconds.split("")
        )
        var xPositions = [1, 1, 4, 1, 1, 3, 1, 1, 3.5, 1, 1];
        // arr = seconds.split("")
        // xPositions = [1,1];

if (xPositions.length !== arr.length) throw new Error("wrong length:" + xPositions.length + " v " + arr.length);

function drop(symbol, x) {
            con.log("drop", symbol, new Date().getTime());
            var mesh = symbol.mesh;
            TweenMax.fromTo(mesh.position, 0.3, {
                x: x,
                y: 15
            }, {
                y: 0,
                ease: Bounce.easeOut
            })
        }

var xp = -9;
        for (var i = 0, il = arr.length; i < il; i++) {
            var symbol = arr[i];

if (lastArray[i] !== arr[i]) {

if (existing[i]) {
                    remove(existing[i]);
                }

var symbol = getSymbol(symbol);
                drop(symbol, xp * 3);
                existing[i] = symbol;

}

lastArray[i] = arr[i];

xp += xPositions[i];

}

}
    lastSecond = seconds;

}

var sw = 800,
    sh = 300;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(25, sw / sh, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(sw, sh);
document.body.appendChild(renderer.domElement);

var group = new THREE.Object3D();
scene.add(group);

var light = new THREE.AmbientLight(0x202020); // soft white light
scene.add(light);

var pointLight = new THREE.PointLight(0xa70030);
pointLight.position.y = 50;
scene.add(pointLight);

var pointLight2 = new THREE.PointLight(0x600090);
pointLight2.position.y = 50;
scene.add(pointLight2);

var pointLight3 = new THREE.PointLight(0xf0f0f0);
pointLight3.position.y = 50;
pointLight3.position.z = 50;
scene.add(pointLight3);

camera.position.z = 60;
camera.position.y = 14;
camera.lookAt(new THREE.Vector3(0, 0, 0));

var text = new THREE.Mesh(geometry, material);
    /*  text.position.x = 1;
      text.position.y = -1;*/

return text;
}

var symbols = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    ":",
    "days",
    "hrs",
    "mins",
    "secs",
]
var meshes = {};

for (var n = 0; n < symbols.length; n++) {
    var str = symbols[n];
    meshes[str] = [];
    for (var i = 0; i < 6; i++) {
        var mesh = generateCharacter(str);
        meshes[str][i] = {
            chr: str,
            mesh: mesh,
            used: false
        };
        mesh.position.set(0, 20, 0);
        group.add(mesh);
    }

};

// group.add(meshes[0][4]);

function render(time) {
    // con.log(t)
    if (time > 200) showRemaining();
    // group.rotation.y = 0;

var t = time * 0.002;

pointLight.position.x = Math.sin(t) * 15;
    pointLight.position.z = Math.cos(t) * 15;
    pointLight2.position.x = -Math.sin(t * .9) * 15;
    pointLight2.position.z = -Math.cos(t * .9) * 15;

renderer.render(scene, camera);

// con.log(time);
    //if (time < 3000) 
    requestAnimationFrame(render);
};

render(0);

编译

CSS

HTML

3D Countdown，本例可以学习如何在WebGL中使用自定义字体的三维文本。

webgl, clock, drop, number

编辑器支持Emmet

快捷键

3D Countdown，本例可以学习如何在WebGL中使用自定义字体的三维文本。

webgl, clock, drop, number

使用Three.js和TweenMax构建扭动的3D橡皮圈动画

WebGL Three.js 3D十字架的毛发化动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：