I came across this example page here which draws 3D wireframe objects in orthographic mode.There’s also this page here which call various graphics object methods like graphics.createMesh and graphics.strokeMesh – these seem to be from an older version of Phaser, and I could not find the correct version.
Looking through the documentation of Phaser 3 (version at time of writing being 3.55), there seems to be some “Mesh” related classes such as Geom.Mesh.Vertex and Geom.Mesh.Face. Anyway, that interested me in seeing how easy it would be to render a filled Utah Teapot with perspective projection using the Geom Mesh classes – and here is the result.
The code uses back-face culling, painter’s algorithm and simple diffuse lighting. It works surprisingly well for the Teapot, and other models included in the code (all from the Phaser example page) like Torus and Geosphere. It does not work so well with the other models which are not “enclosed”.
I tried to rely as much as possible on methods provided by Phaser, but I ended up writing a method to apply separately the Model-View matrix and the Projection Matrix to a vertex to store the transformed coordinates to (vx,vy,vz) and (nx,ny,nz) respectively, and also a loader method to create the “Mesh” model with Geom.Mesh.Face and Geom.Mesh.Vertex. I wonder if there are more elegant ways to do this.
As with a lot of my other examples, there are much simpler (more efficient) ways of achieving the same, like Three.js or Babylon.js - this is just for coding fun!
