Hi,
as I searched this forum I found this function to convert 3D space coordinates to 2D screen / domElement coordinates:
createVector(x, y, z, camera, width, height) {
var p = new THREE.Vector3(x, y, z);
var vector = p.project(camera);
vector.x = (vector.x + 1) / 2 * width;
vector.y = -(vector.y - 1) / 2 * height;
return vector;
}
However the “blue” domElement - rect is not same same coordinates then the yellow Object3D in Threejs:https://web-ar.media/00_dev/viega01/test/
What might I´m doing wrong or not take into consideration?
Thanks for helping!
I suggest you use the same approach like CSS2DRenderer does:
vector.setFromMatrixPosition( object.matrixWorld );
vector.applyMatrix4( viewProjectionMatrix );
var element = object.element;
var style = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
element.style.WebkitTransform = style;
element.style.MozTransform = style;
element.style.oTransform = style;
element.style.transform = style;
Or you directly use CSS2DRenderer which can be really useful if you want to use HTML-based labels or tooltips connected with 3D objects.
https://threejs.org/examples/css2d_label
Thanks, this instantly runs like a charme.
One additional question: Is it somehow possible to tell CSS2DObject which scale it should have? Or to update its scale based on the 3D-Object it was added to?
As mentioned in the docs, CSS2DRenderer only supports translation (and no scale and rotation). However, you can try to manually adjust the dimensions of the HTML elements so it matches the 3D objects.