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