I'm hoping that such a calculation as below will be very easy for the users of this website:

I have a 3D Carousel on my website and a colleague is going to render out some 3D components to sit on the carousel. However, he needs the angle that the "camera" is at on my 3D carousel. The issue is that my 3D carousel is faux 3D, meaning the images at the rear of the carousel do not travel along a Z plane but they just reduce in size to give the impression that they are.

I've added 2 black lines to the carousel and worked out (through a pixel measurement) that there is 243 pixels between the front and back of the carousel. In theory this carousel is perfectly circular.

The radius of the circle is:

r = 2.3 (a number provided by the component to work out the radius)
w = 1000px (the width of the carousel's container)
w / r = 434.782609

I know that there are 243px between the two black lines and that the radius of the circle is 434.78px so how would I work out the angle of the camera using these measurements? I've provided a screenshot to help if I've not explained it properly - on the diagram, I need to find the blue angle:

Screenshot of 3D Carousel

View of what I need

I need to know how as opposed to just giving the answer because if we decide to change the angle, I need to work out how to reflect this in the 3D render of each component.

If you need a little more information, just comment saying what you need and I'll do my best to trawl through the javascript file to find the answer.


Am I understanding correctly? You have an area 1000 pixels wide by 243 pixels deep that you show objects in, representing (part of) the outer annulus of a 435 radius circle. The deeper an object, the smaller it is rendered. Is the back line the outer edge of the carousel, and if so shouldn't it be curved? The question would then be to find a relation between depth and size of the rendering.

If I have read it right and the camera is at the center, the distance to the front line is 435-243=192 pixels and the distance to the back line is 435 pixels. So an object on the back line should be 192/435 as large as one on the front line. Taking d as the depth from the front line, the size would be $\frac{192}{d+192}$ of the size on the front line. But I am not sure this was the question.

  • $\begingroup$ Basically it's faux 3D so it's not perfect, however... If you think of the viewport of the carousel (the window it's in) it's 1000px wide. Upon this width the radius of the circular carousel is automatically generated - width/2.3 . The closest black line is the front, or the foreground component in the 3D carousel and the rear black line is the furthert away or background component. The camera is in front of the whole carousel almost as if you were standing in front of the first item but you could see the rear item behind it in the background $\endgroup$ – Dan Hanly Feb 15 '11 at 14:04
  • $\begingroup$ The black line should be curved yes, but unfortunately this goes beyond the scope of the coding language at the moment so just think of each component as a flat image where the impression is given that it's 3D instead of actually being 3D $\endgroup$ – Dan Hanly Feb 15 '11 at 14:05
  • $\begingroup$ Then I think the relation I gave works. Basically you have the distance to the front line, $L$ and the depth $D$. So an object at the back is $L+D$ away. Then if $d$ is depth in the frame, the size of the object should be $\frac{L}{L+d}$ as big as if it were at the front. $\endgroup$ – Ross Millikan Feb 15 '11 at 14:08
  • $\begingroup$ I need the camera angle though, the angle that the camera is pointing at the carousel. Our 3D guy needs to render out these components from a certain angle and doing it at the wrong angle will ruin the visual of the carousel $\endgroup$ – Dan Hanly Feb 15 '11 at 14:16
  • $\begingroup$ The angle you showed with a blue arc will be $\arctan \frac{H}{D}$ where $H$ is the height above the baseline and $D$ is the horizontal distance to the far edge. Pixels don't come into this. $\endgroup$ – Ross Millikan Feb 15 '11 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.