HTML5 Canvas三维空间中粒子球体嵌套旋转动画

圆球中的圆球，使用stat.js监控内存/帧频等关键性能指标。

html5, particle, sphere

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//------------------
var stats = new Stats();
stats.showPanel(1);
document.body.appendChild(stats.dom);
//------------------

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = (canvas.width = 500),
    cx = cw / 2;
var ch = (canvas.height = 500),
    cy = ch / 2;

var m = {
    x: 0,
    y: 0
};
var target = {
    x: 0,
    y: 0
};
var speed = 0.0005;
var easing = 0.90;

var frames = 0;

var balls = [];
var vp = {
    x: cx,
    y: cy
}; //vanishing point
var fl = 250; // focal length

function Ball(R) {

this.R = R;
    this.r = .04 * this.R;

// 3D position
    this.pos = spherePointPicking(this.R)

// 2D position
    this.x = this.pos.x + cx;
    this.y = this.pos.y + cy;
    this.a = {
        x: 0,
        y: 0
    };
    this.scale = {
        x: 1,
        y: 1
    };
    this.c = oGrd(this.r / 2, 210);

this.rotateX = function(angle) {
        var cos = Math.cos(angle);
        var sin = Math.sin(angle);
        var y1 = this.pos.y * cos - this.pos.z * sin;
        var z1 = this.pos.z * cos + this.pos.y * sin;

this.pos.y = y1;
        this.pos.z = z1;
    };

this.rotateY = function(angle) {
        var cos = Math.cos(angle);
        var sin = Math.sin(angle);
        var x1 = this.pos.x * cos - this.pos.z * sin;
        var z1 = this.pos.z * cos + this.pos.x * sin;

this.pos.x = x1;
        this.pos.z = z1;
    };

this.draw3D = function() {
        if (this.pos.z > -fl) {
            var scale = fl / (fl - this.pos.z);

this.scale = {
                x: scale,
                y: scale
            };
            this.x = vp.x + this.pos.x * scale;
            this.y = vp.y + this.pos.y * scale;
            this.visible = true;
        } else {
            this.visible = false;
        }
    };

this.draw2D = function() {

ctx.save();
        ctx.translate(this.x, this.y);
        ctx.scale(this.scale.x, this.scale.y);
        ctx.beginPath();
        ctx.fillStyle = this.c;
        ctx.fillRect(0, 0, this.r, this.r);
        ctx.restore();
    };
}

for (var i = 0; i < 1000; i++) {
    balls.push(new Ball(150));
    balls.push(new Ball(75));
}

function Draw() {
    t = new Date().getTime() / 127;

stats.begin();

ctx.clearRect(0, 0, cw, ch);

frames += .1;
    //t = new Date().getTime() / 127;
    m.x = cx + Math.cos(t / 43 + Math.cos(t / 47 + frames)) * 8;
    m.y = cy + Math.sin(t / 31 + Math.cos(t / 37 + frames)) * 8;

target.x = (m.y - vp.y) * speed;
    target.y = (m.x - vp.x) * speed;

balls.map(function(b) {
        b.draw3D();
    });
    balls.sort(function(a, b) {
        return a.pos.z - b.pos.z;
    });

target.x *= easing;
    target.y *= easing;

balls.map(function(b) {
        b.rotateX(target.x);
        b.rotateY(target.y);
        if (b.visible) {
            b.draw2D();
        }
    });

stats.end();

requestId = window.requestAnimationFrame(Draw);
}
Draw();

function oGrd(r, h) {
    grd = ctx.createRadialGradient(r, r, 0, r, r, r);

grd.addColorStop(0, "hsla(" + h + ",95%,95%, 1)");
    grd.addColorStop(0.4, "hsla(" + h + ",95%,45%,.5)");
    grd.addColorStop(1, "hsla(" + h + ", 95%, 45%, 0)");

return grd;
}

function spherePointPicking(R) {
    //How to generate random points on a sphere:
    //https://math.stackexchange.com/questions/1585975/how-to-generate-random-points-on-a-sphere#1586185
    var u1 = Math.random();
    var u2 = Math.random();
    var s = Math.acos(2 * u1 - 1) - Math.PI / 2;
    var t = 2 * Math.PI * u2;

return {
        x: R * Math.cos(s) * Math.cos(t),
        y: R * Math.cos(s) * Math.sin(t),
        z: R * Math.sin(s)
    }
}

编译

CSS

HTML

圆球中的圆球，使用stat.js监控内存/帧频等关键性能指标。

html5, particle, sphere

编辑器支持Emmet

快捷键

圆球中的圆球，使用stat.js监控内存/帧频等关键性能指标。

html5, particle, sphere

HTML5 Canvas使用粒子模拟液体物理特性和运动动画

HTML5 Canvas三角形网格组成的球体在水面颠簸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：