Are THREE.js CSS2D Text Labels able to be detected and distinguished by RayCasting?

Currently, I am in the process of creating a diagramming tool using THREE.js. To add text labels to my diagrams, I have been utilizing the CSS2D feature provided by THREE.js, which allows for text that is both rotatable and MathJax-friendly.

For regular mesh objects such as cubes, spheres, and lines, I have successfully implemented object picking using the THREE.js raycaster. Everything works smoothly, with the mouse cursor changing to the text cursor when hovering over a CSS2D text label. However, I have encountered an issue where the raycaster doesn't recognize CSS2D label objects. Instead, it seems to "see through" these labels and picks up mesh objects even if they are situated behind the labels.

I am now seeking advice on whether it is possible to enable object picking for CSS2D objects and what steps I should take to achieve this functionality.

cssthree.jsraycasting

Answer №1

The CSS2DObject class serves as a container for HTML elements, making it easy to add event listeners for interaction detection:

const header = document.createElement( 'div' );
header.className = 'title';
header.textContent = 'Header';

header.addEventListener( 'mouseover', event => console.log( event ) );

const title = new CSS2DObject( header );

Note that using THREE.Raycaster with CSS2DObject is not compatible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generating a 3D path using latitude and longitude coordinates in Three.js

Looking to create a pipe-like structure based on geographic coordinates, the data is in JSON format with latitude and longitude values. Here's an example of how it looks: [ { "LATITUDE": "55.10185525", "LONGITUDE": "-76.4629527" }, { "LAT ...

javascript3dthree.js

Tips for refreshing a Twitter feed in real-time by utilizing AJAX requests and JavaScript

I recently started learning javascript and I'm struggling with loading a new twitter feed based on user input. Here is the code I have been working on: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /& ...

javascriptjqueryhtmlcssajax

Illumination scope for directional lights in three.js

In the world of three.js, calculating shadows for directional lights involves setting a range based on a bounding box that extends from the light source. This means that if I want to limit how far shadows are rendered, I need to adjust the bounding box geo ...

javascriptthree.js

100% height checkbox div covering the entire body

I'm struggling to limit the height of a div containing multiple checkboxes so that it doesn't exceed 100% of the window's height. I've tried numerous solutions but haven't found one that works. If anyone has any tips or tricks to h ...

javascriptjqueryhtmlcss

Is it possible to override Bootstrap or not?

It's quite a puzzle to figure out when I can and cannot override Bootstrap classes or IDs with custom CSS. For instance, it seems easy enough to change the default navbar-dark background and font style, but altering the font color and size proves to ...

csssassbootstrap-4

What are the best methods to activate grayscale and transition effects on Firefox and Internet Explorer?

In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...

css

Creating a unique dimming effect for modals in a React application

Could someone assist me in adding opacity or dimming the background while a modal is open using the code provided? You can view the working example here. ...

cssreactjsbootstrap-modalopacity

Unable to modify the appearance of an HTML element when injected via a Chrome extension

I am currently developing a unique chrome extension that uses Ajax to inject custom HTML into the current tab. This extension appends a <div> element to the body, and now I need to manipulate it using JavaScript. Specifically, I want it to dynamical ...

javascriptjqueryhtmlcssajax

Creating a mesmerizing glass effect in Three.js using a PNG image mask on a video texture

The other day, I revisited activetheory.net and was captivated by the beautiful glass effect on the Homescreen logo border. I tried to replicate it by examining the minified code and discovered they were using a PNG as a mask. I successfully loaded a PNG ...

javascriptthree.jswebglshader

Eliminate the margin on the subnavigation menu

Hey there, I'm looking to adjust the layout of my menu buttons by removing the left and right "margins" (if that's the correct term), so they all fit neatly inside the navigation bar. https://i.sstatic.net/udes8.png I want to ensure that all th ...

htmljquerycss

Shifting the position of personalized tabs using Jquery

I have created some basic HTML/CSS tabs and I want to move to the next tab by clicking a link at the bottom of every tab. HTML <ul class="tabs"> <li class="active"> <a href="#">Explainer (2mins)</a> <div class=" ...

javascriptjqueryhtmlcsstabs

Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS. https://i.sstatic.net/vKwLE.png Below is the HTML code snippet: <div class="row menu"> <ul ...

htmlcsstwitter-bootstrap

Error: The function lerp() is not a valid function in THREE.Math

My quest for online references on WEBGL Three.js Games led me to a game with perfectly working source code. However, I encountered an error that the original creator did not face. Upon inspection, I found the following error message: TypeError: THREE.Math ...

graphicsthree.js

Horizontal Scrolling Menu for Dynamic Page Navigation

My goal was to create a smooth-scrolling one-page website that scrolls horizontally. One feature I wanted was a menu that smoothly slides into view whenever a new page is in focus along with the horizontal scrolling. I found an example of a scrolling scr ...

javascriptjquerycssscroll

I need assistance comprehending the terms "constructed stylesheet" and #shadow-root in CSS

I am currently trying to override some CSS for an Angular widget, but no matter what I try, the styles don't seem to change. It appears that the widget is being loaded into multiple nodes labeled #shadow-root. I have done some research on this issue, ...

cssshadow-dom

What method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named ...

htmlcssiframe

The combination of loading and scrolling JavaScript code is not functioning properly on the website

I created an HTML webpage that includes some JavaScript code to enhance the user experience. However, I encountered an issue when trying to incorporate a load JavaScript function alongside the scroll JavaScript function on my page. The load script is posi ...

javascripthtmlcss

Embedding a styled list item within a list

How can I customize the style of list items within a list? HTML code <span class=bbb> <ul> <li>Preparing archive inquiries about study periods or work experience at LLU: <ul> <li>Within seven days - 5 ...

csshtml

The PointCloud vertices in Three.js consistently provide a position of (0,0,0)

I'm working with a PointCloud named "cloud" that is centered at (0, 0, 0) and consists of approximately 1000 vertices. These vertices' positions are being manipulated by a vertex shader. My goal now is to log the position of each vertex to the co ...

javascriptthree.jsvertex-shader

Troubleshooting problem with presenting real-time data in a Bootstrap Carousel using PHP

Currently, I am in the process of developing a dynamic events calendar to showcase on a website homepage. The information displayed on this calendar is retrieved from a database using PHP. Additionally, I have implemented the Bootstrap framework (version 4 ...

phphtmlcssbootstrap-4