How to place a 3D model on the stage at the specified coordinates?

Question

JavaScript

I am trying to do the following I have a video tag that displays a picture from my camera. I have a model which is displayed on the stage. Initially, it is displayed in the center. The image from my video is used as the background of the scene (scene.background). Using tracking.js, I determine the location of the person's face in the window. How do I place the model on the stage in the place where the face is found? For example, a face is defined in the upper left corner of the window. I need to position my model on the stage in the top left corner too. How to do it? I only have x,y coordinates. And the scene needs x, y, z, and as I understand it, they should be in the range [-1; one]

Answer 1

Translate one coordinate to another. Google transformation matrices.

Answer 2

I don't know how this tracking.js doesn't work very well. I tried to combine the canvases and somehow roughly select the coordinates, it works but so-so, you have to sit and try to adjust (maxX, maxY ), etc. For example, I drew a cube in an arbitrary position, it will be possible to load any other one later, but if you want the 3D model to be also on the whole face, then you need to either scale it somehow or move the object along z ... Here is an example