WebGL Three.js构建3D符号破碎散落动画特效

使用粒子构建的加号模型，点击触发粒子重力掉落动画

webgl, symbol, particle, gravity

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function THREERoot(params) {
    // defaults
    params = Object.assign({
        container: '#three-container',
        fov: 60,
        zNear: 1,
        zFar: 10000,
        createCameraControls: true,
        autoStart: true,
        pixelRatio: window.devicePixelRatio,
        antialias: window.devicePixelRatio === 1,
        alpha: false
    }, params);

// maps and arrays
    this.updateCallbacks = [];
    this.resizeCallbacks = [];
    this.objects = {};

// renderer
    this.renderer = new THREE.WebGLRenderer({
        antialias: params.antialias,
        alpha: params.alpha
    });
    this.renderer.setPixelRatio(params.pixelRatio);

// container
    this.container = typeof params.container === 'string' ? document.querySelector(params.container) : params.container;
    this.container.appendChild(this.renderer.domElement);

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

// scene
    this.scene = new THREE.Scene();

// resize handling
    this.resize = this.resize.bind(this);
    this.resize();
    window.addEventListener('resize', this.resize, false);

// tick / update / render
    this.tick = this.tick.bind(this);
    params.autoStart && this.tick();

// optional camera controls
    params.createCameraControls && this.createOrbitControls();
}
THREERoot.prototype = {
    createOrbitControls: function createOrbitControls() {
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        this.addUpdateCallback(this.controls.update.bind(this.controls));
    },
    start: function start() {
        this.tick();
    },
    addUpdateCallback: function addUpdateCallback(callback) {
        this.updateCallbacks.push(callback);
    },
    addResizeCallback: function addResizeCallback(callback) {
        this.resizeCallbacks.push(callback);
    },
    add: function add(object, key) {
        key && (this.objects[key] = object);
        this.scene.add(object);
    },
    addTo: function addTo(object, parentKey, key) {
        key && (this.objects[key] = object);
        this.get(parentKey).add(object);
    },
    get: function get(key) {
        return this.objects[key];
    },
    remove: function remove(o) {
        var object;

if (typeof o === 'string') {
            object = this.objects[o];
        } else {
            object = o;
        }

if (object) {
            object.parent.remove(object);
            delete this.objects[o];
        }
    },
    tick: function tick() {
        this.update();
        this.render();
        requestAnimationFrame(this.tick);
    },
    update: function update() {
        this.updateCallbacks.forEach(function(callback) {
            callback();
        });
    },
    render: function render() {
        this.renderer.render(this.scene, this.camera);
    },
    resize: function resize() {
        var width = window.innerWidth;
        var height = window.innerHeight;

this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();

this.renderer.setSize(width, height);
        this.resizeCallbacks.forEach(function(callback) {
            callback();
        });
    },
    initPostProcessing: function initPostProcessing(passes) {
        var size = this.renderer.getSize();
        var pixelRatio = this.renderer.getPixelRatio();
        size.width *= pixelRatio;
        size.height *= pixelRatio;

var composer = this.composer = new THREE.EffectComposer(this.renderer, new THREE.WebGLRenderTarget(size.width, size.height, {
            minFilter: THREE.LinearFilter,
            magFilter: THREE.LinearFilter,
            format: THREE.RGBAFormat,
            stencilBuffer: false
        }));

var renderPass = new THREE.RenderPass(this.scene, this.camera);
        this.composer.addPass(renderPass);

for (var i = 0; i < passes.length; i++) {
            if (window.CP.shouldStopExecution(1)) {
                break;
            }
            var pass = passes[i];
            pass.renderToScreen = i === passes.length - 1;
            this.composer.addPass(pass);
        }
        window.CP.exitedLoop(1);

this.renderer.autoClear = false;
        this.render = function() {
            this.renderer.clear();
            this.composer.render();
        }.bind(this);

this.addResizeCallback(function() {
            var width = window.innerWidth;
            var height = window.innerHeight;

composer.setSize(width * pixelRatio, height * pixelRatio);
        }.bind(this));
    }
};
7;

function Animation(params) {
    var prefabRadius = 0.05;
    var plusPositions = params.positions;
    var prefab = new THREE.SphereGeometry(prefabRadius, 4, 3);
    var geometry = new BAS.PrefabBufferGeometry(prefab, plusPositions.length);

geometry.computeVertexNormals();

var maxDuration = 2.0;
    geometry.createAttribute('anim', 2, function(data, i) {
        var start = plusPositions[i];

data[0] = 0.0;
        data[1] = THREE.Math.mapLinear(start.y, 0, 14, 0, maxDuration) * THREE.Math.randFloat(0.5, 1.0);
    });

geometry.createAttribute('startPosition', 3, function(data, i) {
        plusPositions[i].toArray(data);
    });

var spread = 2;
    geometry.createAttribute('endPosition', 3, function(data, i) {
        var start = plusPositions[i];
        var targetY = void 0;

var length = Math.sqrt(start.x * start.x + start.z * start.z);

if (length <= 1) {
            targetY = prefabRadius * (0.5 + (1 - length) * 4.0);
        } else {
            targetY = prefabRadius * 0.5;
        }

data[0] = start.x + THREE.Math.randFloatSpread(spread);
        data[1] = targetY;
        data[2] = start.z + THREE.Math.randFloatSpread(spread);
    });

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

this.customDepthMaterial = BAS.Utils.createDepthAnimationMaterial(material);
}

Animation.prototype = Object.create(THREE.Mesh.prototype);
Animation.prototype.constructor = Animation;

Animation.prototype.animate = function(duration) {
    return TweenMax.to(this, duration, {
        time: 2,
        ease: Linear.easeNone
    });
};
Object.defineProperty(Animation.prototype, 'time', {
    get: function get() {
        return this.material.uniforms.time.value;
    },
    set: function set(v) {
        this.material.uniforms.time.value = v;
        this.customDepthMaterial.uniforms.time.value = v;
    }
});

Animation.prototype.setColor = function(v) {
    this.material.uniforms.diffuse.value.set(v);
};

var colors = {
    turquoise: 0x47debd,
    // darkPurple: 0x2e044e,
    purple: 0x7821ec,
    yellow: 0xfff95d
        // white: 0xffffff,
        // black: 0x000000
};
var colorKeys = Object.keys(colors);
var colorIndex = 0;

function nextColor() {
    var c = colors[colorKeys[colorIndex]];
    ++colorIndex > colorKeys.length - 1 && (colorIndex = 0);

return c;
}

var root = new THREERoot({
    createCameraControls: false,
    zNear: 0.01,
    zFar: 1000
});

root.renderer.shadowMap.enabled = true;
root.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
root.renderer.setClearColor(0x000000);
root.camera.position.set(10, 10, 10);
root.camera.lookAt(new THREE.Vector3(0, 4, 0));

var light = new THREE.SpotLight(0xffffff, 4, 50, Math.PI * 0.25, 1.0, 2.0);
light.position.set(0, 14, 0);
light.castShadow = true;
light.shadow.mapSize.width = 512;
light.shadow.mapSize.height = 512;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = light.position.y + 1;

root.add(light);
root.add(light.target);

// root.add(new THREE.AmbientLight(colors.darkPurple));

var light2 = new THREE.DirectionalLight(0xffffff, 0.125);
light2.position.set(0, 0, 1);
root.add(light2);

var light3 = new THREE.DirectionalLight(0xffffff, 0.125);
light3.position.set(1, 0, 0);
root.add(light3);

var allLights = [light, light2, light3];
var dirLights = [light2, light3];

var floor = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshStandardMaterial({
    color: 0x444444,
    metalness: 0.1,
    roughness: 0.9
}));
floor.rotation.x = Math.PI * -0.5;
floor.receiveShadow = true;
root.add(floor);

var elMessage = document.querySelector('.message');
var messages = ["Don't click.", "Oh no!", "Please don't click.", "Oh no!", "Really, don't click this time.", "...", "Ok, go ahead, click. See if I care.", "This is fine.", "Happy now?"];
var messageIndex = 0;

function nextMessage() {
    elMessage.innerHTML = messages[++messageIndex];
}

new THREE.JSONLoader().load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/304639/plus.json', function(model) {

model.translate(0, 6, 0);

var animation = new Animation({
        positions: model.vertices
    });
    animation.castShadow = true;
    animation.receiveShadow = true;
    root.add(animation);

animation.setColor(nextColor());
    elMessage.innerHTML = messages[0];

var proxy = {
        ry: 0.005
    };
    var resetting = false;
    var ruined = false;

window.addEventListener('click', function() {
        if (resetting || ruined) return;
        resetting = true;

var tl = new TimelineMax();

tl.add(nextMessage);
        tl.add(animation.animate(4));
        tl.to(proxy, 4, {
            ry: 0,
            ease: Power4.easeOut
        }, 0);
        tl.to(allLights, 0.3, {
            intensity: 0,
            ease: Power3.easeOut
        }, '-=0.5');
        tl.add(function() {
            animation.time = 0;
            animation.setColor(nextColor());
            proxy.ry = 0.005;
            root.scene.rotation.y = 0;
        });
        tl.add('afterReset');
        tl.add(nextMessage);
        tl.add(function() {
            if (messageIndex === messages.length - 1) {
                ruined = true;
                root.remove(animation);
            }
        });
        tl.to(light, 0.2, {
            intensity: 4,
            ease: Power3.easeOut
        }, 'afterReset');
        tl.to(dirLights, 0.2, {
            intensity: 0.125,
            ease: Power3.easeOut
        }, 'afterReset');
        tl.add(function() {
            resetting = false;
        });
    });

root.addUpdateCallback(function() {
        animation.rotation.y += proxy.ry;
    });
});

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto");
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px 10px;
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}
.footer.v-dark {
    background-color: #343436;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.footer.v-light {
    background-color: #fff;
    color: #343436;
}
.footer-anchor {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 4px;
    color: #343436;
    text-decoration: none;
    background-color: #fcd000;
    border-radius: 4px;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
.footer-anchor:hover {
    opacity: 0.6;
}
.message {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 4px;
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: monospace;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

HTML

使用粒子构建的加号模型，点击触发粒子重力掉落动画

webgl, symbol, particle, gravity

编辑器支持Emmet

快捷键

使用粒子构建的加号模型，点击触发粒子重力掉落动画

webgl, symbol, particle, gravity

WebGL Three.js使用噪音算法实现的3D空间乱流动画特效

WebGL Three.js构建的3D蝴蝶飞舞动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：