Exploring ThreeJS by Casting Rays on HTML Elements

Question

Exploring ThreeJS by Casting Rays on HTML Elements

We are currently encountering an issue with ThreeJS. Our goal is to integrate HTML elements into ThreeJS and use raycasting to determine whether we are pointing to any HTML element. However, when we intersect with it, it returns an empty array. An example of this scenario can be found in the following CodePen:

https://codepen.io/wazosa/pen/OJrqRRy?editors=1111

 mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  var intersects = raycaster.intersectObject(scene, true);
  console.log(intersects)
  if (intersects.length > 0) {
    
        var object = intersects[0].object;


  }

In this example, there is a div and a cube. Clicking on the cube will display it in the console, but clicking on the div element results in an empty array. Any suggestions on how to resolve this issue would be greatly appreciated.

Thank you in advance

javascript three.js 3d raycasting

Answer 1

Answer №1

Raycasting is a technique used to interact with objects in a three.js scene by detecting intersections. Objects that have a raycast method, like Mesh, can be targeted using a Raycaster. When you call

raycaster.intersectObject( scene, true )

, the Raycaster recursively searches through the scene for objects with the raycast method and executes it to determine if any intersections exist.

It's important to note that DIVs and other HTML elements are separate from the three.js scene as they belong to the webpage's DOM. Therefore, Raycaster cannot interact with them because it is unaware of their existence.

Exploring Options:

Option 1 suggests writing text to a texture and creating a Sprite to display the label, as Sprite supports the raycast method.

Option 2 proposes adding a representation of the HTML element to the scene, possibly using a transparent Sprite or similar billboard with correct orientation and positioning matching the 2D layout of the HTML element.

Option 3 mentions adding a click handler to an element containing labels, where the event object includes a target property representing the clicked HTML element. It also discusses the challenge of converting the 2D click position into a 3D point for spatial reference.

Answer 2

Raycasting is a technique used to interact with objects in a three.js scene by detecting intersections. Objects that have a raycast method, like Mesh, can be targeted using a Raycaster. When you call

raycaster.intersectObject( scene, true )

, the Raycaster recursively searches through the scene for objects with the raycast method and executes it to determine if any intersections exist.

It's important to note that DIVs and other HTML elements are separate from the three.js scene as they belong to the webpage's DOM. Therefore, Raycaster cannot interact with them because it is unaware of their existence.

Exploring Options:

Option 1 suggests writing text to a texture and creating a Sprite to display the label, as Sprite supports the raycast method.

Option 2 proposes adding a representation of the HTML element to the scene, possibly using a transparent Sprite or similar billboard with correct orientation and positioning matching the 2D layout of the HTML element.

Option 3 mentions adding a click handler to an element containing labels, where the event object includes a target property representing the clicked HTML element. It also discusses the challenge of converting the 2D click position into a 3D point for spatial reference.

Exploring ThreeJS by Casting Rays on HTML Elements

Answer №1

Exploring Options:

Similar questions

Mapping over an array and ignoring any undefined properties in a dynamic object

Modifying the content of JSON key values

Using JQuery to automatically scroll and anchor to the bottom of a dynamically populated div, but only if the user doesn't

Issue with karma-ng-html2js-preprocessor failing to generate modules

Implementing individual NGRX Selectors for each child component to enable independent firing

Stopping setTimeout when leaving the current page: Is it possible?

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

When attempting to use Ajax, the operation fails; however, if I directly access the URL,

The callback in Jquery getJSON does not execute even when a valid JSON response is received

Tips for sending a variable to control a particular panel within an accordion in Angular 2

How can you make a button in Vue only visible after all API calls have successfully retrieved the data?

Is it possible to create a pie chart using Chart.js with data fetched through an Ajax HTTP GET

Problem with jQuery ajax: Sending an array doesn't work

Troubleshooting problems with Chart.js scaling upon page load

Extracting information from a JSON file using React.js

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

Exploring the Three JS Perspective Camera's Field of View and Distance Range

Ways to modify the values of a Bootstrap Dropdown using a unique identifier

Include vue-videobg in Vuetify using CDN without the need for webpack

Is there a way to simplify and optimize the code further?