Three.js: Editor: better controls for default camera

[looeee]

Most modelling programs have quick settings for the default camera, such as:

• jump to specific views such as top, left, bottom, right,
• reset the view
• switch between perspective and orthographic projection
• fit camera to scene (in clara.io this is called "frame scene")
• fit camera to selection
• create new perspective camera from current view and add it to the scene

It would be useful to add these to the editor as well. Most of these options can go in the same menu that was added in #15998.
See Clara.io for an example of how these can be set up.

[looeee]

/ping @Temdog007

[Temdog007]

These are good ideas. I'm trying not to add to many PRs before they merged (as per @Mugen87 comment).

I would suggest waiting until #15750, #15998, and #16010 are merged before implementing these changes. Those PRs add menus that would make adding these features easier.

[mrdoob]

15998 and #16010 merged. #15750 to go 💪

[Temdog007]

Since we're close, I'll start getting some feedback from you guys now about how to tackle these suggestions. I don't want the issue that occurred in #15983 where I was told to basically redo my implementation.

---

• jump to specific views such as top, left, bottom, right
• switch between perspective and orthographic projection

These can be done by adding adding an OrthographicCamera to the Editor class.

Current | Suggestion
----- | -------
|

The change in #15998 will allow for camera selection.

---

• reset the view

I'm assuming you mean set the view back to the default position the editor sets the camera on startup. @looeee, please correct me if I'm wrong.

Most of these options can go in the same menu that was added in #15998.

I was thinking that that menu should be for camera selection only. I was thinking about adding the option in the edit toolbar instead.

---

• fit camera to scene (in clara.io this is called "frame scene")
• fit camera to selection

Doesn't the editor already do this? If you double click an object, the camera focuses on that object. To focus on the scene, just double click the scene in the Outliner. The editor currently only allows for one object to be selected at once. So to select a selection of objects, put those objects into a Group, then double click the Group in the Outliner. Unless, you want the editor to allow for multiple objects to be selected?

---

• create new perspective camera from current view and add it to the scene

I would just add a context menu to the default editor cameras but only have the 'clone' option available.

15750 would need to be merged before I work on that one.

[Mugen87]

fit camera to scene (in clara.io this is called "frame scene")
fit camera to selection

Are you aware that comparable features are already implemented? If you double-click on entries in the outliner or directly on objects,THREE.EditorControls focuses the selected object. That works for individual objects as well as for groups or scenes.

[looeee]

Ah, no I didn't know about that. Works well, although I wonder how we can communicate better that it's available? Double-clicking is not a common way of interacting with things on the web.

[Mugen87]

Maybe we could add a menu entry that triggers this logic? If the editor supports a context menu at some point, this would also good place.

[looeee]

The camera menu in the top right is currently fairly empty, maybe there?
Maybe a shortcut key well? The Z key is used for zoom to selection in Max, I don't know if that's the case in other apps.

[Mugen87]

Maybe a shortcut key well?

This is already possible 😁 . Just select an object and then press f (for focus).

Maybe we just need to add a simple manual with some basic explanations about the editor's controls.

[looeee]

Yeah, currently the Help menu just links to the source code and the threejs.org homepage, which is not very helpful haha.

Are the keyboard shortcuts listed anywhere? That would be a good start.

[Mugen87]

Are the keyboard shortcuts listed anywhere?

They are listed in the "SETTINGS" tab where you can customize them, too.

[Mugen87]

jump to specific views such as top, left, bottom, right,

Implemented via #19774. 🙌

[Mugen87]

switch between perspective and orthographic projection

@mrdoob I've seen multiple users asking that feature e.g.:

https://discourse.threejs.org/t/threejs-editor-default-camera-make-orthographic/17213
https://discourse.threejs.org/t/how-to-use-orthographiccamera-and-drag-objects-in-three-js-editor/21317

There was #16212 but the PR was more or less incomplete since proper support for orthographic camera requires an enhancement for EditorControls. As you can see at the following live example, zooming does not work yet. The panning logic also requires an update if orthographic cameras should be supported.

https://jsfiddle.net/c92jeLbm/

Should we enhance EditorControls? Or should we consider using OrbitControls as a base class for EditorControls (AFAIK, EditorControls is just an early fork of OrbitControls anyway)?

[mrdoob]

@Mugen87 I think I would prefer enhancing EditorControls.

EditorControls was a fork of OrbitControls that allowed me adding features (like double click to focus) without having to think of consequences 😅

[Mugen87]

I think I would prefer enhancing EditorControls.

I also prefer this option 😊 . OrbitControls is always some sort of a hot topic so having EditorControls gives us more freedom within the editor.