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?

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 );

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);
});

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ā¦