How do I pull 2d coordinates of rendered box on canvas?

Hey guys I’m working on a drawing based minigame (above image) and need some help with three.js. I’ve gotten as far as modeling the box and rotating it using three.js; as well as how to do the freehand drawing on the canvas element.
But I don’t know how to check the player’s drawing against the actual rendered box. I’m not sure how to pull the 2d coordinates of the rendered box on the canvas.


  1. You could manually do what vertex shader does - multiply every vertex of the box by model, view and projection matrix. That will give you ndc coordinates (you need only x and y) of each vertex as seen by the camera (from -1 to 1 horizontally and vertically with the zero point in the middle of the canvas).

  2. You could render the box using point geometry (1px point size) giving each box vertex a unique color and then find those on the canvas via javascript.