3d рисунок на холсте с HTML + JS

Question

Есть ли какой-нибудь фреймворк / движок, позволяющий рисовать 3D-изображения на Canvas?

Я планирую нарисовать несколько примитивов (разных форм), расположенных в одной плоскости:

    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);
        }
    }

Я хотел бы нарисовать эти примитивы в «перспективе»: более близкие фигуры (внизу экрана) будут больше, фигуры «далеко» (вверху экрана) должны быть меньше ...

Для этого необходимо пересчитать координаты фигур.

Думаю, я мог бы найти некоторые формулы, которые позволяют пересчитать координаты и написать правильные функции ... но, возможно, есть некоторые движки, которые уже делаютчто?

Пожалуйста, сообщите.

Любые мысли приветствуются!

Answer 1

Какую бы среду вы ни выбрали, вы должны научиться инкапсулировать ваших данных в объекты.

- Просмотреть простую демонстрацию -

Шестиугольник

// 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.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();
    }
}

Answer 2

Вы можете посмотреть на mrdoob three.js:

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