Camera Options & Context Menu

[HunterBarclay]

Description

In order to add the context menu and camera options I wanted, I had to rewrite the entire Camera Controller from the ground up. Good news, we now have an avenue towards mobile touch controls.

Camera

Made a custom orbit camera controller. This controller can be provided a MirabufSceneObject which will act as a provider for dictating what the camera follows around in the scene. You now also have the option to lock the camera orientation to that of the assembly you are following. Left-click to orbit, Right-click to pan.

On mobile, the first touch is for orbiting. If a second touch is detected, it will measure the change in distance between the two touches to determine zoom. Currently Firefox on mobile has something wrong with the movement data it gives, but other than that, it has been working pretty consistently.

Context Menu

If you Right-click, but don't move the mouse by a given threshold, it will instead open a context menu, depending on what you clicked on. Right now, MirabufSceneObject have support for the context menu, supplying options for camera options, scheme changing, and removing the assembly from the scene. If nothing is detected as being clicked on, it will populate with default scene options. Currently this only includes adding assemblies to the scene.

SSL

To test on other devices with the dev server. I have a boolean in vite.config.ts to enable/disable ssl. This will allow you to easily connect to the server AND have OPFS support for the caching system.

TODO

• Low DeltaT causes horridly fast controls of the camera

[a-crowell]

This is super cool! Love the context menu.

• Zooming in seems to zoom in the whole screen => MainHUD/Scoreboard out of view and field blurry rather than controlling scene cam. Note: browser is still on normal zoom seeing this.

• Moving a MirabufSceneObject while camera is focused on it causes fun jumps that are more difficult to control. Temporarily unfocus?

• Second time you move a MirabufSceneObject, the Move gizmo starts based on the last move rather than the current position. For the most part this can be worked around, but it would be nice to not have to go to the other side of the field
• Could you make an option to lock heading/yaw follow without pitch and roll following? Or just make lock heading only to begin with

[HunterBarclay]

@a-crowell

Zooming in seems to zoom in the whole screen => MainHUD/Scoreboard out of view and field blurry rather than controlling scene cam. Note: browser is still on normal zoom seeing this.

I have no idea what's happening there and I haven't ever seen it before. Could you give steps to reproduce it?

Moving a MirabufSceneObject while camera is focused on it causes fun jumps that are more difficult to control. Temporarily unfocus?

An unfocus would probably be a good idea, tho a better fix will probably be needed later down the line.

Second time you move a MirabufSceneObject, the Move gizmo starts based on the last move rather than the current position. For the most part this can be worked around, but it would be nice to not have to go to the other side of the field

This is a fundamental issue with how the transform gizmos are done. This may have to become it's own PR.

Could you make an option to lock heading/yaw follow without pitch and roll following? Or just make lock heading only to begin with

This runs into a lot of issues. The more the robot isn't upright, the more unreliable doing something like this becomes.

[LucaHaverty]

Could you add rotation to the move gizmo in case robots tip over?

[a-crowell]

@HunterBarclay

Zooming in

On my work laptop, normal zoom: put two fingers down and moved the second outward. Happened every time I zoomed in, but never on zoom out. Happy to hop on call to show you.

Everything else sounds good.

[HunterBarclay]

Could you add rotation to the move gizmo in case robots tip over?

Going to wait on @Dhruv-0-Arora 's transform gizmos fix for that.

[HunterBarclay]

@a-crowell Where are you placing your fingers? Are they over any of the UI elements?

[LucaHaverty]

Could you make it so when you add/edit either a scoring zone, intake, or ejector, the camera follows the transform gizmo like in v6? I believe the camera stayed still while dragging the gizmo, then snapped to it when the mouse was released.

[a-crowell]

@a-crowell Where are you placing your fingers? Are they over any of the UI elements?

They're not over any UI, just the floor mesh or blank space surrounding. Want to hop on call so I can show you?

[LucaHaverty]

@HunterBarclay

Zooming in

On my work laptop, normal zoom: put two fingers down and moved the second outward. Happened every time I zoomed in, but never on zoom out. Happy to hop on call to show you.

Everything else sounds good.

@HunterBarclay for the solution, see InputSystem.ts line 167.

// Disable gesture inputs on track pad to zoom into UI
window.addEventListener(
    "wheel",
    function (e) {
        if (e.ctrlKey) {
            e.preventDefault() // Prevent the zoom
        }
    },
    { passive: false }
)

[BrandonPacewic]

synthesis/fission/src/systems/input/InputSystem.ts

Lines 167 to 177 in 3557819

	// Disable gesture inputs on track pad to zoom into UI
	window.addEventListener(
	"wheel",
	function (e) {
	if (e.ctrlKey) {
	e.preventDefault() // Prevent the zoom
	}
	},
	{ passive: false }
	)
	}

👀

[HunterBarclay]

@LucaHaverty @a-crowell Added the fix, haven't tested it yet tho. Make sure you pull --rebase when getting changes, I'm trying out rebasing with this project.

[LucaHaverty]

@LucaHaverty @a-crowell Added the fix, haven't tested it yet tho. Make sure you pull --rebase when getting changes, I'm trying out rebasing with this project.

@HunterBarclay I'm unable to zoom at all now. It looks like with your custom camera, blocking the scroll wheel default blocks the camera inputs, but the threejs camera does something different that's not affected. Does it work with a mouse?

[LucaHaverty]

When opening the context menu:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ContextMenu`. See https://reactjs.org/link/warning-keys for more information.
    at Button (http://127.0.0.1:3000/fission/src/ui/components/Button.tsx:19:19)
    at ContextMenu (http://127.0.0.1:3000/fission/src/ui/components/ContextMenu.tsx:20:31)
    at ToastProvider (http://127.0.0.1:3000/fission/src/ui/ToastContext.tsx:22:33)
    at PanelControlProvider (http://127.0.0.1:3000/fission/src/ui/PanelContext.tsx:20:40)
    at ModalControlProvider (http://127.0.0.1:3000/fission/src/ui/ModalContext.tsx:20:40)
    at PresenceChild (http://127.0.0.1:3000/fission/node_modules/.vite/deps/framer-motion.js?v=131b123d:7102:24)
    at AnimatePresence (http://127.0.0.1:3000/fission/node_modules/.vite/deps/framer-motion.js?v=131b123d:7168:26)
    at TooltipControlProvider (http://127.0.0.1:3000/fission/src/ui/TooltipContext.tsx:24:42)
    at PresenceChild (http://127.0.0.1:3000/fission/node_modules/.vite/deps/framer-motion.js?v=131b123d:7102:24)
    at AnimatePresence (http://127.0.0.1:3000/fission/node_modules/.vite/deps/framer-motion.js?v=131b123d:7168:26)
    at Synthesis (http://127.0.0.1:3000/fission/src/Synthesis.tsx:73:62)
    at ThemeProvider (http://127.0.0.1:3000/fission/src/ui/ThemeContext.tsx:22:33)