代码之家 › 专栏 › 技术社区 › Budda

用HTML+JS在画布上绘制三维图形

drawing canvas 3d html javascript

Budda · 技术社区 · 14 年前

是否有框架/引擎提供在画布上绘制三维图像的能力?

我计划在一个平面上绘制一些基本体(不同形状):

    var dist = 2;
    var hexHalfW = 35;
    var lengthX = 20;
    var hexR = Math.sqrt(lengthX*lengthX+hexHalfW*hexHalfW);//40.31128874
    var hexDiag = 2*hexR;
    var hexHeight = hexDiag;
    var hexWidth = 2*hexHalfW;

    function DrawHex(ctx, x, y)
    {               
        var cx = x*(hexWidth + dist) - y*(hexWidth + dist)/2;
        var cy = y*(hexR + lengthX + dist);
        ctx.beginPath();
        ctx.moveTo(cx, cy-hexR);
        ctx.lineTo(cx+hexHalfW, cy-hexR+lengthX);
        ctx.lineTo(cx+hexHalfW, cy+hexR-lengthX);
        ctx.lineTo(cx, cy+hexR);
        ctx.lineTo(cx-hexHalfW, cy+hexR-lengthX);
        ctx.lineTo(cx-hexHalfW, cy-hexR+lengthX);
        ctx.lineTo(cx, cy-hexR);
        ctx.fill();
    }

    function draw()
    {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext)
        {
            var ctx = canvas.getContext('2d');

            //Pick Hexagon color, this one will be blue
            ctx.fillStyle = "rgb(0, 0, 255)";   DrawHex(ctx, 1, 1);
            ctx.fillStyle = "rgb(0, 0, 225)";   DrawHex(ctx, 3, 1);
            ctx.fillStyle = "rgb(0, 0, 195)";   DrawHex(ctx, 4, 1);
            ctx.fillStyle = "rgb(0, 0, 165)";   DrawHex(ctx, 6, 1);

            ctx.fillStyle = "rgb(0, 255, 0)";   DrawHex(ctx, 3, 2);
            ctx.fillStyle = "rgb(0, 225, 0)";   DrawHex(ctx, 4, 2);
            ctx.fillStyle = "rgb(0, 195, 0)";   DrawHex(ctx, 5, 2);
        }
    }

为此,需要重新计算形状坐标。

我想,我可以找到一些公式,可以重新计算坐标,并编写适当的函数。。。但是,可能有一些引擎已经开始这样做了?

任何想法都欢迎!

2 回复 | 直到 14 年前

okonomichiyaki 14 年前

你可能想看看杜布先生的三个.js:

http://github.com/mrdoob/three.js/

gblazex 14 年前

封装将数据转换为对象。

View simple demo -

六角形

// Hexagon
function Hexagon(ctx, color, pos, size, scale) {
    this.color = color;
    this.ctx = ctx;
    this.x = pos[0];
    this.y = pos[1];
    this.z = pos[2] || 0; // scale
    this.width = size.width;
    this.height = size.height;
}

六边形.拉伸

// Hexagon.draw
Hexagon.prototype.draw = function (x, y) {
    if (x == null || y == null) {
        x = this.x;
        y = this.y; 
    }
    var width  = this.width  + (this.width  * this.z), // scaled width
        height = this.height + (this.height * this.z), // scaled height
        cx  = x * (width + dist) - y * (width + dist) / 2,
        cy  = y * (3/4 * height + dist),
        ctx = this.ctx;
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.moveTo(cx, cy - height/2);
    ctx.lineTo(cx + width/2, cy - height/4);
    ctx.lineTo(cx + width/2, cy + height/4);
    ctx.lineTo(cx, cy + height/2);
    ctx.lineTo(cx - width/2, cy + height/4);
    ctx.lineTo(cx - width/2, cy - height/4);
    ctx.lineTo(cx, cy - height/2);  
    ctx.fill();
};

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var dist = 2;

// Create Hexagons
var size = { 
   width:  70, 
   height: 80 
};

var hexes = [
    new Hexagon(ctx, "rgb(0, 0, 255)", [1, 1], size),
    new Hexagon(ctx, "rgb(0, 0, 225)", [3, 1], size),
    new Hexagon(ctx, "rgb(0, 0, 195)", [4, 1], size),
    new Hexagon(ctx, "rgb(0, 0, 165)", [6, 1], size),
    new Hexagon(ctx, "rgb(0, 225, 0)", [3, 2], size),
    new Hexagon(ctx, "rgb(0, 225, 0)", [4, 2], size),
    new Hexagon(ctx, "rgb(0, 195, 0)", [5, 2], size)
];

function draw() {
    for (var i = hexes.length; i--;) {
        hexes[i].draw();
    }
}