My goal is to create a tag or label that always faces the camera when a user clicks on an object, even if that object is rotated. How can I achieve this?
I've been advised to use an Orthogonal camera, but I'm not sure how to do that. Additionally, I was suggested to use CSS for the label. Refer to my previous post for more information: How can I make my text labels face the camera at all times? Perhaps using sprites?
Below you'll find the CSS and HTML code for a single cube label. I want to extend this functionality to multiple objects, so I'll need to create a list of tags for each cube in this case.
CSS:
label {
vertical-align: middle;
display: table-cell;
background-color : #99FFCC;
border: 1px solid #008000;
width: 150px;
}
HTML:
<div id="Cube1">
<label>Cube 1</label>
</div>
Previous Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js canvas - interactive - cubes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<script>
// JavaScript code here...
</script>
</body>
Feel free to ask for clarification if needed.