Feedback wanted for physics-based 3D editor

Demos and projects
1

tl;dr

For my side-project, I created a novel way to arrange objects in a 3D environment. Here is a demo, please check it out and provide feedback if you have any. Thanks :raised_hands:

https://app.mokk.app/placement-demo

The long version

The pitch:

mokk.app is a mockup tool that lets you place devices in a 3D environment and render them from any angle on a fast computer in the cloud. The only thing you need is a browser.

One main goal is to create a good editing experience and make it suitable for beginners without any prior 3d experience.

For manipulation of objects, I thought the usual gizmos won’t cut it. Doing rotations is always a bit awkward, you’ll need to understand the concepts of global and local space and be careful to not intersect your meshes.

My proposal is a physics-based 3D editor with custom gizmos and interactions:

Screen Shot 2022-07-28 at 10.40.55
Screen Shot 2022-07-28 at 10.40.551920Ă—1080 98 KB

Here’s how to use it:

To manipulate the camera, drag with your left mouse button while holding Shift, Alt, or Ctrl to Move, Rotate or Zoom the camera. The point of reference is always the point in 3D space under your cursor (by the way, this is a custom input controller, you can read more about it here: Addition of Camera type that matches 3D applications - #6 by Brand)

To manipulate objects, you’ll first need to select one. Then you can try the following methods:

  • Use the inner circle gizmo to move the object
  • Use the box gizmo to lift the object up
  • Use the outer ring gizmo to do a planar rotation
  • Grab the object with your mouse to rotate it around its center of mass
  • Grab the object and pull a bit further to detach it. It’s now in a free float mode, similar to an object in space. You can also toggle between pinned and floating by pressing “P”
  • Press “G” to enable gravity
  • Press “R” to reset the objects position/rotation
  • … and of course, you can combine all of this how you like

I’m basically looking for all feedback I can get, so please feel free to share what you think :slight_smile:

The demo is available here: https://app.mokk.app/placement-demo

And here’s a quick 2-minutes screencast:

Some notes and questions:

  • Sorry for my jittery cursor, I’m using a graphics tablet :sweat_smile:
  • Yes, the physics engine can be a bit unstable at times
  • Do you think there is still the need for traditional gizmos or precise control by punching in numbers?
  • While I like the position and rotation gizmo, the box for the lift is just a placeholder and I’m still searching for good idea for a better visualization
  • Do you think this is a better or worse way of manipulating 3D content for this specific use case?

Thanks! :raised_hands:

If you’re interested, you can follow my progress on Twitter https://twitter.com/thomasaull. If you’d like to get notified when this project launches, sign-up here: https://www.mokk.app/

5 Likes
2

I love the overall idea but it took me a while to figure how to use it mostly for dragging things around :slight_smile:

1 Like
3

@sebavan Using the gizmos or dragging the object directly? Yes there is definitely a learning curve, since everything is a bit unusual. There will be a Onboarding in some form, but do you have any ideas about how to make it more obvious?

4

Onboarding sounds perfect to me

1 Like