Reversing the process of raycasting in Three.js

I am in the process of setting up an interactive world map on a curved plane that allows users to rotate and highlight countries. Upon clicking on a specific country, I am able to identify the selection and display a tooltip with relevant information about the chosen country, similar to what is shown in the screenshot linked below:

https://i.sstatic.net/ZhBtb.jpg

The map itself is generated in three dimensions, while the tooltip is represented using a basic div element. My goal is for the tooltip to remain fixed at the exact location of the selected point on the texture, even when the plane is rotated. Initially, the position of the tooltip is determined by data from the raycaster. Therefore, I would like the application to provide the current coordinates of that precise point relative to the container (or window), possibly based on UV coordinates. How can this functionality be achieved?

javascriptcssthree.js

Answer №1

After reviewing the insight from @prisoner849's link, I have successfully integrated the solution below:

a) When the mouseup event occurs, a new 3D origin point for the tooltip is set (unless there was a significant change in the mouse position, indicating camera movement instead of a click).

b) On each frame, the function below is executed to convert the 3D coordinates to 2D and determine the tooltip's position:

function adjustTooltipPosition( camera, renderer, tooltip, lastClickPoint ) {
  var canvas = renderer.domElement,
      point = new THREE.Vector3();

  point.x = lastClickPoint.x;
  point.y = lastClickPoint.y;
  point.z = lastClickPoint.z;

  point.project( camera );

  point.x = Math.round((0.5 + point.x / 2) * (canvas.width / window.devicePixelRatio));
  point.y = Math.round((0.5 - point.y / 2) * (canvas.height / window.devicePixelRatio));

  point.x -= 14; // Adjusting the x position for alignment
  point.y -= (tooltip.scrollHeight * 0.7); // Adjusting the y position

  tooltip.style.transform = 'translate(' + point.x + 'px, ' + point.y + 'px)';
}

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

Troubleshooting CSS rendering issues on Chrome browser

Currently in the process of developing a new website based on an old template. The site appears as intended in IE, Safari, and Firefox, but for some reason Chrome is not rendering any of the css. Just to clarify, none of the links are functioning at this ...

htmlcssgoogle-chrome

What is the best way to insert an HTML attribute into a dynamically generated build script within Angular?

After running the ng build --prod command, Angular creates 4 scripts. One of these is called main.js. I am wondering if there is a way to dynamically add an HTML attribute to this script tag in the index.html file once the build process is complete. I nee ...

javascriptangular

Best practices for aligning the widths of input-group-addon elements

Hey there, I'm working with an HTML file that has 3 input options. Here's a snippet: <script type="text/ng-template" id="dashboard_assigngroup_popup.html"> <div class="modal-header modal-header2"> <h3 class="modal-tit ...

javascriptcssangularjshtml

Revamping the Jquery Waypoint

Greetings, I am currently delving into the world of Jquery waypoints and facing a bit of challenge getting it to work. My goal is to have an "alert" pop up once an element becomes visible on the screen, but for some reason, the alert doesn't show up w ...

javascriptjqueryhtmlcssjquery-waypoints

What is the reason for the global error handling middleware being executed post sending the response in express js?

Why is the global error handler being reached and the value of "err" is 404 when I am sending the response from the /test route? The request-response cycle should end at that point, so why is it not throwing an error in the response but logging 404 to the ...

javascriptnode.jsexpressserverbackend

Approach the data from various angles, customize the rendering of container components using parameters

Is it considered an antipattern to have a container component return different representation elements based on a condition variable passed to it? For example, I have routes for both the SummaryPageComponent and CustomersPageComponent. The Summary page ha ...

javascripthtmlcssuser-interfacereactjs

Error 16 occurred when attempting to ngUpgrade two different versions of Highcharts

After successfully upgrading my app to use ngUpgrade, I encountered an issue while trying to incorporate Highcharts. In the original version of the app, there was an older version of Highcharts designed for AngularJS. However, in the new hybrid app using ...

javascriptangularhighchartsng-upgrade

What is the best way to determine when all asynchronous tasks and callbacks have been completed so that we can proceed securely?

Here is a code snippet that reads a file containing documents sorted by categories and values in descending order. It then modifies the documents with the highest value for each category. Below is the code: var MongoClient = require('mongodb'). ...

javascriptnode.jsmongodbasynchronouscallback

Attempting to iterate over an array and utilize a foreach loop to return several sets of data

In my original code, getProductInfo took two parameters (res, sku). However, I now want to pass a set object containing SKU numbers and for each SKU, send the data using res.send. const activeProductBank = new Set([6401728, 6430161, 6359222, 6368084]); g ...

javascriptapiexpressroutes

Is there a way to customize the look of the time selected in the <input matInput type="time" step="1" /> time picker?

Currently, I am utilizing the following code as a time picker in my Angular 9 application. My goal is to modify the selected time's color to a bright blue shade. How can I accomplish this task? <input matInput type="time" step="1&quo ...

javascriptcssangulartypescriptangular-material

Leveraging $http and $q in an Angular configuration with a service/provider

My goal is to load specific configurations for each controller in the app.config section. Each controller requires a distinct set of data, but these sets are not mutually exclusive. I am struggling to find a solution to this issue. .config(['$routePr ...

javascriptangularjspromise

Retrieve all items pertaining to a specific week in the calendar

I'm trying to obtain a list of week ranges for all data in my MongoDB. When a week range is clicked, only the records for that specific week range should be displayed. By clicking on the week range, the ID of the week (let's say 42, representing ...

javascriptmongodbmongoose

Display a random div element in jQuery without specifying a specific class

I have a dynamic list that I am displaying in a div as shown below <div class="cards card1"> <div class="front"> <p>Front 1</p> </div> <div class="back1" style="display: none"> <p>Back 1</p> ...

javascriptjqueryhtmlcss

Buttons for toggling D3 bubble chart display mode

As a beginner in D3.js, I am exploring the creation of a bubble chart with a toggle button to switch between different presidential campaign candidates. While I succeeded in making the chart for one candidate, I am encountering difficulties implementing th ...

javascriptjqueryhtmlcssd3.js

Simple guide on implementing React with Typescript to support both a basic set of properties and an expanded one

I'm grappling with a React wrapper component that dynamically renders specific components based on the "variant" prop. Despite my efforts, I cannot seem to get the union type working properly. Here's a snippet of the code for the wrapper componen ...

javascriptreactjstypescript

Storing a variable in Vue on one page and accessing it on another page

Is there a way to transfer a value from config.js file to Geturl.vue? The content of the config.js file is as follows: var myUrl = "http://localhost:7070/#/"; The code snippet in my view file (Geturl.vue) is shown below: <div id="app>> <p ...

javascriptvue.jsvuejs2vue-component

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

I am experimenting with a unique combination of a Pure CSS in-page anchoring solution using scroll-behavior: smooth and scroll-margin-top settings, along with a sticky header for in-page navigation. By utilizing IntersectionObserver, I can identify when t ...

javascripthtmlcssintersection-observerscroll-margin-top

Adjusting webpage zoom based on different screen sizes

Hey there, I ran into an issue with my web page design. It looks great on my desktop monitors, but when I checked it on my laptop, things went haywire. Strangely, adjusting the zoom to 67% seemed to fix the problem. Both screens have a resolution of 1920 ...

javascripthtmlcsszooming

Spin and shift image of a ball using Html 5

Now the image will be moved without rotating. I have implemented moving functionalities, but it only supports IE10. Here is the script I am using: var ball = new Image; window.onload = function () { var c = document.getElementsByTagName('canvas&apos ...

htmlcssanimation

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

I attempted to create a login form on an HTML page using Angular, featuring a full-size background image that is centered. The form itself is contained within a div with a blurred background, also centered both horizontally and vertically within the browse ...

htmlcssangularresponsive