I want to create a 3d carousel and bend the vertices in the vertex in a perfect 360-degree carousel on the x and z axis, I am lost and math is not my friend, any help is appreciated.
Thank you!
Why not use the built-in geometries, like CircleGeometry or CylinderGeometry?
I need plane meshes to be rotated, it is how the project is built, each pane with its own image.
I would think that it would be easier to create a single geometry with a single texture that has the required number of images.
The formulae for plotting points counter-clockwise in a circle, starting from the right side, is:
X = radius * Math.cos(radians);
Y = radius * Math.sin(radians);
where radians = degrees in radians.
I almost forgot - with CircleGeometry, and CylinderGeometry you can use thetaStart and thetaLength to create pie-slice shaped geometries. You could add those together when you are done to create a full circle.
Or, use Blender to create your carousel and import it into three.js.
3 Likes
I canposition them fine but I can’t bend the shader my math is bad…
6 Likes
Yes, this is how I want to positon it but it dose not work for me with a single image I need individual meshes…
I see no obstacles to do it with several meshes of the same geometry, rotated around Y-axis 
I will try, I tried a few times and fail at the bending part… as I said math is not my friend on this one, I tried ChatGPT but it makes a mess of things…
I was wondering who is crazy enough to put something serious in the hands of AI, if it makes mistakes with simple tasks big time…
+1 for @phil_crowther’s shout, how’s this handle differential aspect ratios of images? Would it be a simple case of setting the meshes themselves to a width = 1 height = 1 * aspect?
1 Like
The other way round: height = 1, width = aspect.
Picture:
4 Likes
of course, that’s amazing!! I was thinking of fixed width on portrait mobile devices but I guess if window.innerWidth > || < window.innerHeight either should apply 
I was in the same mindset as @Lawrence3DPK and opted for a CSS object-fit: cover solution.
Of course, it doesn’t comes near the maestro’s solution, managing the plane’s width is way more elegant 
4 Likes
Ohh, this is actually the intermediary of what I had in mind, this has a fixed geometry width and height with relative uv distribution which is amazing as it’ll fit both desktop and mobile ratio profiles with the correct camera frustum, I can’t make a demo to hand but was thinking the width of the geometry would be equal to a mobile device width if the height of the image is less than the mobile device height and contrarily if the image height is more than the mobile device height then the geometry width would be variable… I shall make a demo but it feels like there’s a greater carouselMesh class somewhere here that would fit the same css type properties you just mentioned… 
3 Likes
I like where this is going… npm i three-mesh-carousel 
4 Likes
Sexy!
Bye,
Tim “Zexture” Sk8tive
Heh! I was thinking you wanted to create a carousel with little horses, etc. I’m glad prisoner849 jumped in to offer the correct visualization of what you wanted.