使用Canvas 2D仿真3D八面体

Canvas 2D emulating 3D octahedron

canvas, 几何模型

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

// the rest is all JS
var CANVAS_SIZE = 500,
    OFFSET = .5 * CANVAS_SIZE,
    VANISHING_POINT = 2 * CANVAS_SIZE,
    AXES = ['x', 'y', 'z'],
    N3GON = 3,
    N4GON = 4,
    M3GON = .5 * (N3GON - 1),
    N6HEDRON = 6,
    N8HEDRON = 8,
    ALPHA = .8,
    HUES = [284, 25],
    c = document.querySelector('canvas'),
    ct = c.getContext('2d');

var s3d = undefined;

var Point = function Point() {
    var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
    var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
    var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];

/*
     * c = natural set of coords
     * p = coords flattened to plane,
     * taking perspective into account
     */
    var c = {},
        p = {};

/*
     * cdata = coordinate data because we may
     * not want to change all coords
     */
    this.setCoords = function(cdata) {
        for (var axis in cdata) {
            c[axis] = cdata[axis];
        }

if (cdata.z || cdata.z === 0) {
            var f = c.z / VANISHING_POINT + 1;
            p.x = f * c.x;
            p.y = f * c.y;
            p.z = c.z;
        }
    };

this.getCoords = function() {
        var flag = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];

return flag ? c : p;
    };

this.setCoords({
        'x': x,
        'y': y,
        'z': z
    });
};

var Shape2D = function Shape2D(vertices) {
    var nv = vertices.length,
        o = {},
        hue = HUES[nv - 3];

this.setO = function() {
        var axes = arguments.length <= 0 || arguments[0] === undefined ? [2] : arguments[0];

var len = axes.length,
            axis = undefined;

for (var i = 0; i < len; i++) {
            axis = AXES[axes[i]];
            i;

o[axis] = vertices.reduce(function(prev_coord, curr_vx) {
                return prev_coord + curr_vx.getCoords()[axis];
            }, 0) / nv;
        }
    };

this.getO = function() {
        return o;
    };

this.getMaxZCoords = function() {
        return vertices.reduce(function(prev, curr) {
            var c = curr.getCoords(0);

return c.z > prev.z ? c : prev;
        }, {
            'z': -Infinity
        });
    };

this.getMinZCoords = function() {
        return vertices.reduce(function(prev, curr) {
            var c = curr.getCoords(0);

return c.z < prev.z ? c : prev;
        }, {
            'z': Infinity
        });
    };

this.draw = function() {
        var maxZCoords = this.getMaxZCoords(),
            minZCoords = this.getMinZCoords();

if (maxZCoords.z === minZCoords.z) {
            ct.fillStyle = 'hsl(' + hue + ',100%,50%)';
        } else {
            var l1 = 50 * (1 + maxZCoords.z / OFFSET),
                l2 = 50 * (1 + minZCoords.z / OFFSET),
                c1 = 'hsl(' + hue + ',100%,' + ~~l1 + '%)',
                c2 = 'hsl(' + hue + ',100%,' + ~~l2 + '%)',
                g = ct.createLinearGradient(maxZCoords.x, maxZCoords.y, minZCoords.x, minZCoords.y);

g.addColorStop(0, c1);
            g.addColorStop(1, c2);
            ct.fillStyle = g;
        }

ct.beginPath();

for (var i = 0; i < nv; i++) {
            var _c = vertices[i].getCoords(0);
            ct[(i ? 'line' : 'move') + 'To'](_c.x, _c.y);
        }

ct.closePath();
        ct.fill();
        ct.stroke();
    };
};

/* rc = cuboctahedron circumradius */
var Cuboctahedron = function Cuboctahedron() {
    var rc = arguments.length <= 0 || arguments[0] === undefined ? .8 * OFFSET : arguments[0];

var vertices = [],
        faces = [],
        nv = undefined,
        nf = undefined;

this.addVertices = function() {
        var r1 = rc / Math.SQRT2 /* alternate radius */ ,
            ba = 2 * Math.PI / N4GON /* base angle */ ;

for (var i = 0; i < N3GON; i++) {
            /* along the z axis first, 
             * all vertices are found in 3 planes
             */
            var k = i % 2,
                cr = k ? rc : r1 /* current radius */ ,
                z = (i - M3GON) * r1 /* z comp of coord */ ;

for (var j = 0; j < N4GON; j++) {
                var ca = (j + .5 * k) * ba /* current angle */ ,
                    x = cr * Math.cos(ca),
                    y = cr * Math.sin(ca);

vertices.push(new Point(x, y, z));
            }
        }

nv = vertices.length;
        this.addFaces();
    };

this.addFaces = function() {
        /* create the 8 triangular faces */
        for (var i = 0; i < N8HEDRON; i++) {
            var j = ~~(i / N4GON),
                k = i % N4GON,
                b = 2 * j * N4GON;

faces.push(new Shape2D([vertices[b + k], vertices[b + (k + 1) % N4GON], vertices[N4GON + k]]));
        }

/* create the 6 square faces */
        for (var i = 0; i < N6HEDRON; i++) {
            var j = ~~(i / N4GON),
                k = i % N4GON;

if (i < N4GON) {
                faces.push(new Shape2D([vertices[k], vertices[N4GON + k], vertices[2 * N4GON + k], vertices[N4GON + (k + N4GON - 1) % N4GON]]));
            } else {
                var b = i % 2 * 2 * N4GON;

faces.push(new Shape2D([vertices[b + 0], vertices[b + 1], vertices[b + 2], vertices[b + 3]]));
            }
        }

nf = faces.length;
    };

this.rotateY = function() {
        var da = arguments.length <= 0 || arguments[0] === undefined ? Math.PI * .005 : arguments[0];

/* go through all vertices and reposition them */
        for (var i = 0; i < nv; i++) {
            var _c2 = vertices[i].getCoords(),
                x = _c2.x * Math.cos(da) - _c2.z * Math.sin(da),
                z = _c2.x * Math.sin(da) + _c2.z * Math.cos(da);

vertices[i].setCoords({
                'x': x,
                'z': z
            });
        }

/* compute central point for each face */
        /* all convex, so it's enough :P  */
        for (var i = 0; i < nf; i++) {
            faces[i].setO();
        }
        this.sortFaces();
        this.draw();
    };

/* z sorting for faces */
    this.sortFaces = function() {
        // yay, works!
        faces.sort(function(a, b) {
            if (a.getO().z > b.getO().z) return 1;
            if (a.getO().z < b.getO().z) return -1;
            return 0;
        });
    };

/* clean drawing of shape */
    this.draw = function() {
        for (var i = 0; i < nf; i++) {
            faces[i].draw();
        }
    };

this.addVertices();
};

function ani() {
    ct.clearRect(-OFFSET, -OFFSET, CANVAS_SIZE, CANVAS_SIZE);
    s3d.rotateY();
    requestAnimationFrame(ani);
};

(function init() {
    c.width = c.height = CANVAS_SIZE;
    // put 0,0 point in the middle of canvas
    ct.translate(OFFSET, OFFSET);
    ct.globalAlpha = ALPHA;
    ct.strokeStyle = '#fff';
    s3d = new Cuboctahedron();
    ani();
})();

编译

CSS

HTML

Canvas 2D emulating 3D octahedron

canvas, 几何模型

编辑器支持Emmet

快捷键

Canvas 2D emulating 3D octahedron

canvas, 几何模型

使用Canvas 2D模拟3D太空漫游的视觉效果

HTML5 Canvas 逼真的3D水体模拟动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：