HTML5 WebGL很酷的文字3D烟化动画效果

Smoking Text Animatioin & Effects

gsap, three

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = init;

function init() {
    var root = new THREERoot({
        createCameraControls: false,
        fov: 60
    });
    root.renderer.setClearColor(0xffffff);
    root.renderer.setPixelRatio(window.devicePixelRatio || 1);
    root.camera.position.set(0, 0, 400);

var textAnimation = createTextAnimation();
    textAnimation.position.y = -40;
    root.scene.add(textAnimation);

createTweenScrubber(tl);
}

function createTextAnimation() {
    var geometry = generateTextGeometry('UP IN SMOKE', {
        size: 14,
        height: 0,
        font: 'droid sans',
        weight: 'bold',
        style: 'normal',
        bevelSize: 0.75,
        bevelThickness: 0.50,
        bevelEnabled: true,
        anchor: {
            x: 0.5,
            y: 0.0,
            z: 0.5
        }
    });

THREE.BAS.Utils.separateFaces(geometry);

return new TextAnimation(geometry);
}

function generateTextGeometry(text, params) {
    var geometry = new THREE.TextGeometry(text, params);

geometry.computeBoundingBox();

geometry.userData = {};
    geometry.userData.size = {
        width: geometry.boundingBox.max.x - geometry.boundingBox.min.x,
        height: geometry.boundingBox.max.y - geometry.boundingBox.min.y,
        depth: geometry.boundingBox.max.z - geometry.boundingBox.min.z
    };

var anchorX = geometry.userData.size.width * -params.anchor.x;
    var anchorY = geometry.userData.size.height * -params.anchor.y;
    var anchorZ = geometry.userData.size.depth * -params.anchor.z;
    var matrix = new THREE.Matrix4().makeTranslation(anchorX, anchorY, anchorZ);

geometry.applyMatrix(matrix);

return geometry;
}

////////////////////
// CLASSES
////////////////////

function TextAnimation(textGeometry) {
    var bufferGeometry = new THREE.BAS.ModelBufferGeometry(textGeometry);

var aAnimation = bufferGeometry.createAttribute('aAnimation', 2);
    var aCentroid = bufferGeometry.createAttribute('aCentroid', 3);
    var aControl0 = bufferGeometry.createAttribute('aControl0', 3);
    var aControl1 = bufferGeometry.createAttribute('aControl1', 3);
    var aEndPosition = bufferGeometry.createAttribute('aEndPosition', 3);

var faceCount = bufferGeometry.faceCount;
    var i, i2, i3, i4, v;

var size = textGeometry.userData.size;

var maxDelayX = 2.0;
    var maxDelayY = 0.25;
    var minDuration = 2;
    var maxDuration = 8;
    var stretch = 0.25;

this.animationDuration = maxDelayX + maxDelayY + maxDuration - 3;
    this._animationProgress = 0;

for (i = 0, i2 = 0, i3 = 0, i4 = 0; i < faceCount; i++, i2 += 6, i3 += 9, i4 += 12) {
        var face = textGeometry.faces[i];
        var centroid = THREE.BAS.Utils.computeCentroid(textGeometry, face);

// animation
        var delayX = Math.max(0, (centroid.x / size.width) * maxDelayX);
        var delayY = Math.max(0, (1.0 - (centroid.y / size.height)) * maxDelayY);
        var duration = THREE.Math.randFloat(minDuration, maxDuration);

for (v = 0; v < 6; v += 2) {
            aAnimation.array[i2 + v] = delayX + delayY + Math.random() * stretch;
            aAnimation.array[i2 + v + 1] = duration;
        }

// centroid
        for (v = 0; v < 9; v += 3) {
            aCentroid.array[i3 + v] = centroid.x;
            aCentroid.array[i3 + v + 1] = centroid.y;
            aCentroid.array[i3 + v + 2] = centroid.z;
        }

// ctrl
        var c0x = centroid.x + THREE.Math.randFloat(40, 120);
        var c0y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0);
        var c0z = THREE.Math.randFloatSpread(120);

var c1x = centroid.x + THREE.Math.randFloat(80, 120) * -1;
        var c1y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0);
        var c1z = THREE.Math.randFloatSpread(120);

for (v = 0; v < 9; v += 3) {
            aControl0.array[i3 + v] = c0x;
            aControl0.array[i3 + v + 1] = c0y;
            aControl0.array[i3 + v + 2] = c0z;

aControl1.array[i3 + v] = c1x;
            aControl1.array[i3 + v + 1] = c1y;
            aControl1.array[i3 + v + 2] = c1z;
        }

// end position
        var x, y, z;

x = centroid.x + THREE.Math.randFloatSpread(120);
        y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0);
        z = THREE.Math.randFloat(-20, 20);

for (v = 0; v < 9; v += 3) {
            aEndPosition.array[i3 + v] = x;
            aEndPosition.array[i3 + v + 1] = y;
            aEndPosition.array[i3 + v + 2] = z;
        }
    }

var material = new THREE.BAS.BasicAnimationMaterial({
        shading: THREE.FlatShading,
        side: THREE.DoubleSide,
        transparent: true,
        uniforms: {
            uTime: {
                type: 'f',
                value: 0
            }
        },
        shaderFunctions: [
            THREE.BAS.ShaderChunk['cubic_bezier'],
            THREE.BAS.ShaderChunk['ease_out_cubic']
        ],
        shaderParameters: [
            'uniform float uTime;',
            'attribute vec2 aAnimation;',
            'attribute vec3 aCentroid;',
            'attribute vec3 aControl0;',
            'attribute vec3 aControl1;',
            'attribute vec3 aEndPosition;'
        ],
        shaderVertexInit: [
            'float tDelay = aAnimation.x;',
            'float tDuration = aAnimation.y;',
            'float tTime = clamp(uTime - tDelay, 0.0, tDuration);',
            'float tProgress =  ease(tTime, 0.0, 1.0, tDuration);'
            //'float tProgress = tTime / tDuration;'
        ],
        shaderTransformPosition: [
            'vec3 tPosition = transformed - aCentroid;',
            'tPosition *= 1.0 - tProgress;',
            'tPosition += aCentroid;',
            'tPosition += cubicBezier(tPosition, aControl0, aControl1, aEndPosition, tProgress);',
            'transformed = tPosition;'

// 'vec3 tPosition = transformed;',
            // 'tPosition *= 1.0 - tProgress;',
            // 'tPosition += cubicBezier(transformed, aControl0, aControl1, aEndPosition, tProgress);',
            // 'tPosition += mix(transformed, aEndPosition, tProgress);',
            // 'transformed = tPosition;'
        ]
    }, {
        diffuse: 0x000000
    });

THREE.Mesh.call(this, bufferGeometry, material);

this.frustumCulled = false;
}
TextAnimation.prototype = Object.create(THREE.Mesh.prototype);
TextAnimation.prototype.constructor = TextAnimation;

Object.defineProperty(TextAnimation.prototype, 'animationProgress', {
    get: function() {
        return this._animationProgress;
    },
    set: function(v) {
        this._animationProgress = v;
        this.material.uniforms['uTime'].value = this.animationDuration * v;
    }
});

function THREERoot(params) {
    params = utils.extend({
        antialias: true,

fov: 60,
        zNear: 1,
        zFar: 10000,

createCameraControls: true
    }, params);

this.renderer = new THREE.WebGLRenderer({
        antialias: params.antialias
    });
    document.getElementById('three-container').appendChild(this.renderer.domElement);

this.camera = new THREE.PerspectiveCamera(
        params.fov,
        window.innerWidth / window.innerHeight,
        params.zNear,
        params.zfar
    );

this.scene = new THREE.Scene();

if (params.createCameraControls) {
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    }

this.resize = this.resize.bind(this);
    this.tick = this.tick.bind(this);

this.resize();
    this.tick();

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

////////////////////
// UTILS
////////////////////

var utils = {
    extend: function(dst, src) {
        for (var key in src) {
            dst[key] = src[key];
        }

return dst;
    },
    randSign: function() {
        return Math.random() > 0.5 ? 1 : -1;
    }
};

function createTweenScrubber(tween, seekSpeed) {
    seekSpeed = seekSpeed || 0.001;

function stop() {
        TweenMax.to(tween, 2, {
            timeScale: 0
        });
    }

function resume() {
        TweenMax.to(tween, 2, {
            timeScale: 1
        });
    }

function seek(dx) {
        var progress = tween.progress();
        var p = THREE.Math.clamp((progress + (dx * seekSpeed)), 0, 1);

tween.progress(p);
    }

var _cx = 0;

// desktop
    var mouseDown = false;
    document.body.style.cursor = 'pointer';

window.addEventListener('mousedown', function(e) {
        mouseDown = true;
        document.body.style.cursor = 'ew-resize';
        _cx = e.clientX;
        stop();
    });
    window.addEventListener('mouseup', function(e) {
        mouseDown = false;
        document.body.style.cursor = 'pointer';
        resume();
    });
    window.addEventListener('mousemove', function(e) {
        if (mouseDown === true) {
            var cx = e.clientX;
            var dx = cx - _cx;
            _cx = cx;

seek(dx);
        }
    });
    // mobile
    window.addEventListener('touchstart', function(e) {
        _cx = e.touches[0].clientX;
        stop();
        e.preventDefault();
    });
    window.addEventListener('touchend', function(e) {
        resume();
        e.preventDefault();
    });
    window.addEventListener('touchmove', function(e) {
        var cx = e.touches[0].clientX;
        var dx = cx - _cx;
        _cx = cx;

seek(dx);
        e.preventDefault();
    });
}

编译

CSS

HTML

Smoking Text Animatioin & Effects

gsap, three

编辑器支持Emmet

快捷键

Smoking Text Animatioin & Effects

gsap, three

HTML5 WebGL 超酷的3D版沙龙曼蛇游戏原型代码

HTML5 WebGL数学的艺术 - 曼荼罗云图动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：