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

Mandala Cloud

html5, math, three.js, particle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* jshint esversion: 6 */
((main) => {

this.requestAnimationFrame = (() => {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

main(this, document, THREE);

})((window, document, three, undefined) => {

'use strict';

const APP_DEFAULTS = {
        dimensions: {
            x: 0,
            y: 0
        },
        camera: {
            fov: 70,
            nearPlane: 0.1,
            farPlane: 10000,
            distanceX: 5,
            distanceY: 450,
            distanceZ: -5,
            speedX: 0.8,
            speedY: 0.4,
            speedZ: 0.1
        },
        particles: {
            ySegments: 100,
            xSegments: 300,
            size: 1,
            color: '#cfcf78',
            waveSpeed: 0.5,
            waveSizeX: 250,
            waveSizeY: 50,
            waveSizeZ: 250
        }
    };

const PI = Math.PI,
        TWO_PI = PI * 2,
        COS = Math.cos,
        SIN = Math.sin;

class App {
        constructor() {
            var self = this;
            self.props = Object.assign({}, APP_DEFAULTS);
            self.initCamera();
            self.initScene();
            self.initLights();
            this.stats = new Stats();
            document.body.appendChild(this.stats.domElement);
            window.onresize = () => {
                self.setSize();
            };
        }

setSize() {
            this.props.dimensions.x = window.innerWidth;
            this.props.dimensions.y = window.innerHeight;
            this.renderer.setSize(this.props.dimensions.x, this.props.dimensions.y);
            this.camera.aspect = this.props.camera.aspectRatio = this.props.dimensions.x / this.props.dimensions.y;
            this.camera.updateProjectionMatrix();
        }

initCamera() {
            this.camera = new three.PerspectiveCamera(
                this.props.camera.fov,
                this.props.camera.aspectRatio,
                this.props.camera.nearPlane,
                this.props.camera.farPlane
            );
        }

initScene() {
            this.scene = new three.Scene();
            this.scene.add(this.camera);
            this.renderer = new THREE.WebGLRenderer({
                alpha: true,
                antialias: true
            });
            this.setSize();
            this.container = document.querySelector('#container');
            this.container.appendChild(this.renderer.domElement);
        }

initLights() {
            this.mainLight = new three.HemisphereLight(0x000000, 0xffffff, 0.95);
            this.mainLight.position.set(0, -500, 0);
            this.scene.add(this.mainLight);

this.ambientLight = new three.AmbientLight(0xaaccff, 0.95);
            this.ambientLight.position.set(-200, -100, 0);
            this.scene.add(this.ambientLight);
        }

render() {
            this.stats.begin();
            var self = this;
            self.update();
            self.renderer.render(self.scene, self.camera);
            window.requestAnimationFrame(self.render.bind(self));
            this.stats.end();
        }

update() {}
    }

class MandalaCloud extends App {
        constructor() {
            super();
            this.tick = 0;
            this.build();
            this.initGUI();
            this.render();
        }

build() {
            var mat = new three.PointsMaterial({
                color: new three.Color(this.props.particles.color),
                size: 1
            });
            this.geometry = new three.SphereGeometry(400, this.props.particles.ySegments, this.props.particles.xSegments, 0, TWO_PI, 0, TWO_PI);

this.pointCloud = new three.Points(this.geometry, mat);
            this.pointCloud.sortParticles = true;
            this.scene.add(this.pointCloud);
            this.camera.position.set(0, -600, 600);
        }

update() {
            this.tick++;
            this.delta = this.tick * 0.005;
            this.geometry.verticesNeedUpdate = true;
            for (var i = 0; i < this.geometry.vertices.length; i++) {
                var point = this.geometry.vertices[i],
                    dX = SIN(this.delta + i) * (this.props.particles.waveSizeX * 0.004),
                    dY = COS(this.delta + i) * (this.props.particles.waveSizeY * 0.004),
                    dZ = COS(this.delta + i) * (this.props.particles.waveSizeZ * 0.004);
                point.add(new three.Vector3(dX, dY, dZ));
            }
            this.camera.lookAt(this.pointCloud.position);
            this.camera.position.x = this.props.camera.distanceX * COS(this.delta * this.props.camera.speedX);
            this.camera.position.y = this.props.camera.distanceY * COS(this.delta * this.props.camera.speedY);
            this.camera.position.z = this.props.camera.distanceZ * COS(this.delta * this.props.camera.speedZ);
        }

reset() {
            this.tick = 0;
            this.scene.remove(this.pointCloud);
            this.build();
        }

initGUI() {

this.gui = new dat.GUI();
            var f1 = this.gui.addFolder('Camera');

f1.add(this.props.camera, 'distanceX').step(5).min(-700).max(700);
            f1.add(this.props.camera, 'distanceY').step(5).min(-700).max(700);
            f1.add(this.props.camera, 'distanceZ').step(5).min(-700).max(700);

f1.add(this.props.camera, 'speedX').step(0.1).min(0).max(1);
            f1.add(this.props.camera, 'speedY').step(0.1).min(0).max(1);
            f1.add(this.props.camera, 'speedZ').step(0.1).min(0).max(1);
            f1.open();

var f2 = this.gui.addFolder('Particles');

f2.add(this.props.particles, 'xSegments').step(10).min(10).max(400).onFinishChange(() => {
                this.reset();
            });
            f2.add(this.props.particles, 'ySegments').step(10).min(10).max(400).onFinishChange(() => {
                this.reset();
            });
            f2.add(this.props.particles, 'size').step(1).min(1).max(10).onChange((value) => {
                this.pointCloud.material.size = value;
            });
            f2.addColor(this.props.particles, 'color').onChange((value) => {
                this.pointCloud.material.color = new three.Color(value);
            });
            f2.add(this.props.particles, 'waveSizeX').step(5).min(0).max(400).onFinishChange(() => {
                this.reset();
            });
            f2.add(this.props.particles, 'waveSizeY').step(5).min(0).max(400).onFinishChange(() => {
                this.reset();
            });
            f2.add(this.props.particles, 'waveSizeZ').step(5).min(0).max(400).onFinishChange(() => {
                this.reset();
            });

f2.open();
        }
    }

window.onload = () => {
        var mc = new MandalaCloud();
    };

});

编译

CSS

HTML

Mandala Cloud

html5, math, three.js, particle

编辑器支持Emmet

快捷键

Mandala Cloud

html5, math, three.js, particle

使用HTML5 WebGL GLSL着色器代码实现的太空星云图粒子动画特效

HTML5 WebGL 粒子聚合、爆炸动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：