Rotate an object perpendicular to the surface of a sphere

[Carlos R]

Hi folks, here I am bothering you on this forum hahaha.

 

I've tried, unsuccessfully, to rotate a tree so it can be perpendicular to the surface of an sphere at some point. You can see what I did at http://uvshop.co/mimundo/.

 

(I have use, without his permission, @Temechon trees, you can visit his tutorial here)

 

The trees positions are genereted by using a random theta and phi angles:

 

 

arbol.position.x = r * Math.sin(theta) * Math.cos(phi);
arbol.position.z = r * Math.sin(theta) * Math.sin(phi);
arbol.position.y = r * Math.cos(theta);

 

Here is a pic

 

 

And heres is another

 

 

Thanks in advances and sorry for my bad english

 

[Temechon]

Hey Carlos,

 

You don't need my permission, don't worry

[dddougal]

How have you tried the rotation?

[RaananW]

Hi carlos.

 

So, this is a nice math problem.

 

What you need to do is as follows:

1. Find the tree's normal (which, in your case is very simply - the up vector (0,1,0)).
2. Find the direction to the sphere - this can be done using the ray class - Ray.CreateNewFromTo(tree.position, sphere.position) . the ray.direction is what you are looking for
3. Then find a cross product between the two. This will give you the axis to use for rotation.
4. To find the angle of rotation, you find the acos of the dot product of both normals.
5. then use the rotate function for each tree, using both the variables you have created.

Since I like those kind of problems, i played in the playground a bit to find a nice way of implementing that.

This is a solution for the rotation : 

http://www.babylonjs-playground.com/#1RQXG5

 

Now, about the translation - this is a whole new thing. I am still thinking what would be the best solution for that. But is is solvable for sure. the brute force solution would be "move the object until it intersects with the bounding sphere of the sphere." But there must be a better solution... 

 

found a nice solution for this as well!

http://www.babylonjs-playground.com/#1RQXG5#1

Maybe missing some documentation, let me know if something is not clear.

[Carlos R]

Thanks everybody for your help, specially to @raananw

 

When i run the code, thist scene was in front of my eyes,

 

 

Then, i knew that it was necesary to add 180º degrees to the angle:

 

 

arbol.rotate(axis, angle+Math.PI);

 

And here is the result:

 

 

Thanks again,

 

Carlos.