Orienting circular button layout with rotation

Questions
1

Hey guys,

I’m currently working on a circular button layout which is part of a navigation system.

Currently I have all of the buttons appearing in a circle evenly spaced along the circumference.

The buttons are all in a group. I then apply a rotation to the group on the Z to make them appear to spin and that works nicely.

What I am trying to do now is ensure that the individual buttons are always rotated normally to 0,0,0 so their icons stay properly oriented. I am trying something like this, but the rotation of the group seems to override me telling each button to remain 0,0,0.

        CenterUIButtons.rotation.z += 0.004;

        CenterUIButtons.traverse(function(child){

            if(child instanceof THREE.Mesh){

                child.rotation.x = 0;

                child.rotation.y = 0;

                child.rotation.z = 0;

            }

        });

Thoughts?

Thanks guys!

1 Like
2

I solved by doing a simple lookAt! Doh!

CenterUIButtons.rotation.z += 0.004;
	CenterUIButtons.traverse(function(child){
		if(child instanceof THREE.Mesh){
			child.lookAt(camera.position);
		}
	});
3

Since lookAt() does support transformed parents (except of non-uniformly-scaling), this solution is absolutely fine.

4

So I may have spoken too soon. There is another element to this that I was leaving out since it didn’t appear to be causing any issues, but I believe I overlooked something related to it.

So this entire group of buttons actually exists inside of another group which is set to 0,0,0 - since the button layout appears at the center of the screen. And I am also doing lookAt(camera.position) on this group as well. I have it structured this way, so I can then do a group inside of that where I handle the spinning of the buttons - otherwise the spinning is ignored due to the first lookAt.

So it is almost working, but I just noticed if I move the camera, the center buttons will slightly rotate, just enough to feel awkward - they seem to be locked in place otherwise. I am guessing that is because I have the children looking at the camera, but their parent - CenterUIButtons is not looking at the camera.

if(mainButtonsGroup) mainButtonsGroup.lookAt(camera.position);
	CenterUIButtons.rotation.z -= 0.004;
	CenterUIButtons.traverse(function(child){
		if(child instanceof THREE.Mesh){
			child.lookAt(camera.position);
		}
	});
5

Since rotation is relative to the parent, shouldn’t you just rotate the buttons in the opposite direction of the rotation of your your CenterUIButtons group to keep them correctly orientated?

1 Like
6

A massive oversight! This solved the issue! :slight_smile: Thank you very much!