Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cycle through predefined orbits when tapping axes #83

Merged
merged 2 commits into from
Dec 25, 2024
+30 −0
Merged

Cycle through predefined orbits when tapping axes #83

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
989449d
Cycle through predefined orbits when tapping axes
ochafik Dec 25, 2024
7814d7c
Update ViewerPanel.tsx
ochafik Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/components/ViewerPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

import { CSSProperties, useContext, useEffect, useRef, useState } from 'react';
import { ModelContext } from './contexts';
import { on } from 'events';
import { Toast } from 'primereact/toast';

declare global {
namespace JSX {
Expand All @@ -11,13 +13,21 @@ declare global {
}
}

const PREDEFINED_ORBITS: [string, number, number][] = [
["Front", 0, Math.PI / 2],
["Right", Math.PI / 2, Math.PI / 2],
["Top", 0, 0],
["Bottom", -Math.PI, Math.PI],
];

export default function ViewerPanel({className, style}: {className?: string, style?: CSSProperties}) {
const model = useContext(ModelContext);
if (!model) throw new Error('No model');

const state = model.state;
const modelViewerRef = useRef<any>();
const axesViewerRef = useRef<any>();
const toastRef = useRef<Toast>(null);

for (const ref of [modelViewerRef, axesViewerRef]) {
const otherRef = ref === modelViewerRef ? axesViewerRef : modelViewerRef;
Expand All @@ -38,6 +48,25 @@ export default function ViewerPanel({className, style}: {className?: string, sty
return () => element.removeEventListener('camera-change', handleCameraChange);
}, [ref.current, otherRef.current]);
}

useEffect(() => {
function onClick(e: MouseEvent) {
if (e.target === axesViewerRef.current) {
// Cycle through orbits
const orbit = axesViewerRef.current.getCameraOrbit();
const eps = 0.01;
const currentIndex = PREDEFINED_ORBITS.findIndex(([_, theta, phi]) => Math.abs(orbit.theta - theta) < eps && Math.abs(orbit.phi - phi) < eps);
const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % PREDEFINED_ORBITS.length;
const [name, theta, phi] = PREDEFINED_ORBITS[newIndex];
orbit.theta = theta;
orbit.phi = phi;
const newOrbit = modelViewerRef.current.cameraOrbit = axesViewerRef.current.cameraOrbit = orbit.toString();
toastRef.current?.show({severity: 'info', detail: `${name} view`, life: 1000,});
}
}
window.addEventListener('click', onClick);
return () => window.removeEventListener('click', onClick);
});

return (
<div className={className}
Expand All @@ -49,6 +78,7 @@ export default function ViewerPanel({className, style}: {className?: string, sty
width: '100%',
...(style ?? {})
}}>
<Toast ref={toastRef} position='bottom-right' />
<model-viewer
orientation="0deg -90deg 0deg"
class="main-viewer"
Expand Down
Loading