Orientation of objects on a sphere surface

[Guillaume]

Hi,
I’m trying to place Planes on a Sphere surface but I want the planes to be aligned with the sphere center and squared to the surface (like trees on a planet).

I tried several approaches but none seem to work e.g. using lookAt(%sphere_center%) or with the space coordinates getting the phi an theta and apply them as a rotation

const pos = geoCoordTo3Dposition(ep.location.latitude, ep.location.longitude, 200);
const sp = new Spherical().setFromCartesianCoords(pos.x, pos.y, pos.z); 

// then use rotation like [sp.phi, sp.theta, 0] on my mesh

So I’m wondering what is the best way to get the correct rotation of my object based on its position.

Thanks,
G.

[prisoner849]

Hi!
You can find many examples on @hofk 's site: * discourse.threejs.hofk.de

And these are amongst them:

1. Planes on Sphere
2. Trees on Sphere

[FuzzyWobble]

            //mesh
            var p = piece.mesh.clone();

            //set on sphere
			var randPhi = (Math.random()*Math.PI*1) - (Math.PI/2); //horiz, subtract Math.PI/2 so only in top half of sphere
			var randTheta = (Math.random()*Math.PI*1) - (Math.PI/2); //vert, subtract Math.PI/2 so only in top half of sphere
			p.position.setFromSphericalCoords(this.globeRadius,randPhi,randTheta);
            p.position.y += this.globeOffsetY; //move down to align with sphere offset

            //align on sphere
            var vectorToPointOnSphere = new THREE.Vector3();
            var sphericalCoord = new THREE.Spherical(this.globeRadius,randPhi,randTheta);
            vectorToPointOnSphere.setFromSpherical(sphericalCoord);
            var originalOrientation = new THREE.Vector3(0, 1, 0);
            p.quaternion.setFromUnitVectors(originalOrientation, vectorToPointOnSphere.normalize());

            //add to scene
            _G.THREE.scene.add(p);

Looks like setFromSphericalCoords is what you need for this.

Results from the tree demo @prisoner849 linked look like this: