My knowledge of JS is limited, but I am eager to use JS functions to create labels for Three.js functions.
It seems like I'm struggling to create individual labels for each vertex in this scenario. Why does it only generate one label?
update_labels:
function update_labels( vpos ) {
var pos = get_screen_xy( vpos , camera );
note.style.display = 'block';
if ( pos.x >= x_max ) {
note.style.left = '';
note.style.right = x_max - pos.x;
} else {
note.style.right = '';
note.style.left = pos.x;
}
if ( pos.y == y_max ) {
note.style.top = '';
note.style.bottom = y_max - pos.y;
} else {
note.style.bottom = '';
note.style.top = pos.y;
}
}
get_screen_xy:
function get_screen_xy( position, camera ) {
var pos = position.clone();
projScreenMat = new THREE.Matrix4();
projScreenMat.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
pos.applyProjection( projScreenMat );
return { x: ( pos.x + 1 ) * window.innerWidth / 2,
y: ( - pos.y + 1 ) * window.innerHeight / 2 };
}
using function:
function getpos1(){
var notepos1 =objects.geometry.vertices[0];
update_labels( notepos1 );
}
// additional getpos functions omitted for brevity
function animate() {
requestAnimationFrame( animate );
controls.update();
render()
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
// calling all getpos functions
}
I would appreciate any assistance in resolving this issue. Thank you!
Thank you, 2pha:
With your guidance, I was able to make progress.
However, there is a lot of repetitive code. Can we optimize it further to achieve perfection?
Here is the complete code snippet:
<html>
<head>
<title>Demo: Implementing 2D labels for 3D objects using Three.js</title>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
</head>
<body>
// Code for initialization and rendering omitted for brevity
</body>
</html>