Tips for Adding a Marker with Latitude and Longitude on a Three.js 3D Globe

Having some trouble with a basic 3D Globe in Three.js. Using Navigator to get the user's location and trying to place a marker on the globe representing the user's current position. However, I can't seem to get the marker at the correct position. The 3D Globe also rotates. How can I fix the position of the marker and make it rotate along with the Globe?

For reference, you can view an example here.

Here is the code snippet:

    var renderer    = new THREE.WebGLRenderer({
        antialias   : true
    });
    // more code...

Answer №1

To accurately position an object on a planet, you must convert from spherical coordinates to cartesian coordinates.

If the texture offset of your sphere remains unaltered, the following code will achieve the desired placement:

/**
 * Function to position an object on a planet's surface.
 * @param {THREE.Object3D} object - the object to position
 * @param {number} lat - latitude coordinate
 * @param {number} lon - longitude coordinate
 * @param {number} radius - radius of the planet
 */
function placeObjectOnPlanet(object, lat, lon, radius) {
    var latRad = lat * (Math.PI / 180);
    var lonRad = -lon * (Math.PI / 180);
    object.position.set(
        Math.cos(latRad) * Math.cos(lonRad) * radius,
        Math.sin(latRad) * radius,
        Math.cos(latRad) * Math.sin(lonRad) * radius
    );
    object.rotation.set(0.0, -lonRad, latRad - Math.PI * 0.5);
}

Remember that you can achieve the same result using THREE.Spherical.

Take a look at this fiddle example for reference.

If you wish for your pins to rotate along with the planet, consider adding them as children of the planet. Alternatively, add both the planet and pins to the same THREE.Object3D:

var object = THREE.Object3D();
object.add(planet);
object.add(pins);
object.rotation.y = 1.0;

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

The 'load()' event method in jQuery does not function properly within the 'ready()' event method on mobile browsers

After testing on Firefox mobile and Chrome mobile browsers, I found that my code works perfectly on computer browsers. Below is the code I have inside the ready() and load() event methods: $(document).ready(function(){ $(window).on('load hashchan ...

Deselect the Angular checkbox

In my project, I need to create a list of checkboxes from an array using classes. There will also be a reset button that, when clicked, will reset all selections. How can I achieve this? Thank you. $scope.classList=['Class1','Class2&apo ...

The rc-form package in npm is issuing a Warning for the getFieldDecorator method when `defaultValue` is not being used as an option

Currently, I am on the rc-form 2.4.8 version and I am utilizing the getFieldDecorator method in my codebase. However, an issue has arisen: Warning: defaultValue is not a valid property for getFieldDecorator; the correct use is to set value, so please uti ...

Generate a fresh array using the data from the existing array object

I have nested objects within arrays that I need to manipulate. { "page": [ { "num": "1", "comp": [ { "foo": "bar", "bar": "foo", ...

How can I add an active CSS class to an li element depending on the href attribute of its child <a> tag?

Looking for a way to dynamically add an 'active' class to a navigation menu item based on the current URL? Here's what I have so far: <ul class="nav sf-menu"> <li><a href="@Url.Action("Index","Home")">Home<span>& ...

I am having trouble with the popstate function in React - it doesn't seem to be working. I am unsure how to trigger the browser backtab click properly. When I click

What is the best way to trigger a logout function in React when the browser back tab is clicked? I am looking for a solution where, upon clicking the back tab, a modal confirmation dialog appears with an "OK" button to log out of the application. const ha ...

Count of jSon objects

After receiving a string st from a web service, I convert it into an object. How can I determine the number of arrays inside this object? In this particular case, there are 2 arrays. var st = "{[{"Name": "fake", "Address": "add"]},[{"Name": "fake", "Addre ...

Sending data from a partial view to a controller

Imagine I have two models: DailyTasks and Task. The initial view is strongly typed with the DailyTasks model, displaying a list of existing tasks for the day. Users can add more tasks to the list/table by clicking the add button. Upon clicking the add butt ...

Only IE has a different margin-top effect on hover in the slideshow - Check out the CSS & project link for more details

When hovering over the IE slideshow, it moves downward. Any suggestions on why this happens? Visit development.legendarylion.com for more information. Could someone provide insight on why the slideshow increases top margin when hovered over? Explore the ...

Vanishing elements when employing the react-router library in a React project

Currently, I am in the process of developing a React application and have encountered an issue with components disappearing upon refresh. It seems to be related to React Router, suggesting that I may be implementing it incorrectly. This is what my App.js ...

Clear v-model without changing its associated values

I'm facing an issue with my <input> fields, which look like this: <input type="text" v-model=user.name" /> <input type="text" v-model="user.phone" /> <button @click="add">add user</button> Whenever the add user button i ...

Calculating the angle formed by three vectors in three-dimensional space

According to the solution(s) provided in this post Angle between 3 points in 3d space, there is a JavaScipt function that calculates the angles between three vectors in 3D space. The function calculates the angles as if each vector is a vertex on a surface ...

Tips for Updating an item array in typicode/lowdb file database

Greetings, I am currently experimenting with an express app that utilizes a typicode/lowdb json file as its database. However, I am encountering difficulties with getting the update function to work properly. Below is an example of the code: The typicode/ ...

Encountering error when using require() with Firebase in Express

I am facing an issue with my Express application while attempting to connect it to Firebase. Currently, my console is showing an error message: C:\Users\Tyler\Desktop\Dev\food-bank\app.cjs:19 const firebase = initializeApp(fi ...

I'm interested in finding out how to utilize the bezierjs library. Can someone

I am working with a canvas drawing that features various curves, and I am curious about determining its size similar to a specific example in this library. Check out the library here For reference, take a look at this example: Curve Size Example I would ...

responsive cascading dropdown.. preassigned value

I've come across this interesting script on a website and it's been working pretty well for me so far. The script can be found at the following link: . However, I have a specific requirement when it comes to setting a certain value for the catego ...

Utilize JavaScript and HTML to show error messages based on whether the user is deactivated or if the input is invalid

I need to show different error messages under the 'Email Address' input if the user is disabled and under the 'Password' input if the user is invalid. In my debugging process, I discovered that a user being disabled results in a "Status ...

Accessing objects from a loop in JavaScript

In an effort to adhere to the principle of avoiding "polluting the global namespace" and due to the consensus that global variables are typically discouraged, I made a modification in my code by replacing global variables: stBgAsset15_src = $image.at ...

Having trouble with running sudo commands on Hyper in Windows 10?

Working on a Windows 10 system without any VM software, I've installed hyper to utilize node and npm. My laptop has just one account, which is also the local account administrator. Surprisingly, even though I have all the permissions, I am unable to r ...

Error in syntax: The tailwind import statement contains an unrecognized word and will not function correctly

After configuring Tailwind CSS with Next.js, I made changes to the tailwind.config.js file. However, after making these changes, the compilation process failed and resulted in the following error: Error - ./src/assets/styles/global.css:3:1 Syntax error: Un ...