Move a plane using AWSD inside a sphere

Questions
1

Hi,

I have a sphere and need to move a plane around the surface of the sphere (slightly elevated off surface to prevent z fighting (Camera is inside sphere and plane is closer to camera than the sphere).

I am trying to map AWSD to this.

A &D (left & right), would move the plane around the longitude (circumference x)
and
W & S (up and down), would move the plane around the latitude (circumference y)

Would this be messing with an offset and rotation or is there an equation to handle this?

Anyone got any ideas?

Thanks

2

I assume your question is about the Math behind such motion. So, you basically map A & D to a horizontal angle around the ā€œequatorā€ of the sphere. Similarly, W & S are mapped to a vertical angle measured up or down from the equator. Having two angles, it is possible to get the 3D coordinates on a sphere with .setFromSphericalCoords() and position the plane. Turning the plane towards the center, where the camera is supposed to be, is done with .lookAt().

plane.position.setFromSphericalCoords( 1.3, Math.PI/2+ws, ad );
plane.lookAt( sphere.position );

Click to view it online:

image

3 Likes
3

@PavelBoytchev Very nice codepen, pretty much spot on. I will create some test projects to process through your code and see if I can hook up AWSD

Thanks for the help and pointing me in the right direction (pun lol).
:+1:

4

PS. I just fed this question (slightly modified wording to make it as precise as possible) to ChatGPT and this is what it gave me

// First, create a sphere and plane
var sphereGeometry = new THREE.SphereGeometry(50, 32, 32);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

var planeGeometry = new THREE.PlaneGeometry(10, 10);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

// Add the plane to the scene
sphere.add(plane);

// Set the initial position of the plane
plane.position.x = 50 * Math.sin(0) * Math.cos(0);
plane.position.y = 50 * Math.sin(0);
plane.position.z = 50 * Math.cos(0) * Math.cos(0);

// Keep track of the plane's current latitude and longitude
var latitude = 0;
var longitude = 0;

// Listen for keydown events
document.addEventListener("keydown", function(event) {
  switch (event.code) {
    case "KeyA":
      longitude -= 0.1;
      break;
    case "KeyD":
      longitude += 0.1;
      break;
    case "KeyW":
      latitude += 0.1;
      break;
    case "KeyS":
      latitude -= 0.1;
      break;
  }

  // Update the position of the plane based on the new latitude and longitude
  plane.position.x = 50 * Math.sin(latitude) * Math.cos(longitude);
  plane.position.y = 50 * Math.sin(latitude);
  plane.position.z = 50 * Math.cos(latitude) * Math.cos(longitude);
});

:exploding_head:

1 Like
5

Significantly better than what I would have expected.
Iā€™m starting to feel myself obsolete.

6

Sameā€¦ It has me wondering about how the evolution of programming will go in the next 10 to 20 years. ML chat bot, to an ever training collection of ML algorithms, which is crawling every book ever written and data certified websites, especially documentation websites such as apiā€™s etc for all languages (high and low level), and their libraries/packages.

When I remember, Iā€™m feed it questions I would normally google for and end up on SO or some forum etc and itā€™s proving to be a lot better than stack overflow with all their rude mods and out date code responses. Iā€™ve fed it Linux server, NGINX, Docker, node, php, webpack config, math, etc questions and now three.js questions and itā€™s nearly always pointed me in the right direction, complete with code samples (not always correct but close). Thankfully the code it spits out still needs the human touch and to be made your own to use in our own projects, but stillā€¦ Yikesā€¦

7

Iā€™d rather stay with one line of .setFromSpherical()/.setFromSphericalCoords(), than three lines (one line per coordinate). ĀÆ\_(惄)_/ĀÆ

3 Likes