Skip to content

ranon-rat/3d-canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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