Estoy creando un programa en javascript que representa un mundo 3D en la pantalla 2D desde cero. Creé una función para calcular el valor x en la pantalla en la que se mostrará un punto 3d. También debe tener en cuenta el ángulo de la horizontal alrededor del cual se deben rotar los puntos. Para hacer esto, intenté convertir a coordenadas esféricas y luego agregar el ángulo x del espectador a uno de los valores. Por alguna razón distorsiona todo cuando no estás mirando a cero grados. Aquí está el código y aquí está el resultado de todo el programa: https://3d.napoleon1027.repl.co/ (En este momento está configurado para girar lentamente cada tres segundos, y puede moverse con las teclas de flecha/WSAD)

 function fx(x,y,z){ //calculates the x, y, and z values relative to your position z-=pz x-=px y-=py //converts the cartesian coordinates to spherical var r=Math.sqrt(x**2+y**2+z**2) var t=Math.acos(z/r) var f=Math.atan(y/x) if(x<0){ f+=Math.PI } //adds your angle to the angle of theta t+=xangle //converts the spherical coordinates back to cartesian x=r*Math.cos(f)*Math.sin(t) y=r*Math.sin(f)*Math.sin(t) z=r*Math.cos(t) //adds the player coordinates back z+=pz x+=px y+=py //returns the x value that this point should be drawn onto the screen at return (x-px)/(z-pz); }