CODEWITHSUNDEEP
javascriptthree.js3d3d-model
Alin-Alexandru Peter
Alin-Alexandru Peter

Reputation: 161

Place a point upon coordinates on a 3D object model in Three.js

I am building a Three.js App (React Template, if it's important). I have this 3D object model that should act like the Planet Earth in app. And I've got this space station model. I wanna rotate the station around the world by giving some specific coordinates every other second. My question is:

How can I place the space station above London, for example, if I have this coordinates:
long: 45.926013877299 and lat: 46.524648101056 (random)

This is the way I load the object:

const loader = new GLTFLoader();

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

Upvotes: 1

Views: 715

Answers (1)

M -
M -

Reputation: 28462

A Vector3 has a method called Vector3.setFromSphericalCoords(radius, phi, theta). You can use this to convert your distance, lat, & long into an X, Y, Z point 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);

// Final result
console.log(mesh.position.toArray());

Notice phi and theta have to be in radians, not degrees, so I had to convert them. I also had to change the value of latitude. This is because phi is measured as 0° at the North Pole, and 180° at the South Pole.

Upvotes: 2

Related Questions