在3D中渲染正方形

考慮到正方形（在這種情況下是牆壁）的位置，「攝像機」的位置和旋轉等因素，我知道如何計算平方的四個點應該在哪裏當渲染到2D畫布時。在3D中渲染正方形

但是，我不知道如何實際渲染廣場。如果我有一個圖像，我該如何繪製它，以便它的四個角落位於我計算的四個點上？

更多信息：我實際上試圖做的是在迷宮內渲染視圖。我以前使用光線投射來完成這一點，類似Doom和Wolfenstein 3D。但是，這隻適用於較小的視圖（我決定使用320x240）。我想全屏渲染。任何關於渲染這種場景的建議（方形牆，基於精靈的對象等）將不勝感激。

來源

2013-02-24 Niet the Dark Absol

[圖像處理和紋理映射使用HTML5畫布？]可能的重複？（http://stackoverflow.com/questions/4774172/image-manipulation-and-texture-mapping-using-html5-canvas） – 6502 2013-02-24 17:34:24

你想渲染一個實心的正方形，或渲染一個矩形的圖像？ – 2013-02-24 17:42:25

@MarkHildreth我正在嘗試渲染圖像。 – 2013-02-24 18:47:52

不能完全確定，但這些方針的東西是什麼，我想你問：

//Credit to Andrea "6502" Griffini. 
//Pass context, image and points of triangle to draw 
function textureMap(ctx, texture, pts) { 
    var x0 = pts[0].x, x1 = pts[1].x, x2 = pts[2].x; 
    var y0 = pts[0].y, y1 = pts[1].y, y2 = pts[2].y; 
    var u0 = pts[0].u, u1 = pts[1].u, u2 = pts[2].u; 
    var v0 = pts[0].v, v1 = pts[1].v, v2 = pts[2].v; 

    ctx.save(); ctx.beginPath(); 
    ctx.moveTo(x0, y0); 
    ctx.lineTo(x1, y1); 
    ctx.lineTo(x2, y2); 
    ctx.closePath(); ctx.clip(); 

    var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; 
    var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; 
    var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; 
    var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; 
    var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; 
    var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; 
    var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; 

    ctx.transform(delta_a/delta, delta_d/delta, delta_b/delta, delta_e/delta, delta_c/delta, delta_f/delta); 
    //Edit to allow for repeated image 
    var x_max = Math.max(u0,u1,u2); var x_min = Math.min(u0,u1,u2); 
    var y_max = Math.max(v0,v1,v2); var y_min = Math.min(v0,v1,v2); 
    var x_iter = x_max-x_min; var y_iter = y_max-y_min; 

    for (var x=0; x<x_iter; x+=texture.width) { 
    for (var y=0; y<y_iter; y+=texture.height) { 
     ctx.drawImage(texture, x, y); 
    } 
    } 
    ctx.restore(); 
};

隨着渲染像箱子右邊的效果：http://www.placidcow.hostoi.com/pages/ExGl%20Crate.htm

希望幫助！

來源

2013-02-24 20:31:05

在3D中渲染正方形

回答

相關問題