Есть ли фреймворк / движок, обеспечивающий возможность рисования трехмерных изображений на холсте?
Я планирую нарисовать несколько примитивов (разных форм), расположенных в одной плоскости:
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);
}
}
I хотел бы нарисовать эти примитивы в «перспективе»: более близкие формы (внизу экрана) будут больше, фигуры «далеко» (вверху экрана) должны быть меньше ...
Для этого Координаты целевых форм необходимо пересчитать.
Думаю, я смог найти формулы, позволяющие пересчитывать координаты и писать правильные функции ... но, наверное, есть некоторые движки, которые уже делают это?
Посоветуйте.
Любые мысли приветствуются!