I have been experimenting with combining canvas interactive objects and mouse tooltips in my project. I am trying to generate text labels on rotating cubes, but I am facing some issues. The text moves along with the cubes' rotation and sometimes appears distorted.
I want to achieve a fixed text display similar to the mouse tooltip example shown here: . I attempted to incorporate sprites into my code but encountered errors. I would appreciate it if someone could guide me on how to implement this feature correctly.
Thank you in advance for your help.
Below is the current state of my 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>
// Code to be added here
</script>
</body>