/3d-canvas

im just trying okay

Primary LanguageTypeScript

3d canvas

hello i make this project based in this article of wikipedia that helps me a lot for make this little project.

the formulas

Im using the perspective projection and it looks really good, other than that im using this formulas for transform the 3d matrix to a 2d matrix first im using this formula for transform the camera rotation, the camera position and the object position.

S=Sin (alfa)
C=Cos(alfa)
X=objectX-cameraX
Y=objectY-cameraX

img

and then i transform the 3d matrix to a 2d matrix, using this formula: (the e means the pinhole position)

img

translated in code its something like this

let X = camera.xPos - node.x;
let Y = camera.yPos - node.y;
let Z = camera.zPos - node.z;




let C = { x: Math.cos(camera.theta.x * camera.rad), y: Math.cos(camera.theta.y * camera.rad), z: Math.cos(camera.theta.z * camera.rad) }
let S = { x: Math.sin(camera.theta.x * camera.rad), y: Math.sin(camera.theta.y * camera.rad), z: Math.sin(camera.theta.z * camera.rad) }
let d = {
  x: C.y * (S.z * Y+ C.z * X) - S.y * Z,
  y: S.x * (C.y * Z + S.y * (S.z * Y + C.z * X)) + C.x * (C.z * Y - S.z * X),
  z: (C.x * (C.y * Z + S.y * (S.z * Y + C.z * X)) - S.x * (C.z * Y - S.z * X))
}

let bX= (camera.pinhole.z / d.z) * d.x + camera.pinhole.x
let bY= (camera.pinhole.z / d.z) * d.y + camera.pinhole.y

the results

Sometimes i see some weird stuff but it works i think. img