Corrigiu seleção do modelo 3D
X-Lovable-Edit-ID: edt-4d77ca34-5604-4bfa-8684-94d3365da153 Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
This commit is contained in:
@@ -83,6 +83,7 @@ function GLBModel({ sceneModel, isActive }: { sceneModel: SceneModel; isActive:
|
||||
const edgeThresholdAngle = useModelStore((s) => s.edgeThresholdAngle);
|
||||
const checklist = useModelStore((s) => s.checklist);
|
||||
const setActive = useModelStore((s) => s.setActiveModel);
|
||||
const selectionMode = useModelStore((s) => s.selectionMode);
|
||||
const fineTuning = sceneModel.fineTuning;
|
||||
|
||||
const modelInfo = useMemo(() => {
|
||||
@@ -184,7 +185,20 @@ function GLBModel({ sceneModel, isActive }: { sceneModel: SceneModel; isActive:
|
||||
return (
|
||||
<group
|
||||
scale={[renderFactor, renderFactor, renderFactor]}
|
||||
onClick={(e) => { e.stopPropagation(); setActive(sceneModel.id); }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if ((e.delta ?? 0) > 4) return;
|
||||
|
||||
if (selectionMode) {
|
||||
const element = findElementRoot(e.object);
|
||||
if (element) {
|
||||
useModelStore.getState().toggleElementSelection(elementKey(sceneModel.id, element));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setActive(sceneModel.id);
|
||||
}}
|
||||
userData={{ modelId: sceneModel.id, dominantAxis }}
|
||||
>
|
||||
{/* Translation */}
|
||||
@@ -707,43 +721,27 @@ function SelectionHandler() {
|
||||
const prevCursor = gl.domElement.style.cursor;
|
||||
gl.domElement.style.cursor = 'cell';
|
||||
const canvas = gl.domElement;
|
||||
let downX = 0, downY = 0, armed = false;
|
||||
|
||||
const onDown = (e: PointerEvent) => {
|
||||
if (e.button !== 0) { armed = false; return; }
|
||||
downX = e.clientX; downY = e.clientY; armed = true;
|
||||
};
|
||||
const onUp = (e: PointerEvent) => {
|
||||
if (!armed) return;
|
||||
armed = false;
|
||||
if (Math.hypot(e.clientX - downX, e.clientY - downY) > 4) return;
|
||||
|
||||
const onR3FMiss = (event: Event) => {
|
||||
const detail = (event as CustomEvent<PointerEvent>).detail;
|
||||
if (!detail || detail.button !== 0) return;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
mouse.x = ((detail.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
mouse.y = -((detail.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||
const hit = intersects.find((i) => isPickableModelMesh(i.object));
|
||||
if (!hit) return;
|
||||
|
||||
const element = findElementRoot(hit.object);
|
||||
let cur: THREE.Object3D | null = hit.object;
|
||||
let modelId: string | null = null;
|
||||
while (cur) {
|
||||
if (!modelId && cur.userData?.modelId) modelId = cur.userData.modelId as string;
|
||||
cur = cur.parent;
|
||||
}
|
||||
if (!modelId) modelId = useModelStore.getState().activeModelId;
|
||||
const modelId = useModelStore.getState().activeModelId;
|
||||
if (!modelId || !element) return;
|
||||
const key = elementKey(modelId, element);
|
||||
useModelStore.getState().toggleElementSelection(key);
|
||||
useModelStore.getState().toggleElementSelection(elementKey(modelId, element));
|
||||
};
|
||||
|
||||
canvas.addEventListener('pointerdown', onDown);
|
||||
canvas.addEventListener('pointerup', onUp);
|
||||
canvas.addEventListener('tsxr-selection-miss', onR3FMiss);
|
||||
return () => {
|
||||
canvas.removeEventListener('pointerdown', onDown);
|
||||
canvas.removeEventListener('pointerup', onUp);
|
||||
canvas.removeEventListener('tsxr-selection-miss', onR3FMiss);
|
||||
gl.domElement.style.cursor = prevCursor;
|
||||
};
|
||||
}, [selectionMode, camera, scene, gl, raycaster, mouse]);
|
||||
@@ -1021,6 +1019,11 @@ export function ModelViewerCanvas({ url }: ModelViewerProps) {
|
||||
gl={{ antialias: true, alpha: true, powerPreference: 'high-performance', preserveDrawingBuffer: true }}
|
||||
frameloop="always"
|
||||
className="!bg-background"
|
||||
onPointerMissed={(e) => {
|
||||
if (useModelStore.getState().selectionMode) {
|
||||
(e.target as HTMLCanvasElement).dispatchEvent(new CustomEvent('tsxr-selection-miss', { detail: e }));
|
||||
}
|
||||
}}
|
||||
onCreated={({ gl }) => {
|
||||
const isApple = /Mac|iPhone|iPad/.test(navigator.platform);
|
||||
const maxRatio = isApple ? 2 : 1.5;
|
||||
|
||||
Reference in New Issue
Block a user