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

Questions
,
1

image
image933×608 146 KB

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.

Thanks

2

  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.