返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

利用HTML5绘制点线面组成的3D图形的示例

2019-01-28 16:22:13王冬梅
  •                 ctx.fillStyle = this.color;                    ctx.fill();   
  •             }            }  


    　　最后是立方体本身对象：

    　　因为立方体最后要旋转，所以，立方体对象里面不仅有面对象，还要有点对象，点旋转后才会引起面的旋转。length是立方体的边长，_initVector是初始化立方体的各个顶点，_draw方法就是把所有点形成面，将面放入数组，然后对面进行排序（就是根据面里的zIndex排序），排序好后，调用每个面里的draw方法。立方体就出来了。

    XML/HTML Code复制内容到剪贴板
    1. var Cube = function(length){                this.length = length;   
    2.             this.faces = [];                this.vectors = [];   
    3.         }            Cube.prototype = {   
    4.             _initVector:function(){                    this.vectors[0] = new Vector(-this.length/2 , -this.length/2 , this.length/2);   
    5.                 this.vectors[1] = new Vector(-this.length/2 , this.length/2 , this.length/2);                     this.vectors[2] = new Vector(this.length/2 , -this.length/2 , this.length/2);    
    6.                 this.vectors[3] = new Vector(this.length/2 , this.length/2 , this.length/2);                     this.vectors[4] = new Vector(this.length/2 , -this.length/2 , -this.length/2);   
    7.                 this.vectors[5] = new Vector(this.length/2 , this.length/2 , -this.length/2);                    this.vectors[6] = new Vector(-this.length/2 , -this.length/2 , -this.length/2);   
    • 相关文章 大家在看