acá el ejemplo: //jsfiddle.net/cincibeles/z3m9unLj
El motor se puede descargar de acá https://drive.google.com/open?id=1sYR50GyychK0Ng0Ip3YkRabfDqVzqIQC
y básicamente es ta compuesto de cuatro partes.
var lm3d=new Simple_lineM3d(document.getElementById('canvas2d')); var camera = { pos:{x:0, y:0, z:-40}, ang:{x:0, y:0, z:0}, distance:0, zoom:100 } var obj = { pos:{x:0, y:0, z:0}, ang:{x:0, y:0, z:0}, scale:{x:10, y:10, z:10}, vtx:[ [-1,-1,-1], [1,-1,-1], [1,-1,1], [-1,-1,1], [-1,1,-1], [1,1,-1], [1,1,1], [-1,1,1] ], lines:[ [0,1, 1], [1,2, 1], [2,3, 1], [3,0, 1], // techo color 1 [0,4, 2], [1,5, 2], [2,6, 2], [3,7, 2], // postes color 2 [4,5, 3], [5,6, 3], [6,7, 3], [7,4, 3] // base color 3 ] }
Inicializa el motor y las variables camara y objeto. Como vemos, el objeto indica sus vertices y sus líneas: [vxtA, vtxB, color].
var puntos = lm3d.puntos( obj.vtx, obj.pos.x,obj.pos.y,obj.pos.z, obj.ang.x,obj.ang.y,obj.ang.z, obj.scale.x,obj.scale.y,obj.scale.z, camera.pos.x,camera.pos.y,camera.pos.z, camera.ang.x,camera.ang.y,camera.ang.z, camera.distance, camera.zoom )
Calcula la proyección de vertices según un objeto y una cámara dada.
lm3d.dibujar( obj.lines, puntos );
Dibuja en en el buffer del data que ya tiene un buffer de z para no preocuparse por el orden.
lm3d.blit([0xaaaaaa,0x0000ff,0x00ff00,0xff0000]);
Pasa todo el buffer al canvas y vacía el buffer. Se le pasa un array con la paleta de colores que usaran las líeneas.
Sencillo, no? ahora, todo lo metemos en un intervalo y vamos cambiando el angúlo de el objeto. Listo.
Como se puede ver, mi FX chip es básicamente este motor 3D, ya solo restaría hacer el juego.
No hay comentarios.:
Publicar un comentario