CADmium-Co / CADmium

A CAD program that runs in the browser
https://cadmium-co.github.io/CADmium/
Other
1.36k stars 51 forks source link

Implement Zoom To Pointer #27

Open MattFerraro opened 1 month ago

MattFerraro commented 1 month ago

The Camera Controller we use now is the default TrackballControls from Three.js, albeit wrapped by Threlte. But this does not implement the zoom-to-mouse behavior that is default on almost every major CAD program. We need to implement that behavior.

This will require diving deep into the TrackballControls code and rewriting parts of it. For inspiration on how to tackle the math, CameraControls has an implementation that feels mostly right, but it is limited in that it experiences gimbal lock at the north and south poles like OrbitControls.

If you can read the source code of TrackballControls and it makes sense to you, then you have all the skills you need to implement this.

daef commented 1 month ago

if someone were to fix this, this should probably be implemented in three.js

there are multiple issues concerning this (https://github.com/mrdoob/three.js/issues/27399, https://github.com/mrdoob/three.js/issues/27110, https://github.com/mrdoob/three.js/issues/25977, ..) reading issues like https://github.com/mrdoob/three.js/issues/26366 or https://github.com/mrdoob/three.js/issues/18496 make me think that (trackball)controls are waiting for an overhaul anyways.

MattFerraro commented 1 month ago

Making this change and contributing it upstream to Threejs would be great and I'd support that. Maybe it goes without saying but I also do not want to wait until it gets accepted upstream before using the new controller in CADmium

talkingtab commented 1 month ago

I am new to this (3js, r3f, r3d) so I could be completely off base:

I have tried using OrbitControls, MapControls & Camera-controls in {3,r3d,r3f}. My sense is that controls are following use cases. In other words- if some different behavior is needed a new kind of control is developed. The resulting multiple variants is difficulty maintaining a common interface to controls, feature set, etc. This is a hard problem, especially if the use cases are not understood.

My thinking is to begin collect the use cases and then begin merging all cases into one common control. Perhaps a single unified control is not possible, but if not, do we understand why not?

Just for example, my use case is a leaflet.js/google maps like interface that allows someone to zoom into a data map (implemented at the top level by a treemap). Imagine zooming into from google maps world view, down to a street level, then a building level, then inside a changing into a 3d view of the room. Just zooming. It appears the functionality to achieve this is already there. Camera-Controls, LOD/Details, OrthographicCamera, Perspective Camera, zoomToCursor. The issue is the interoperability of the pieces.

Perhaps a later task is to address the conceptual model of cameras and controls. Can the same camera have two interchangeable lens? (Perspective and Orthogonal). Currently cameras are attached to scenes, and controls to cameras. But is that right conceptually?

MattFerraro commented 1 month ago

@talkingtab I think you making some good observations about some big questions, but CADmium is not in a position to try and re-invent anything about threejs or how it works. We need one scene with one camera with one set of controls and we should use a specific, unique camera controller that we develop to exactly match our use case

MattFerraro commented 1 month ago

Here is a starting point: https://github.com/CADmium-Co/CADmium/pull/66