2

I'm newbie in three.js and WebGL.

In my application, there is 3D scene in which the two objects.

  1. object - it is a big sphere;
  2. object - a smaller sphere, which is located on the surface of the first object.

Big sphere rotates around its axis. And also there is the possibility to rotate the camera around the spheres.

So as a small sphere on the surface of a large sphere, it also rotates with it. Small sphere will be visible to us as large sphere turns to the camera and it will not be visible when a large sphere is in front of it.

The question is, how do I determine when a small sphere is visible to the camera, and when it is not visible?

Also, I need to get the coordinates in 2d for small sphere where it is visible. How can I do this?

Mike
  • 21
  • 3
  • Hello Mike, welcome to stackoverflow :) This question seems well researched, but it could use some editing from you in order to get a constructive answer. It would be nice if you could point to part of the implementation you are using for the spheres to track their spacial position. – Travis J Oct 03 '13 at 14:36
  • Thanks :) You are right - format less is less answers. – Mike Oct 03 '13 at 18:18

1 Answers1

1

This can be accomplished with three.js's built-in raycaster and projector functionalities. To start, try taking a look at this demo and its source code. Here is another example. In this way you can determine which objects are closer to an invisible line that is emitted from the camera's position.

Otherwise, if you are simply interested in which of the two objects is closer to the camera, you can simply check to see which of their position values have a lesser distance to the camera's coordinates. The three-dimensional distance formula would come in handy:

bigSphereDistance = Math.sqrt( Math.pow(camera.position.x - big.position.x,2) +
                               Math.pow(camera.position.y - big.position.y,2) +
                               Math.pow(camera.position.z - big.position.z,2) );
smallSphereDistance = Math.sqrt( Math.pow(camera.position.x - small.position.x,2) +
                                 Math.pow(camera.position.y - small.position.y,2) +
                                 Math.pow(camera.position.z - small.position.z,2) );
//then check...
bigSphereDistance > smallSphereDistance ? /*case*/ : /*case*/;

Intuitively, the small sphere is visible when its distance is less than that of the big sphere, with a buffer of the small sphere's radius.

To answer your second question, finding any object's 2D coordinates can accomplished like this.

Community
  • 1
  • 1
interpolack
  • 876
  • 10
  • 26