zdog.js构建的点阵立方体（可鼠标交互）

dot cube with zdog

h5, cube, dot

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * Boilerplate & utils
 */

}(this, function factory() {

var Zdog = {};

Zdog.TAU = Math.PI * 2;

Zdog.extend = function(a, b) {
        for (var prop in b) {
            a[prop] = b[prop];
        }
        return a;
    };

Zdog.lerp = function(a, b, t) {
        return (b - a) * t + a;
    };

Zdog.modulo = function(num, div) {
        return ((num % div) + div) % div;
    };

Zdog.easeInOut = function(alpha, power) {
        if (power == 1) {
            return alpha;
        }
        alpha = Math.max(0, Math.min(1, alpha));
        var isFirstHalf = alpha < 0.5;
        var slope = isFirstHalf ? alpha : 1 - alpha;
        slope = slope / 0.5;
        // make easing steeper with more multiples
        var powerMultiplier = powerMultipliers[power] || powerMultipliers[2];
        var curve = powerMultiplier(slope);
        curve = curve / 2;
        return isFirstHalf ? curve : 1 - curve;
    };

return Zdog;

}));

/**
 * CanvasRenderer
 */

var CanvasRenderer = {
        isCanvas: true
    };

CanvasRenderer.begin = function(ctx) {
        ctx.beginPath();
    };

CanvasRenderer.move = function(ctx, elem, point) {
        ctx.moveTo(point.x, point.y);
    };

CanvasRenderer.line = function(ctx, elem, point) {
        ctx.lineTo(point.x, point.y);
    };

CanvasRenderer.bezier = function(ctx, elem, cp0, cp1, end) {
        ctx.bezierCurveTo(cp0.x, cp0.y, cp1.x, cp1.y, end.x, end.y);
    };

CanvasRenderer.closePath = function(ctx) {
        ctx.closePath();
    };

CanvasRenderer.setPath = function() {};

CanvasRenderer.renderPath = function(ctx, elem, pathCommands, isClosed) {
        this.begin(ctx, elem);
        pathCommands.forEach(function(command) {
            command.render(ctx, elem, CanvasRenderer);
        });
        if (isClosed) {
            this.closePath(ctx, elem);
        }
    };

CanvasRenderer.stroke = function(ctx, elem, isStroke, color, lineWidth) {
        if (!isStroke) {
            return;
        }
        ctx.strokeStyle = color;
        ctx.lineWidth = lineWidth;
        ctx.stroke();
    };

CanvasRenderer.fill = function(ctx, elem, isFill, color) {
        if (!isFill) {
            return;
        }
        ctx.fillStyle = color;
        ctx.fill();
    };

CanvasRenderer.end = function() {};

return CanvasRenderer;

}));

/**
 * Vector
 */

}(this, function factory(utils) {

function Vector(position) {
        this.set(position);
    }

var TAU = utils.TAU;

// 'pos' = 'position'
    Vector.prototype.set = function(pos) {
        this.x = pos && pos.x || 0;
        this.y = pos && pos.y || 0;
        this.z = pos && pos.z || 0;
        return this;
    };

// set coordinates without sanitizing
    // vec.write({ y: 2 }) only sets y coord
    Vector.prototype.write = function(pos) {
        if (!pos) {
            return this;
        }
        this.x = pos.x != undefined ? pos.x : this.x;
        this.y = pos.y != undefined ? pos.y : this.y;
        this.z = pos.z != undefined ? pos.z : this.z;
        return this;
    };

Vector.prototype.rotate = function(rotation) {
        if (!rotation) {
            return;
        }
        this.rotateZ(rotation.z);
        this.rotateY(rotation.y);
        this.rotateX(rotation.x);
        return this;
    };

Vector.prototype.rotateZ = function(angle) {
        rotateProperty(this, angle, 'x', 'y');
    };

Vector.prototype.rotateX = function(angle) {
        rotateProperty(this, angle, 'y', 'z');
    };

Vector.prototype.rotateY = function(angle) {
        rotateProperty(this, angle, 'x', 'z');
    };

function rotateProperty(vec, angle, propA, propB) {
        if (!angle || angle % TAU === 0) {
            return;
        }
        var cos = Math.cos(angle);
        var sin = Math.sin(angle);
        var a = vec[propA];
        var b = vec[propB];
        vec[propA] = a * cos - b * sin;
        vec[propB] = b * cos + a * sin;
    }

Vector.prototype.add = function(pos) {
        if (!pos) {
            return this;
        }
        this.x += pos.x || 0;
        this.y += pos.y || 0;
        this.z += pos.z || 0;
        return this;
    };

Vector.prototype.subtract = function(pos) {
        if (!pos) {
            return this;
        }
        this.x -= pos.x || 0;
        this.y -= pos.y || 0;
        this.z -= pos.z || 0;
        return this;
    };

Vector.prototype.multiply = function(pos) {
        if (pos == undefined) {
            return this;
        }
        // multiple all values by same number
        if (typeof pos == 'number') {
            this.x *= pos;
            this.y *= pos;
            this.z *= pos;
        } else {
            // multiply object
            this.x *= pos.x != undefined ? pos.x : 1;
            this.y *= pos.y != undefined ? pos.y : 1;
            this.z *= pos.z != undefined ? pos.z : 1;
        }
        return this;
    };

Vector.prototype.transform = function(translation, rotation, scale) {
        this.multiply(scale);
        this.rotate(rotation);
        this.add(translation);
        return this;
    };

Vector.prototype.lerp = function(pos, t) {
        this.x = utils.lerp(this.x, pos.x || 0, t);
        this.y = utils.lerp(this.y, pos.y || 0, t);
        this.z = utils.lerp(this.z, pos.z || 0, t);
        return this;
    };

Vector.prototype.magnitude = function() {
        var sum = this.x * this.x + this.y * this.y + this.z * this.z;
        return getMagnitudeSqrt(sum);
    };

function getMagnitudeSqrt(sum) {
        // PERF: check if sum ~= 1 and skip sqrt
        if (Math.abs(sum - 1) < 0.00000001) {
            return 1;
        }
        return Math.sqrt(sum);
    }

Vector.prototype.magnitude2d = function() {
        var sum = this.x * this.x + this.y * this.y;
        return getMagnitudeSqrt(sum);
    };

Vector.prototype.copy = function() {
        return new Vector(this);
    };

return Vector;

}));

/**
 * Anchor
 */

var TAU = utils.TAU;
    var onePoint = {
        x: 1,
        y: 1,
        z: 1
    };

function Anchor(options) {
        this.create(options || {});
    }

Anchor.prototype.create = function(options) {
        // set defaults & options
        utils.extend(this, this.constructor.defaults);
        this.setOptions(options);

// transform
        this.translate = new Vector(options.translate);
        this.rotate = new Vector(options.rotate);
        this.scale = new Vector(onePoint).multiply(this.scale);
        // origin
        this.origin = new Vector();
        this.renderOrigin = new Vector();
        // children
        this.children = [];
        if (this.addTo) {
            this.addTo.addChild(this);
        }
    };

Anchor.defaults = {};

Anchor.optionKeys = Object.keys(Anchor.defaults).concat([
        'rotate',
        'translate',
        'scale',
        'addTo',
    ]);

Anchor.prototype.setOptions = function(options) {
        var optionKeys = this.constructor.optionKeys;

for (var key in options) {
            if (optionKeys.includes(key)) {
                this[key] = options[key];
            }
        }
    };

Anchor.prototype.addChild = function(shape) {
        var index = this.children.indexOf(shape);
        if (index != -1) {
            return;
        }
        shape.remove(); // remove previous parent
        shape.addTo = this; // keep parent reference
        this.children.push(shape);
    };

Anchor.prototype.removeChild = function(shape) {
        var index = this.children.indexOf(shape);
        if (index != -1) {
            this.children.splice(index, 1);
        }
    };

Anchor.prototype.remove = function() {
        if (this.addTo) {
            this.addTo.removeChild(this);
        }
    };

// ----- update ----- //

Anchor.prototype.update = function() {
        // update self
        this.reset();
        // update children
        this.children.forEach(function(child) {
            child.update();
        });
        this.transform(this.translate, this.rotate, this.scale);
    };

Anchor.prototype.reset = function() {
        this.renderOrigin.set(this.origin);
    };

Anchor.prototype.transform = function(translation, rotation, scale) {
        this.renderOrigin.transform(translation, rotation, scale);
        // transform children
        this.children.forEach(function(child) {
            child.transform(translation, rotation, scale);
        });
    };

Anchor.prototype.updateGraph = function() {
        this.update();
        this.checkFlatGraph();
        this.flatGraph.forEach(function(item) {
            item.updateSortValue();
        });
        // z-sort
        this.flatGraph.sort(Anchor.shapeSorter);
    };

Anchor.shapeSorter = function(a, b) {
        return a.sortValue - b.sortValue;
    };

Anchor.prototype.checkFlatGraph = function() {
        if (!this.flatGraph) {
            this.updateFlatGraph();
        }
    };

Anchor.prototype.updateFlatGraph = function() {
        this.flatGraph = this.getFlatGraph();
    };

// return Array of self & all child graph items
    Anchor.prototype.getFlatGraph = function() {
        var flatGraph = [this];
        this.children.forEach(function(child) {
            var childFlatGraph = child.getFlatGraph();
            flatGraph = flatGraph.concat(childFlatGraph);
        });
        return flatGraph;
    };

Anchor.prototype.updateSortValue = function() {
        this.sortValue = this.renderOrigin.z;
    };

// ----- render ----- //

Anchor.prototype.render = function() {};

Anchor.prototype.renderGraphCanvas = function(ctx) {
        if (!ctx) {
            throw new Error('ctx is ' + ctx + '. ' +
                'Canvas context required for render. Check .renderGraphCanvas( ctx ).');
        }
        this.checkFlatGraph();
        this.flatGraph.forEach(function(item) {
            item.render(ctx, Zdog.CanvasRenderer);
        });
    };

Anchor.prototype.renderGraphSvg = function(svg) {
        if (!svg) {
            throw new Error('svg is ' + svg + '. ' +
                'SVG required for render. Check .renderGraphSvg( svg ).');
        }
        this.checkFlatGraph();
        this.flatGraph.forEach(function(item) {
            item.render(svg, Zdog.SvgRenderer);
        });
    };

// ----- misc ----- //

Anchor.prototype.copy = function(options) {
        // copy options
        var itemOptions = {};
        var optionKeys = this.constructor.optionKeys;
        optionKeys.forEach(function(key) {
            itemOptions[key] = this[key];
        }, this);
        // add set options
        utils.extend(itemOptions, options);
        var ItemClass = this.constructor;
        return new ItemClass(itemOptions);
    };

Anchor.prototype.copyGraph = function(options) {
        var clone = this.copy(options);
        this.children.forEach(function(child) {
            child.copyGraph({
                addTo: clone,
            });
        });
        return clone;
    };

Anchor.prototype.normalizeRotate = function() {
        this.rotate.x = utils.modulo(this.rotate.x, TAU);
        this.rotate.y = utils.modulo(this.rotate.y, TAU);
        this.rotate.z = utils.modulo(this.rotate.z, TAU);
    };

// ----- subclass ----- //

function getSubclass(Super) {
        return function(defaults) {
            // create constructor
            function Item(options) {
                this.create(options || {});
            }

Item.prototype = Object.create(Super.prototype);
            Item.prototype.constructor = Item;

Item.defaults = utils.extend({}, Super.defaults);
            utils.extend(Item.defaults, defaults);
            // create optionKeys
            Item.optionKeys = Super.optionKeys.slice(0);
            // add defaults keys to optionKeys, dedupe
            Object.keys(Item.defaults).forEach(function(key) {
                if (!Item.optionKeys.includes(key)) {
                    Item.optionKeys.push(key);
                }
            });

Item.subclass = getSubclass(Item);

return Item;
        };
    }

Anchor.subclass = getSubclass(Anchor);

return Anchor;

}));

/**
 * PathCommand
 */

function PathCommand(method, points, previousPoint) {
        this.method = method;
        this.points = points.map(mapVectorPoint);
        this.renderPoints = points.map(mapNewVector);
        this.previousPoint = previousPoint;
        this.endRenderPoint = this.renderPoints[this.renderPoints.length - 1];
        // arc actions come with previous point & corner point
        // but require bezier control points
        if (method == 'arc') {
            this.controlPoints = [new Vector(), new Vector()];
        }
    }

function mapVectorPoint(point) {
        if (point instanceof Vector) {
            return point;
        } else {
            return new Vector(point);
        }
    }

function mapNewVector(point) {
        return new Vector(point);
    }

PathCommand.prototype.reset = function() {
        // reset renderPoints back to orignal points position
        var points = this.points;
        this.renderPoints.forEach(function(renderPoint, i) {
            var point = points[i];
            renderPoint.set(point);
        });
    };

PathCommand.prototype.transform = function(translation, rotation, scale) {
        this.renderPoints.forEach(function(renderPoint) {
            renderPoint.transform(translation, rotation, scale);
        });
    };

PathCommand.prototype.render = function(ctx, elem, renderer) {
        return this[this.method](ctx, elem, renderer);
    };

PathCommand.prototype.move = function(ctx, elem, renderer) {
        return renderer.move(ctx, elem, this.renderPoints[0]);
    };

PathCommand.prototype.line = function(ctx, elem, renderer) {
        return renderer.line(ctx, elem, this.renderPoints[0]);
    };

PathCommand.prototype.bezier = function(ctx, elem, renderer) {
        var cp0 = this.renderPoints[0];
        var cp1 = this.renderPoints[1];
        var end = this.renderPoints[2];
        return renderer.bezier(ctx, elem, cp0, cp1, end);
    };

PathCommand.prototype.arc = function(ctx, elem, renderer) {
        var prev = this.previousPoint;
        var corner = this.renderPoints[0];
        var end = this.renderPoints[1];
        var cp0 = this.controlPoints[0];
        var cp1 = this.controlPoints[1];
        cp0.set(prev).lerp(corner, 9 / 16);
        cp1.set(end).lerp(corner, 9 / 16);
        return renderer.bezier(ctx, elem, cp0, cp1, end);
    };

return PathCommand;

}));

/**
 * Shape
 */

var Shape = Anchor.subclass({
        stroke: 1,
        fill: false,
        color: '#333',
        closed: true,
        visible: true,
        path: [{}],
        front: {
            z: 1
        },
        backface: true,
    });

Shape.prototype.create = function(options) {
        Anchor.prototype.create.call(this, options);
        this.updatePath();
        // front
        this.front = new Vector(options.front || this.front);
        this.renderFront = new Vector(this.front);
        this.renderNormal = new Vector();
    };

var actionNames = [
        'move',
        'line',
        'bezier',
        'arc',
    ];

Shape.prototype.updatePath = function() {
        this.setPath();
        this.updatePathCommands();
    };

// place holder for Ellipse, Rect, etc.
    Shape.prototype.setPath = function() {};

// parse path into PathCommands
    Shape.prototype.updatePathCommands = function() {
        var previousPoint;
        this.pathCommands = this.path.map(function(pathPart, i) {
            // pathPart can be just vector coordinates -> { x, y, z }
            // or path instruction -> { arc: [ {x0,y0,z0}, {x1,y1,z1} ] }
            var keys = Object.keys(pathPart);
            var method = keys[0];
            var points = pathPart[method];
            // default to line if no instruction
            var isInstruction = keys.length == 1 && actionNames.includes(method);
            if (!isInstruction) {
                method = 'line';
                points = pathPart;
            }
            // munge single-point methods like line & move without arrays
            var isLineOrMove = method == 'line' || method == 'move';
            var isPointsArray = Array.isArray(points);
            if (isLineOrMove && !isPointsArray) {
                points = [points];
            }

// first action is always move
            method = i === 0 ? 'move' : method;
            // arcs require previous last point
            var command = new PathCommand(method, points, previousPoint);
            // update previousLastPoint
            previousPoint = command.endRenderPoint;
            return command;
        });
    };

// ----- update ----- //

Shape.prototype.reset = function() {
        this.renderOrigin.set(this.origin);
        this.renderFront.set(this.front);
        // reset command render points
        this.pathCommands.forEach(function(command) {
            command.reset();
        });
    };

Shape.prototype.transform = function(translation, rotation, scale) {
        // calculate render points backface visibility & cone/hemisphere shapes
        this.renderOrigin.transform(translation, rotation, scale);
        this.renderFront.transform(translation, rotation, scale);
        this.renderNormal.set(this.renderOrigin).subtract(this.renderFront);
        // transform points
        this.pathCommands.forEach(function(command) {
            command.transform(translation, rotation, scale);
        });
        // transform children
        this.children.forEach(function(child) {
            child.transform(translation, rotation, scale);
        });
    };

Shape.prototype.updateSortValue = function() {
        var sortValueTotal = 0;
        this.pathCommands.forEach(function(command) {
            sortValueTotal += command.endRenderPoint.z;
        });
        // average sort value of all points
        // def not geometrically correct, but works for me
        this.sortValue = sortValueTotal / this.pathCommands.length;
    };

// ----- render ----- //

Shape.prototype.render = function(ctx, renderer) {
        var length = this.pathCommands.length;
        if (!this.visible || !length) {
            return;
        }
        // do not render if hiding backface
        this.isFacingBack = this.renderNormal.z > 0;
        if (!this.backface && this.isFacingBack) {
            return;
        }
        if (!renderer) {
            throw new Error('Zdog renderer required. Set to ' + renderer);
        }
        // render dot or path
        var isDot = length == 1;
        if (renderer.isCanvas && isDot) {
            this.renderCanvasDot(ctx, renderer);
        } else {
            this.renderPath(ctx, renderer);
        }
    };

var TAU = utils.TAU;
    // Safari does not render lines with no size, have to render circle instead
    Shape.prototype.renderCanvasDot = function(ctx) {
        var lineWidth = this.getLineWidth();
        if (!lineWidth) {
            return;
        }
        ctx.fillStyle = this.getRenderColor();
        var point = this.pathCommands[0].endRenderPoint;
        ctx.beginPath();
        var radius = lineWidth / 2;
        ctx.arc(point.x, point.y, radius, 0, TAU);
        ctx.fill();
    };

Shape.prototype.getLineWidth = function() {
        if (!this.stroke) {
            return 0;
        }
        if (this.stroke == true) {
            return 1;
        }
        return this.stroke;
    };

Shape.prototype.getRenderColor = function() {
        // use backface color if applicable
        var isBackfaceColor = typeof this.backface == 'string' && this.isFacingBack;
        var color = isBackfaceColor ? this.backface : this.color;
        return color;
    };

Shape.prototype.renderPath = function(ctx, renderer) {
        var elem = this.getRenderElement(ctx, renderer);
        var isTwoPoints = this.pathCommands.length == 2 &&
            this.pathCommands[1].method == 'line';
        var isClosed = !isTwoPoints && this.closed;
        var color = this.getRenderColor();

renderer.renderPath(ctx, elem, this.pathCommands, isClosed);
        renderer.stroke(ctx, elem, this.stroke, color, this.getLineWidth());
        renderer.fill(ctx, elem, this.fill, color);
        renderer.end(ctx, elem);
    };

var svgURI = 'http://www.w3.org/2000/svg';

Shape.prototype.getRenderElement = function(ctx, renderer) {
        if (!renderer.isSvg) {
            return;
        }
        if (!this.svgElement) {
            // create svgElement
            this.svgElement = document.createElementNS(svgURI, 'path');
            this.svgElement.setAttribute('stroke-linecap', 'round');
            this.svgElement.setAttribute('stroke-linejoin', 'round');
        }
        return this.svgElement;
    };

return Shape;

}));

/**
 * Dragger
 */

// quick & dirty drag event stuff
    // messes up if multiple pointers/touches

// event support, default to mouse events
    var downEvent = 'mousedown';
    var moveEvent = 'mousemove';
    var upEvent = 'mouseup';
    if (window.PointerEvent) {
        // PointerEvent, Chrome
        downEvent = 'pointerdown';
        moveEvent = 'pointermove';
        upEvent = 'pointerup';
    } else if ('ontouchstart' in window) {
        // Touch Events, iOS Safari
        downEvent = 'touchstart';
        moveEvent = 'touchmove';
        upEvent = 'touchend';
    }

function noop() {}

function Dragger(options) {
        this.create(options || {});
    }

Dragger.prototype.create = function(options) {
        this.onDragStart = options.onDragStart || noop;
        this.onDragMove = options.onDragMove || noop;
        this.onDragEnd = options.onDragEnd || noop;

this.bindDrag(options.startElement);
    };

Dragger.prototype.bindDrag = function(element) {
        element = this.getQueryElement(element);
        if (element) {
            element.addEventListener(downEvent, this);
        }
    };

Dragger.prototype.getQueryElement = function(element) {
        if (typeof element == 'string') {
            // with string, query selector
            element = document.querySelector(element);
        }
        return element;
    };

Dragger.prototype.handleEvent = function(event) {
        var method = this['on' + event.type];
        if (method) {
            method.call(this, event);
        }
    };

Dragger.prototype.onmousedown =
        Dragger.prototype.onpointerdown = function(event) {
            this.dragStart(event, event);
        };

Dragger.prototype.ontouchstart = function(event) {
        this.dragStart(event, event.changedTouches[0]);
    };

Dragger.prototype.dragStart = function(event, pointer) {
        event.preventDefault();
        this.dragStartX = pointer.pageX;
        this.dragStartY = pointer.pageY;
        window.addEventListener(moveEvent, this);
        window.addEventListener(upEvent, this);
        this.onDragStart(pointer);
    };

Dragger.prototype.ontouchmove = function(event) {
        // HACK, moved touch may not be first
        this.dragMove(event, event.changedTouches[0]);
    };

Dragger.prototype.onmousemove =
        Dragger.prototype.onpointermove = function(event) {
            this.dragMove(event, event);
        };

Dragger.prototype.dragMove = function(event, pointer) {
        event.preventDefault();
        var moveX = pointer.pageX - this.dragStartX;
        var moveY = pointer.pageY - this.dragStartY;
        this.onDragMove(pointer, moveX, moveY);
    };

Dragger.prototype.onmouseup =
        Dragger.prototype.onpointerup =
        Dragger.prototype.ontouchend =
        Dragger.prototype.dragEnd = function( /* event */ ) {
            window.removeEventListener(moveEvent, this);
            window.removeEventListener(upEvent, this);
            this.onDragEnd();
        };

return Dragger;

}));

/**
 * Illustration
 */

function noop() {}
    var TAU = utils.TAU;

var Illustration = Anchor.subclass({
        element: undefined,
        centered: true,
        zoom: 1,
        dragRotate: false,
        resize: false,
        onPrerender: noop,
        onDragStart: noop,
        onDragMove: noop,
        onDragEnd: noop,
        onResize: noop,
    });

utils.extend(Illustration.prototype, Dragger.prototype);

Illustration.prototype.create = function(options) {
        Anchor.prototype.create.call(this, options);
        Dragger.prototype.create.call(this, options);
        this.setElement(this.element);
        this.setDragRotate(this.dragRotate);
        this.setResize(this.resize);
    };

Illustration.prototype.setElement = function(element) {
        element = this.getQueryElement(element);
        if (!element) {
            throw new Error('Zdog.Illustration element required. Set to ' + element);
        }

var nodeName = element.nodeName.toLowerCase();
        if (nodeName == 'canvas') {
            this.setCanvas(element);
        } else if (nodeName == 'svg') {
            this.setSvg(element);
        }
    };

Illustration.prototype.setSize = function(width, height) {
        width = Math.round(width);
        height = Math.round(height);
        if (this.isCanvas) {
            this.setSizeCanvas(width, height);
        } else if (this.isSvg) {
            this.setSizeSvg(width, height);
        }
    };

Illustration.prototype.setResize = function(resize) {
        this.resize = resize;
        // create resize event listener
        if (!this.resizeListener) {
            this.resizeListener = this.onWindowResize.bind(this);
        }
        // add/remove event listener
        if (resize) {
            window.addEventListener('resize', this.resizeListener);
            this.onWindowResize();
        } else {
            window.removeEventListener('resize', this.resizeListener);
        }
    };

// TODO debounce this?
    Illustration.prototype.onWindowResize = function() {
        this.setMeasuredSize();
        this.onResize(this.width, this.height);
    };

Illustration.prototype.setMeasuredSize = function() {
        var width, height;
        var isFullscreen = this.resize == 'fullscreen';
        if (isFullscreen) {
            width = window.innerWidth;
            height = window.innerHeight;
        } else {
            var rect = this.element.getBoundingClientRect();
            width = rect.width;
            height = rect.height;
        }
        this.setSize(width, height);
    };

// ----- render ----- //

Illustration.prototype.renderGraph = function(item) {
        if (this.isCanvas) {
            this.renderGraphCanvas(item);
        } else if (this.isSvg) {
            this.renderGraphSvg(item);
        }
    };

// combo method
    Illustration.prototype.updateRenderGraph = function(item) {
        this.updateGraph();
        this.renderGraph(item);
    };

// ----- canvas ----- //

Illustration.prototype.setCanvas = function(element) {
        this.element = element;
        this.isCanvas = true;
        // update related properties
        this.ctx = this.element.getContext('2d');
        // set initial size
        this.setSizeCanvas(element.width, element.height);
    };

Illustration.prototype.setSizeCanvas = function(width, height) {
        this.width = width;
        this.height = height;
        // up-rez for hi-DPI devices
        var pixelRatio = this.pixelRatio = window.devicePixelRatio || 1;
        this.element.width = this.canvasWidth = width * pixelRatio;
        this.element.height = this.canvasHeight = height * pixelRatio;
        if (pixelRatio > 1) {
            this.element.style.width = width + 'px';
            this.element.style.height = height + 'px';
        }
    };

Illustration.prototype.renderGraphCanvas = function(item) {
        item = item || this;
        this.prerenderCanvas();
        Anchor.prototype.renderGraphCanvas.call(item, this.ctx);
        this.postrenderCanvas();
    };

Illustration.prototype.prerenderCanvas = function() {
        var ctx = this.ctx;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        ctx.save();
        if (this.centered) {
            ctx.translate(this.width / 2, this.height / 2);
        }
        var scale = this.pixelRatio * this.zoom;
        ctx.scale(scale, scale);
        this.onPrerender(ctx);
    };

Illustration.prototype.postrenderCanvas = function() {
        this.ctx.restore();
    };

// ----- svg ----- //

Illustration.prototype.setSvg = function(element) {
        this.element = element;
        this.isSvg = true;
        this.pixelRatio = 1;
        // set initial size from width & height attributes
        var width = element.getAttribute('width');
        var height = element.getAttribute('height');
        this.setSizeSvg(width, height);
    };

Illustration.prototype.setSizeSvg = function(width, height) {
        this.width = width;
        this.height = height;
        var viewWidth = width / this.zoom;
        var viewHeight = height / this.zoom;
        var viewX = this.centered ? -viewWidth / 2 : 0;
        var viewY = this.centered ? -viewHeight / 2 : 0;
        this.element.setAttribute('viewBox', viewX + ' ' + viewY + ' ' +
            viewWidth + ' ' + viewHeight);
        if (this.resize) {
            // remove size attributes, let size be determined by viewbox
            this.element.removeAttribute('width');
            this.element.removeAttribute('height');
        } else {
            this.element.setAttribute('width', width);
            this.element.setAttribute('height', height);
        }
    };

Illustration.prototype.renderGraphSvg = function(item) {
        item = item || this;
        empty(this.element);
        this.onPrerender(this.element);
        Anchor.prototype.renderGraphSvg.call(item, this.element);
    };

function empty(element) {
        while (element.firstChild) {
            element.removeChild(element.firstChild);
        }
    }

// ----- drag ----- //

Illustration.prototype.setDragRotate = function(item) {
        if (!item) {
            return;
        } else if (item === true) {
            item = this;
        }
        this.dragRotate = item;

this.bindDrag(this.element);
    };

Illustration.prototype.dragStart = function( /* event, pointer */ ) {
        this.dragStartRX = this.dragRotate.rotate.x;
        this.dragStartRY = this.dragRotate.rotate.y;
        Dragger.prototype.dragStart.apply(this, arguments);
    };

Illustration.prototype.dragMove = function(event, pointer) {
        var moveX = pointer.pageX - this.dragStartX;
        var moveY = pointer.pageY - this.dragStartY;
        var displaySize = Math.min(this.width, this.height);
        var moveRY = moveX / displaySize * TAU;
        var moveRX = moveY / displaySize * TAU;
        this.dragRotate.rotate.x = this.dragStartRX - moveRX;
        this.dragRotate.rotate.y = this.dragStartRY - moveRY;
        Dragger.prototype.dragMove.apply(this, arguments);
    };

return Illustration;

}));

// ------------------------- demo ------------------------- //

var illoElem = document.querySelector('.illo');
var sceneSize = 24;
var minWindowSize = Math.min(window.innerWidth - 20, window.innerHeight - 20);
var zoom = Math.floor(minWindowSize / sceneSize);
var illoSize = sceneSize * zoom;
illoElem.setAttribute('width', illoSize);
illoElem.setAttribute('height', illoSize);
var TAU = Zdog.TAU;

var illo = new Zdog.Illustration({
    element: illoElem,
    zoom: zoom,
    rotate: {
        x: TAU * -35 / 360,
        y: TAU * 1 / 8
    },
    dragRotate: true,
});

// ----- model ----- //

var cube = new Zdog.Anchor({
    addTo: illo,
    scale: 4,
});

var oneUnit = new Zdog.Vector({
    x: 1,
    y: 1
});

var side = new Zdog.Anchor({
    addTo: cube,
    translate: {
        z: 1
    },
});

var dot = new Zdog.Shape({
    addTo: side,
    translate: oneUnit.copy(),
    stroke: 1,
    color: 'white',
    // visible: false,
});

dot.copy({
    translate: {
        x: -1,
        y: 1
    }
});
dot.copy({
    translate: {
        x: 1,
        y: -1
    }
});
dot.copy({
    translate: {
        x: -1,
        y: -1
    }
});

// more dots
dot.copy({
    translate: {
        x: 1
    }
});
dot.copy({
    translate: {
        x: -1
    }
});
dot.copy({
    translate: {
        y: -1
    }
});
dot.copy({
    translate: {
        y: 1
    }
});

side.copyGraph({
    translate: {
        z: -1
    },
});

var midDot = dot.copy({
    addTo: cube,
});

midDot.copy({
    translate: {
        x: -1,
        y: 1
    }
});
midDot.copy({
    translate: {
        x: 1,
        y: -1
    }
});
midDot.copy({
    translate: {
        x: -1,
        y: -1
    }
});

// ----- animate ----- //

var keyframes = [{
    x: 0,
    y: 0,
    z: 0
}, {
    x: 0,
    y: 0,
    z: TAU / 4
}, {
    x: -TAU / 4,
    y: 0,
    z: TAU / 4
}, {
    x: -TAU / 4,
    y: 0,
    z: TAU / 2
}, ];

var t = 0;

function animate() {
    var easeT = Zdog.easeInOut(t % 1, 4);
    var turnLimit = keyframes.length - 1;
    var turn = Math.floor(t % turnLimit);
    var keyA = keyframes[turn];
    var keyB = keyframes[turn + 1];
    cube.rotate.x = Zdog.lerp(keyA.x, keyB.x, easeT);
    cube.rotate.y = Zdog.lerp(keyA.y, keyB.y, easeT);
    cube.rotate.z = Zdog.lerp(keyA.z, keyB.z, easeT);
    t += 1 / 75;

illo.updateRenderGraph();
    requestAnimationFrame(animate);
}

animate();

编译

CSS

HTML

dot cube with zdog

h5, cube, dot

编辑器支持Emmet

快捷键

dot cube with zdog

h5, cube, dot

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

如何使用css制作3d立方体以及绑定鼠标交互事件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：