How to implement an axis helper/ viewCube 3D with threejs?

Hi, I’m trying to implement something clickable thats rotates the scene to the clicked axis. Examples below.
image
image

Have you already tried to reuse the code from the editor? The relevant class is:

2 Likes

Hi @Mugen87, thank you for the reply. Is there any guide to implement this ViewHelper?

No, there isn’t, sorry. You have to study the code and figure out an integration by yourself.

Ok, thank you for your help @Mugen87 .

I have seen the first image been implemented and I guess it’s copied from the blender. Try this GitHub - Fennec-hub/ThreeOrbitControlsGizmo: Blender like orientation gizmo for Three.js OrbitControls. Here is the live demo for it - Demo - Three Orbit Controls Gizmo
Do let me know if you are able to integrate. It took me around 30 minutes to find this😉.

2 Likes

This looks interesting, thank you very much @Swapnil !!!

Yes it was very easy to integrate, thank you!

1 Like

When the camera is set to up(0,0,1), how should I set the rotation in the helper

I’m not sure about that. Like some other code in the repository, ViewHelper assume +Y up. The editor itself does not allow to change the default up direction.

I think it should be my question, it should be the reason for using Spherical in EditorControls.js, it is Z up by default