Coding a Display Carousel for 3D Objects

Francisco Marryat

I have been trying to code something that looks like a circular carousel of 3D objects. A variable number of items could be evenly distributed around the circumference of a circle and would rotate along with the carousel (as if they were placed on the surface of a turntable or roulette wheel, except that they would always face the camera).

The carousel could be tilted on its x axis so the further-from-camera objects would be higher than the closer ones. If the carousel was tilted, though, the objects should still be oriented straight up.

Finally, the positions of the objects around the carousel would be able to be animated (either automatically, or in response to clockwise or counter-clockwise swipes) so that it would look like a display carousel with all the objects rotating in a circle around a center point, always facing the camera.

I started trying to do this with tweens on scene objects, but it's clear that an algorithmic solution--i.e. calculating and setting the objects' xyz positions--would be better than trying to nest a bunch of tweens.

I suspect that the "UI Carousel 3D" script in the Asset Library does 90% of what I want. It positions the objects in a straight path, so all I need to do is to change that to a circular path.

In the Carousel.js script, it's lines like these I need to learn how to change:

icon.getTransform().setLocalPosition(new vec3(i * script.margin, 0, 0));
icon.getTransform().setLocalScale(new vec3(script.scale, script.scale, script.scale));
icon.getTransform().setLocalRotation(quat.fromEulerAngles(script.eulerAngles.x, script.eulerAngles.y, script.eulerAngles.z));

I believe that instead of zeros in the last two spots of the position vec3, I also need to use some kind of trigonometry to also calculate those last two positions to make my objects appear to rotate along with the turntable in 3D-space.

Is this reasonable? Can anyone give me a pointer (since I am a mathematics bonehead) how I would calculate Y and Z also for objects and cause them to ride the turntable as it spins?

Thanks!

brandon

Here is a quick example of how to place things in a circle. This can swap in to that, however the movement when you drag the carousel will need to have some changes to, making it rotate by an amount instead of sliding. Hopefully this can get you started though.

//@input SceneObject[] boxes

var radius = 30 // radius of the circle you want to make

var angleDegrees = 90 // to automatically place in a way that you can see them all, you can do (360 / array.length) in this case: (360 / script.boxes.length)

var circlePos = new vec2(0, 0) // position of the circle's center

script.boxes.forEach(function (b, index) {
// convert to radians
  var angleRadians = angleDegrees * (Math.PI / 180)
// multiply by the index to space them out evenly
  var angleToPlaceBoxOn = angleRadians * index

  var x = radius * Math.cos(angleToPlaceBoxOn) + circlePos.x
  var y = radius * Math.sin(angleToPlaceBoxOn) + circlePos.y

  var boxTransform = b.getTransform()
// y is actually used as z in this because we want a horizontal circle in this case
  boxTransform.setWorldPosition(new vec3(x, 0, y))
})

Francisco Marryat

Thank you Brandon! That is very helpful!