Blender like Orbit Controls Gizmo for Three.js

Hello everyone,

Here’s a lightweight Blender like orientation gizmo for Three.js, it work in tandem with a slightly modified version of THREE.OrbitControls, it follow the orbit controls rotations changes and you can change the camera angle by dragging the gizmo or select an axis by clicking on it.

The live demo

19 Likes

really polished :+1:
thanks for sharing

1 Like

@felixmariotto,
Thanks for the feedback, glad you like it :grinning:

I created an account jut to thank you. Really Nice. I was using a 3D cube thingy from here but your gizmo seems to perform much better :smile:

1 Like

@amritbanerjee

Glad this helped you out and I really appreciate you taking the time to express that, thank you :sweat_smile:

At first I was heading the same way as you did, either creating a new WebGLRenderer or using scissors or WebGLRenderTarget, then I found this three-orientation-gizmo, simply drawing on a small 2D canvas, no new scene, camera or renderer and no interference with the main scene in term of logic or resources. coupled it with THREE.OrbitControls add some new events and it worked well :grin:

1 Like

Very cool.
MIT license?

No Its 99.99$/month :laughing: … of course it’s MIT, also the original repo inspired from

6 Likes

Really cool, what you did!
Is it adaptable to any Control class or the Orbit one only?

Another (small) point : on the last Blender release they added back axis letters too (-X, -Y, -Z) for clarity…

It could be really cool to be able to use keyboard to move/rot/scale precisely (like in Blender: G X 50) …

@devingfx

Is it adaptable to any Control class or the Orbit one only?

It work only with OrbitControls and I think it’s for the better, since we already have a class to control the camera why not just use its functionalities, keeping the code lighter.

on the last Blender release they added back axis letters too (-X, -Y, -Z) for clarity…

Should be easy to implement, I’ll update the repo, add an npm package and a cdn with a jsfiddle and codepen examples, fix the click/drag events conflict and improve it for touch controls, can’t tell exactly when maybe a week or two, right now I’m working on a project that is taking all my time and a bit of my sanity along the way :expressionless:, I’ll keep you in touch when it’s done.

I’m not happy with the axis transition animation, for now I’m just updating the camera position, I’ll try to animate the position and the rotation together, can’t promise anything, euler angles, quaternions and gimbal lock are over my head, they still give me dizziness :sweat_smile: (if any one here can help it would be nice :pray:)

It could be really cool to be able to use keyboard to move/rot/scale precisely (like in Blender: G X 50)

I think you’re looking for TransformControls, take a look at this example.

:stuck_out_tongue_closed_eyes:didn’t see it. Always good to ask.

1 Like

It could be cool adding highlight effect even when you are dragging the axis point, so you are seeing what you are moving. By the way, Very Nice!