Rotate object around in circle

Questions
1

I want to rotate 4 object around background image, I done with revolution slider but the client want to rotating to pause when hovering one of the images and revolution slider do not have it.
this is what I done with revolution slider


this is what I have with threejs
https://www.allium-medical.com/new/spin/rotate.html
it need move around the “allium” images and move in circle like clock.
I don’t found how to place it right and make the move
object.rotation.y += 0.05; not working

I have other version
https://www.allium-medical.com/new/spin/‏‏rotate-ver0.html
How I set the movement to be around the image “allium” and rotate only on y-axis (if this is right one to have movement like clock)

2

If I’m getting it correctly, you basically want to show a rotation effect on the 4 circles.

One way to achieve this effect quite easy, is parenting the children (circles) under a parent mesh container, and just rotate the parent. You have to apply a starting offset position to each of the child (circles) for this to work.

image

This scenario assumes your scene and camera is setup where looking into the scene is Z-Positive.
https://jsfiddle.net/blackstrings/rd8ecfmx/

3

The other option is to use trig functions (sin, cos) to set position of a pic:
https://jsfiddle.net/prisoner849/opau47vk/

@blackstrings0
Maybe makes sense to add something to the animation loop:

if(parentContainer){
     parentContainer.rotateZ(.001);
     circles.forEach(c => {c.rotateZ(-0.001)}); // this line to add
  }

to keep circles oriented up.

1 Like
4

fiddle updated

5

Thanks, I just want to move all the scene to the right so it will around to main circle.
I using this on WordPress site because the client want to stop the movement when hovering and it do not work with revolution slider.
this is what I have on the site: https://www.allium-medical.com/new/rotate/
Other question how to I set focus to the object so I reach them with the keyboard with ‘tab’ key like on the menu?

6

seems to me like your just moving things in a circular path and normal to the screen? Would this not be easier to achieve without three.js - rather just css and js?

7

If this can be stop when hovering, having links and can be reached with the keyboard with ‘tab’
I think it will better, any idea how to do it?
will this also will fix the background not looking good?

8

That all sounds very possible, this may get you started

9

Thanks, how do I stop it on hover?
this is the big problem, I used revolution slider but it do not stop the layer on hover

10

Hi!
Stackoverflow and Google create miracles :metal:
https://jsfiddle.net/prisoner849/zrfbqjh2/

Rotation_CSS
Rotation_CSS854×452 337 KB

Hovering over circles with numbers stops rotation. Pure CSS. Works in FF and Chrome for me.

4 Likes
11

Thanks, it will help.
What if I need 5 items?
I got that
.red {
color: #f00;
top: calc(50% - 50px);
left: calc(100% - 100px);
}
control the position

12

To be honest, discussing CSS is out of the scope of this forum, IMHO (except when it’s about CSS renderers).

Feel free to use javascript for positioning your elements at your needs:
https://jsfiddle.net/prisoner849/w93vcumq/
Penta_CSS

13

Thanks, it help a lot

14

You’re welcome :beers:

1 Like
15

Thanks again for all help, I don’t know where to ask, but I have 2 questions:

  1. How can I fix the loading where the images are going out from the center and move to the location before they start to spin?
  2. Can I stop the movement when the image get focus when I reach it with the ‘tab’ key?
    here is a link https://www.allium-medical.com/new/
    (There is a way to add code here?)
16

Stackoverflow, as an option. With detailed explanation and a working code example to show that you’ve put some effort into solving the problem.

  1. Use Tween.js or GSAP to move images from a center to its positions. When tweening stops, start rotation. Or do it with sequence of animations in CSS.
  2. Maybe to do the same thing with :focus that you do with :hover.

Creativity is up to you.

17

Thanks, I don’t like asking on Stackoverflow, they vote down question they don’t like and not usually helping.
I tried with threejs but add problems with the background, maybe I will try it in other way seen I add it to WordPress site

18

Hey i am doing a similar thing for my project did you get the answer i wanna create this

SmartSelect_20231118-004804_WhatsApp
SmartSelect_20231118-004804_WhatsApp715×328 76.6 KB

19

You mean like a solar system ? Create object in the center of rotation, give it low opacity. Make it rotate around its own axis. Create objects around the center object, constrain them to the center object (parent) and that should be about it.

20

That old post, it is not relevant