Rotate a camera around itself

Questions
1

Hi,

I want to rotate a camera around itself.
I built an example code based on here
In the example, the camera is fixed (ideally at the center of the sphere) and rotate around itself.
I tried the following options:

  1. OrthographicCamera with OrbitControls
  • zooming in and out is implemented by changing the fov, with no change to the position of the camera, i.e. without dolly in/out.
  • Panning is disabled.
  • The camera is positioned inside the sphere (reported camera position is less than the radius of the sphere).
    But it looks like the sphere is seen from the outside:
    a. zooming out shows the full sphere (although the reported camera position does not change)
    b. when rotating, squares are going in oppsite directions, meaning that the sphere is seen from outside
    see example here: http://jsfiddle.net/avnerm/b0h4ukc5/5/
  1. PerspectiveCamera with OrbitControls
  • I changed the behavior of dollyIn, and dollyOut inside OrbitControls to implement zoom similar to the orthographic camera.
  • Panning is disabled.
  • The camera is positioned inside the sphere
    This time, the behaviour is correct, i.e. it the sphere is seen from the inside:
    a. zooming out never shows the full sphere.
    b. when rotating, squares are all going in the direction meaning that only part of the the sphere is seen
    However, when zooming out far enough the squares are distorted (as expected)
    see example here: http://jsfiddle.net/avnerm/b0h4ukc5/4/

Another problem is that I can not set the camera position exactly at the center of the sphere.
Although I set the camera position at this location when initializing the scene, OrbitControls changes it to another position (288, 288, 288).

Is there a way to place the camera exactly at the center of the sphere, and use OrthographicCamera with OrbitControls to rotate the camera and see the sphere from inside out?

Thanks,
Avner

2

I suggest you don’t use CSS3DRenderer and build your sprites with THREE.Sprite or simple plane meshes instead. This will also have an effect on your controls. You can use the following example as a basis:

https://threejs.org/examples/#webgl_materials_video_webcam