lots of fixes and finding new problems

This commit is contained in:
Yeicor
2024-02-19 21:19:26 +01:00
parent c9e8bde9ca
commit ba74b97bd9
5 changed files with 57 additions and 25 deletions

View File

@@ -53,11 +53,30 @@ function centerCamera() {
let selectionEnabled = ref(false);
let selectedMaterials: Array<Material> = []
let hasListener = false;
let ignoreClickFrom: [number, number] | null = null;
let selectionMoveListener = (event: MouseEvent) => {
if (!selectionEnabled.value) return;
ignoreClickFrom = [event.clientX, event.clientY];
};
let selectionListener = (event: MouseEvent) => {
if (!selectionEnabled.value) return;
if (!selectionEnabled.value) {
ignoreClickFrom = undefined;
return;
}
if (ignoreClickFrom) {
let [x, y] = ignoreClickFrom;
if (Math.abs(event.clientX - x) > 5 || Math.abs(event.clientY - y) > 5) {
ignoreClickFrom = undefined;
return;
}
ignoreClickFrom = undefined;
}
let viewer: ModelViewerElement = props.refSData.viewer;
// FIXME: Clicking near edges does not work...
// FIXME: Clicking with ORTHO camera does not work...
const material = viewer.materialFromPoint(event.clientX, event.clientY);
console.log(material)
if (material === null) return;
const wasSelected = selectedMaterials.find((m) => m === material) !== undefined;
if (wasSelected) {
@@ -85,7 +104,8 @@ function toggleSelection() {
selectionEnabled.value = !selectionEnabled.value;
if (selectionEnabled.value) {
if (!hasListener) {
viewer.addEventListener('click', selectionListener);
viewer.addEventListener('mouseup', selectionListener);
viewer.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
hasListener = true;
}
for (let material of selectedMaterials) {

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import {settings} from "../misc/settings";
import {ModelViewerElement, RGBA} from '@google/model-viewer';
import {ModelViewerElement} from '@google/model-viewer';
import {onMounted, ref} from "vue";
import {$scene} from "@google/model-viewer/lib/model-viewer-base";
import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
@@ -33,12 +33,13 @@ onMounted(() => {
<template>
<model-viewer ref="viewer"
style="width: 100%; height: 100%" :src="props.src" alt="The 3D model(s)" camera-controls
camera-orbit="30deg 75deg auto"
max-camera-orbit="Infinity 180deg auto" min-camera-orbit="-Infinity 0deg auto" disable-tap
style="width: 100%; height: 100%" :src="props.src" alt="The 3D model(s)" camera-controls camera-orbit="30deg 75deg auto"
max-camera-orbit="Infinity 180deg auto" min-camera-orbit="-Infinity 0deg 1%" disable-tap
:exposure="settings.exposure" :shadow-intensity="settings.shadowIntensity" interaction-prompt="none"
:autoplay="settings.autoplay" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes"
:skybox-image="settings.background" :environment-image="settings.background"></model-viewer>
:skybox-image="settings.background" :environment-image="settings.background">
<slot></slot> <!-- Controls, annotations, etc. -->
</model-viewer>
</template>
<style scoped>