Using THREE.js to animate objects and have them settle onto a specific face

I'm currently working on adding pins to a curved map of the US, but I'm facing some challenges. Right now, I'm using mathematical calculations to determine their distance from the highest part of the curve and adjust their height accordingly. However, due to variations in elevation across different states, some pins are not aligning correctly - leaving some hovering in mid-air and others buried too deep.

My goal is to have all the pins start at a certain height and then move downward until they make contact with the map surface. Unfortunately, my search for reliable information or solutions on implementing collision detection in THREE.js has been unsuccessful so far.

Is there a better approach I could take? How can I ensure that these pins accurately rest on the curved map's surface?

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

javascriptthree.js

Answer №1

After receiving guidance from @TheJim01, I implemented a solution by utilizing a Raycaster at the position of each marker. By directing it downwards and utilizing the distance property of the initial intersection, I successfully adjusted the Y position of the marker.

There were a couple of stumbling blocks along the way. It took some time for me to realize that I needed to use the world position of the markers instead of their local position, considering they are all part of the map object's children. Additionally, I had shifted the map's position and rotation prior to creating the Raycaster, causing the orientation of "downward" to change. To resolve this, I arranged the markers before manipulating the map's position.

const raycaster = new THREE.Raycaster();

markers.forEach(marker => {
    raycaster.set(marker.getWorldPosition(), new THREE.Vector3(0, -1, 0).normalize());
    let intersects = raycaster.intersectObjects([map]);
    if(intersects.length) {
        marker.position.y -= intersects[0].distance;
    }
});

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

Why does the final value appear when passing an incrementing counter as a prop to multiple React Components created in a loop?

I am currently unraveling the concept of closures in JavaScript. Within this code snippet, I am cycling through the values of the 'items' array using a foreach loop. I have defined a let variable named "count" outside the scope of the loop. Afte ...

javascriptreactjstypescriptclosures

Label the timeline map generated with the leaftime plug-in for leaflet in R with the appropriate tags

Here is a code snippet extracted from the R leaftime package documentation examples. It generates a map with a timeline that displays points as they appear over time. I am interested in adding labels to these points to show their unique id numbers. Upon ...

javascriptrleaflet

Modifications performed on the Xhtml generated from xml and XSLT should be mirrored back into the original XML document

After transforming an XML file with xsl and loading it into a browser as html, I am making the html editable using the content editable attribute of html5. How can I transform their edits back to the original xml document, even if they add new nodes to e ...

javascriptajaxxmlxsltxhtml

Root scope digest trigger delay

When invoking $scope.$apply() ten times consecutively, it is expected that ten root scope digests will occur. If the call to $scope.$apply() is debounced so that the trailing call always completes, can we assume that the final state of the application rem ...

javascriptangularjsdigest

What's the reason behind the failure of bitwise xor within a JavaScript if statement?

I'm trying to understand the behavior of this code. Can anyone explain it? Link to Code function checkSignsWeird(a,b){ var output = ""; if(a^b < 0){ output = "The "+a+" and "+b+" have DIFFERENT signs."; }else{ output = ...

javascriptbitwise-operatorsbitwise-xor

Managing and displaying information provided through forms

I'm currently developing a URL shortening tool, but I'm encountering difficulties in extracting jQuery form values to generate the shortened URL text. You can view the form layout here: <form name="urlForm"> <input type="text" name ...

javascriptjqueryajaxforms

What steps can be taken to modify this jQuery code so that any changes made are also saved to localStorage

I have successfully used jQuery to change the background color of all my divs with the same class (userNumber1) when I check its checkbox. However, I am now looking for a way to save these changes to localStorage, so that they persist each time the page is ...

javascriptjquery

React app experiencing issues with Bootstrap offset functionality specifically when paired with a button element

I am struggling to position the button after two columns of space in this code snippet. Despite my efforts, the button remains pulled to the left and I can't seem to update it. { values.contact_persons_attributes.length < 2 && <div className= ...

javascripttwitter-bootstrapreactjsbootstrap-4

Turning a JSON formatted string into parameters for a function

Looking to convert a string of JavaScript objects into function arguments. The string format is as follows: "{ "item1": "foo 1", "item2": "bar 1" }, { "item1": "foo 1", "item2": "bar 2" }" While I can use JSON.parse to turn it into an array, the challeng ...

javascriptjsonfunctionobjectarguments

Prompting Javascript Alert prior to redirection in ASP.NET

My current code is set up to display a message in an update panel while updating: string jv = "alert('Time OutAlert');"; ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "msg", jv, true); It's working well in displaying the me ...

c#javascriptasp.netajaxupdatepanel

Working with three.js: Implementing an external texture in a glTF file

In my quest to apply a texture file to a 3D model using three.js, I've hit a roadblock. Despite days of research and numerous attempts, I just can't seem to get it right. Here is the method I've been using to set the current object in the sc ...

javascriptthree.jsmodel3dtextures

Updating a validation directive on $watch in AngularJS version 1.2

I created a directive for validation on a multi-select that allows for dynamic length validation of selected items. The directive is used like this: (function() { 'use strict'; angular .module('myModule') .dire ...

javascriptangularjsvalidation

Resizing a column to match the dimensions of a grid of pictures

Imagine you have a website structured like this. #left_column { width: 200px; } <div id="left_column"> /* some content */ </div> <div id="right_column"> /* A series of photos each with a width of 100px and floated */ </div> In t ...

javascripthtmlcss

Gatsby's own domain and absolute links: the perfect pair

My goal is to establish a direct link to files (such as images and downloads) in my static directory. During development, the link should be http://localhost/myimage.jpg, and once deployed, it needs to switch to https://www.example.com/myimage.jpg. Is the ...

javascriptreactjsgatsby

There was a serious issue: The mark-compacts were not working effectively near the heap limit, resulting in allocation failure - the JavaScript heap ran out of memory during the

I recently set up a t2.micro server on AWS and encountered an issue when running our application with the command "sudo npm start". The error message I received was: "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript he ...

javascriptnode.jstypescriptnpmamazon-ec2

Leap over in a similar fashion to the provided demonstration

In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for success ...

javascriptjqueryhtmlcss

Puppeteer encounters difficulty when attempting to click on a particular div element within Gmail

I am attempting to click on the three dots in Gmail by following this link: 1 After that, I want to click on the 'mark all as read' option: 2 Clicking on the three dots works without any issues. However, I am encountering difficulty when tryin ...

javascriptpuppeteer

Issue obtaining information from Firestore and presenting it visually on the screen

I have been working on developing a website using Angular and Firebase. The site allows different users to create accounts, and registered users can add contacts to the Firestore database. However, I have encountered a problem where the added contact info ...

javascriptangularfirebasegoogle-cloud-firestore

Sleek dialog sliding animation with Svelte

I'm struggling with a svelte component that I have and I'm trying to implement a slide down animation when it closes. The slide up animation is functioning correctly, but for some reason the slide down animation is not working. Does anyone have a ...

javascripthtmlcsssvelte

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

javascripthtmlcssaccordion