HTML调用3Dmax,javascript – 使用HTML JS在Canvas中绘制3d

是否有任何框架/引擎能够在Canvas上绘制3D图像？

我打算在一个平面上绘制一些基元(不同的形状)：

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

}

}

我想在“透视”中绘制这些基元：更接近的形状(在屏幕的底部)将更大,“远离”的形状(在屏幕的顶部)需要更小…

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

猜猜,我可以找到一些允许重新计算坐标并编写适当函数的公式……但是,可能有一些引擎已经在做了吗？

请指教.

欢迎任何想法！