Is there a way to implement tooltips in Three.js elements like spheres when hovering over them?
I am working with a 3D scatter plot and I would like a tooltip to appear every time the mouse hovers over one of the spheres in the plot.
Is it possible to create this tooltip using only WebGL?
What is the process for implementing this tooltip using DOM manipulation?
If you're searching for it, the term to know is "raycasting." Additional information can be found in the documentation and also in the provided examples.
Raycasting allows you to identify which object is currently located under the mouse cursor. This information can then be used to populate data within a tooltip and position it based on the mouse's coordinates. Alternatively, you can compute the screen position of the 3D object using a method like this to place the tooltip accordingly.
I began building upon Martin Schuhfuß's response to create this answer:
If you're interested in "raycasting," you can find additional information in the documentation and also check out the examples.
Raycasting allows you to determine which object is currently under the mouse cursor. With this knowledge, you can populate data into a tooltip and position it based on the mouse's location.
Another approach could be to use something similar to this method to calculate the screen position of the 3D object and place the DOM tooltip there using screen space coordinates.
Although creating tooltips with DOM is straightforward, the drawback is that you won't benefit from WebGL rendering features like shine, shadow, bump maps, etc., for your tooltips.
You can utilize a technique like this one to determine the screen position of the 3D object and position the tooltip accordingly in screen space coordinates.
Next, you'll need to figure out how to align content relative to your Three.js camera so that item size and position are in screen space. For assistance with this, refer to these discussions on the Three.js forum:
Once you've mastered drawing in screen space within Three.js, you can apply the methods outlined in the earlier Making it with DOM section to determine where to draw the WebGL tooltips in screen space.
There are multiple ways to draw WebGL tooltips:
renderOrder of objects to ensure UI components always appear on top. Refer to three.js: how to control rendering order for guidance.renderOrder to guarantee the quad is rendered above everything else.
The fastest approach might be the first option, although it is the most challenging. Conversely, the last option is likely the easiest but slowest; however, speed might not be critical depending on your specific requirements.
This list doesn't cover all possibilities. There are other techniques available too! Please feel free to enhance this explanation with additional methods or details.
If you have more questions, don't hesitate to ask. I can further expand on the answer.<
I am working on a form that includes 2 select tags with the options male and female. The first select, "gender", is visible to the user while the second select, "age", is hidden. <select name="gender"> <option value="1">Male</option> ...
I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the ...
In a given string variable "str," I am looking to concatenate another string between "InsertAfterMe" and "InsertBeforeMe". str="This is a string InsertAfterMe InsertBeforeMe" s1="sometext" s2="soMoreText" aList=[1,2,3,4,5] The concatenated string shoul ...
I'm currently developing a recipe box application and have shared the code pen for it: http://codepen.io/capozzic1/pen/gmpVyr?editors=0110. The code snippet is as follows: class RecipeList extends React.Component { constructor(props) { super(p ...
In my project, I have a Wrapper component that houses filters. This component becomes visible when the openMobileFilters() function is called and disappears when closeMobileFilters() is triggered. The Wrapper component occupies the entire page, and I want ...
Is there a way to create a multidimensional array in Arduino? I want something like this. C++ var arr = { name: "John", age: "51", children: [ "Sara", "Daniel" ] }; or maybe like this. JSON ...
After delving into a beginner's guide on React JS, I encountered a slight hiccup. The issue revolves around a simple problem within the button element; specifically, an event handler that requires passing an argument. This handler serves the purpose o ...
While testing a basic website, I encountered an issue with the Firefox webdriver not displaying a Javascript calendar window when a button is clicked. Even though the Selenium IDE successfully spawns the window, running the Java code does not result in the ...
Currently, I am in the process of developing an app using React Native and React Navigation, utilizing TypeScript. One important step I took was creating a type called RootStackParams for my routes as shown below: App.tsx export type RootStackParams = { ...
There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...
First of all, thank you for your help and support! I am struggling with correctly outputting HTML code with variables using jQuery and jQuery Mobile. I receive results from a PHP database, separated by "," and converted into a JavaScript array successfull ...
Struggling to send two parameters using the HTTP POST method in Angular.js. Here is the code I have implemented: Controller var installerApp = angular.module('installerApp', []); installerApp.controller('InstallerCntlr',function($scop ...
I attempted to add timestamps to all my requests by using morgan. Here is how I included it: if (process.env.NODE_ENV === 'development') { // Enable logger (morgan) app.use(morgan('common')); } After implementing this, the o ...
Hello everyone, I am attempting to update the value of useRef before the HTML is rendered. I have tried using useEffect for this purpose, but it runs after the HTML is ready, making it unsuitable for my needs. What I want to achieve is resetting the value ...
On my webpage, I have a text area with a character counter: <textarea class="form-control" rows="5" id="textArea" name='textArea' maxlength="250" style="resize:none" placeholder=""></textarea> <small> <span id="counter"& ...
I am experimenting with different effects on various breakpoints. My main goal is to achieve the following behavior: when a category is clicked from the list within 720px, the category list should fade out while the data is revealed in its place. However, ...
Looking to create an HTML button using jQuery that, upon clicking the chart button, will retrieve values from specified text inputs. These values will then be used to construct a JSON object which will subsequently be included in a GET request. $(".chart" ...
I am currently working on a checkbox filter function that saves the value of clicked checkboxes in an array. However, I am encountering issues with updating the computed data as it is always returning undefined. The structure of the data: Casino { brand_ ...
I have developed a script that calculates the number of weeks between two specified dates. It then generates a table where the number of rows equals the number of weeks. The script can be viewed on JSFIDDLE Script: $('#test').click(function ...
I have embarked on a project to create a Chrome extension that alters the information displayed on the thumbnails of YouTube's recommended videos. In this case, I am looking to replace the video length with the name of the channel. Imagine you are on ...