When rendering an image, each mesh within the scene undergoes a series of transformations involving the model matrix, view matrix, and projection matrix.
Model matrix:
The model matrix specifies the position, orientation, and size of a mesh in the scene. It transforms the vertex positions of the mesh from object space to world space.
View matrix:
The view matrix determines the viewing direction and position of the scene. It transforms from world space to view (eye) space. In the viewport coordinate system, the X-axis points left, the Y-axis points up, and the Z-axis extends out of the view (In a right-hand system, the Z-Axis is the cross product of the X-Axis and the Y-Axis).
Projection matrix:
The projection matrix maps 3D points in the scene to 2D points on the viewport. It transforms from view space to clip space, where the coordinates are then transformed into normalized device coordinates (NDC) in the range (-1, -1, -1) to (1, 1, 1) by dividing by the w component of the clip coordinates.
To determine the position of a point in the geometry on the viewport, all these transformations must be carried out along with conversion from normalized device coordinates (NDC) to window coordinates (pixels).
The transformation using the view matrix and projection matrix can be achieved through the project function:
vector.project(camera);
To convert from normalized device coordinates (NDC) to window coordinates (pixels), you can use the following method:
vector.x = Math.round( ( vector.x + 1 ) * w / 2 );
vector.y = Math.round( ( - vector.y + 1 ) * h / 2 );
Don't forget about the transformation with the model matrix, which can be executed as follows:
var modelMat = cube.matrixWorld;
vector.applyMatrix4(modelMat);
Modify the `getScreenPosition` function in a similar manner:
function getScreenPosition(position) {
var vector = new THREE.Vector3( position.x, position.y, position.z );
// model to world
var modelMat = cube.matrixWorld;
vector.applyMatrix4(modelMat);
// world to view and view to NDC
vector.project(camera);
// NDC to pixel
vector.x = Math.round( ( vector.x + 1 ) * w / 2 );
vector.y = Math.round( ( - vector.y + 1 ) * h / 2 );
return vector;
}
Explore the code snippet below:
/* cannot be seen here; thanks jsfiddle */
/* Camera Variables */
/* Three.js Elements */
render();
function render() {
}
function getScreenPosition(position, object) {
return vector;
}
function updateLabel() {
}
function handleMouseDown(ev) {
}
function handleTouchStart(ev) {
}
function mouseOrTouchDown(downX, downY, touch) {
}
function handleMouseMove(ev) {
}
function handleTouchMove(ev) {
}
function mouseOrTouchMove(x, y) {
}
function updateCamera() {
}
body {
}
#label {
}
<div id="label">label</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c6dac0d7d7f2829c838384">[email protected]</a>/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="493d213b2c2c09796778787f">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>