Set a point at specific coordinates on a 3D object model using Three.js

Currently working on a Three.js App using the React Template. The main idea is to have a 3D model that represents Planet Earth within the app, along with a space station model. I want to be able to rotate the station around the world by inputting specific coordinates every second. My query is this:

How can I position the space station above London, for instance, if I have the following coordinates:
long: 45.926013877299 and lat: 46.524648101056 (random)

This is how I am currently loading the object:

const loader = new GLTFLoader();

loader.load("path/to/model", function (gltf) {
  scene.add(gltf.scene);
});
javascriptthree.js3d3d-model

Answer №1

Utilizing the 

Vector3.setFromSphericalCoords(radius, phi, theta)
method of a Vector3 allows you to transform distance, latitude, and longitude into an X, Y, Z coordinate in space:

const radius = 100; // Distance from center of Earth

const polar = 180 - (lat + 90);
const phi = THREE.MathUtils.degToRad(polar);
const theta = THREE.MathUtils.degToRad(long);

mesh.position.setFromSphericalCoords(radius, phi, theta);

// Output
console.log(mesh.position.toArray());

Please note that phi and theta must be provided in radians rather than degrees, necessitating conversion. Additionally, adjustments had to be made to the latitude value, considering that phi is represented as 0° at the North Pole and 180° at the South Pole.

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

How can we optimize ternary statements within ternary statements in Type Script and React Native for best practices?

Can you help me optimize this code snippet that uses nested ternary operators for better readability and correctness? <TouchableOpacity style={ darkMode ? filterState === 'A' ? styles.activeButtonDark : styles.buttonDa ...

javascriptreactjstypescriptreact-native

Discovering similarities among array elements by looping through an array

Two sets of arrays have values obtained using the data-attribute(data-product-name). One set contains the full list of available items, while the other set consists of selected items associated with a country. <!-- the item list --> <div ...

javascriptjqueryarraysstring-matching

Sorting may produce varied results across various web browsers

function sortResults(type) { $("#parentDiv").empty(); $.getJSON("raw_data.json", ({ Search }) => { Search.sort((a, b) => a[type] > b[type]); console.log(`Sorted by: ${type}`); ...additional code Browser compatib ...

javascriptjqueryjsonsorting

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

javascripthtmlcssreactjsslider

What purpose does the "io" cookie serve in Socket.IO?

Can someone explain the purpose of Socket.IO using the io cookie as a session cookie? I understand that it can be disabled, but I couldn't find any information on it in the documentation. Why is it turned on by default and what consequences would ther ...

javascriptexpresssocket.ioengine.io

Using Angular to make an API call within a JavaScript function

I am facing an issue when trying to call an API in a JavaScript function as shown below. The injected services (subService) and defined variables (formData) are not recognized in the JavaScript function, resulting in an error of undefined addSub. How can I ...

javascriptangulartypescript

Utilizing typed arrays directly for attributes within the realm of three.js

Can I use TypedArrays directly in three.js for custom attributes? I'm fetching a binary model format from a server, and the data is stored in a Float32Array. It seems inefficient to create THREE.Vector3 objects just to convert them back into a new Flo ...

three.js

What is the proper procedure for configuring Babel and executing "npm run dev" in the terminal without encountering the "ERROR in ./src/js/index.js" message?

My goal is to include the babel/polyfill with the index.js files using webpack. After completing the setup, I tried running "npm run dev" in the command prompt but encountered an error. The initial line of the error message said "ERROR in ./src/js/index.js ...

javascriptnpmwebpackbabeljsbabel-polyfill

What is the best way to make the children of a parent div focusable without including the grandchildren divs in the focus?

I want to ensure that only the children of the main div are able to receive focus, not the grandchildren. Here is an example: <div class="parent" > <div class="child1" > <!-- should be focused--> <div class="g ...

javascripthtmljquerycss

Regular expression: retrieve the text following every colon

Consider the following string: "abc:12:toto:tata:titi" To extract each string after ":" using split(), you will get "toto", "tata", and "titi" in this scenario. ...

javascriptsplit

It appears that Nodemon has stopped functioning correctly. To use Nodemon, simply input the following command: nodemon [nodemon options]

nodemon has always been reliable for me. I used to run nodemon server and it would automatically watch for updates and restart the server file. However, lately when I try to do this on my Windows cmd, I get the following message: Usage: nodemon [nodemon o ...

javascriptnode.jsnpmnodemon

Tips for steering clear of getting caught in the initial focus trap

I have implemented Focus-trap (https://www.npmjs.com/package/focus-trap) in my modal to enhance keyboard accessibility. Here is a snippet of my code: <FocusTrap focusTrapOptions={{onDeactivate: onClose}} > <div> ... </div> <Focu ...

javascriptreactjsnext.jsfocus

The password prompt window refuses to align with the center of the screen. This

I've been struggling to position the Javascript popup notification using the width, height, top, and left parameters in the window.open function. No matter what I attempt, it stubbornly remains in the top-left corner. Can someone offer some guidance o ...

javascriptpasswordscenter

Choose a table by using jQuery excluding the data in the first column

Does anyone know how to extract data from an HTML table using jQuery? In my specific case, I need to retrieve the table contents without including the first column. This is because I want to export the table to an Excel file, but the first column contains ...

javascriptjqueryhtml

Acquiring the API through the callback function within a React application

I wrote a function that connects to an API and fetches data: import {API_KEY, API_URL} from "./constants"; export const getOperations = async (id, successCallback) => { try { const response = await fetch(`${API_URL}/tasks/${ ...

javascriptreactjsapi

Live monitor database changes with AJAX and SQL technology

Is there a way to implement real-time updating of user ratings on comments in an application with a connected database? I've explored various sources but the responses have been inconsistent and inconclusive. I am currently creating an app where user ...

phpjavascriptsqlmysqlajax

Transform the image data retrieved from an external API into the appropriate format for displaying on the webpage

When I make a call to an external API, it returns image data that I want to render on my page. However, the response looks like this when I log it to the console: https://i.stack.imgur.com/GpDhH.png I'm not very familiar with image formats, so I&ap ...

javascriptajaximage-processing

Launching a Bootstrap modal in Portrait mode through JavaScript

Is there a way to trigger the opening of a modal when the screen is in "Portrait" orientation and hide it when the screen is in "Landscape" orientation? I have tried implementing this functionality, but it seems to not work properly when the page initiall ...

javascripthtmlbootstrap-4model

What is the best way to prevent the first option in a <select> element from moving up and down using jQuery?

Is there a way to make the first option in a select list non-selectable and keep it at the top when using up and down buttons? The value option should always remain on top. If "Author" is selected and the up button is clicked, nothing should change. The ...

javascripthtmljqueryjsp

Removing elements based on the size of the display

I need assistance with a JavaScript issue. I have a table with 2 rows and 5 columns, each column representing a day of the week with a specific class. The goal is to detect the current day based on the browser's width/height and remove all elements in ...

javascripthtml