Hi all, please help, I got really stuck with this issue of aligning HTML to 3D, I tried everything I can, the problem seems to be in functions callbacks or something.
I’m looking for a way to get result like this https://threejsfundamentals.org/threejs/lessons/threejs-align-html-elements-to-3d.html
or this
https://ramikh3d.ru/webgl/3DCar_W3/ (please click CUSTOMIZE>PROTECTION to see those CSS elements being with 3D anchors, view source: https://ramikh3d.ru/webgl/3DCar_W3/gl.js)
But in the example I’m currently working on, I can’t align “labels” divs to anchors glb, if I place this code to the “animate” or “update()” function, it seems that the update function just can’t get access to variables of anchors because of some wrong functions placement or something
anchor1.updateWorldMatrix(true, false);
anchor1.getWorldPosition(tempVLEFT);
tempVLEFT.project(camera);
const x = (tempVLEFT.x * .5 + .5) * canvas.clientWidth;
const y = (tempVLEFT.y * -.5 + .5) * canvas.clientHeight;
elem.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
Thanks for your time!