[3d] use vue to rewrite the UI for load3d

src/components/load3d/Load3DAnimationControls.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="controls-container">
+    <Load3DControls
+      :backgroundColor="backgroundColor"
+      :showGrid="showGrid"
+      @toggleCamera="onToggleCamera"
+      @toggleGrid="onToggleGrid"
+      @updateBackgroundColor="onUpdateBackgroundColor"
+    />
+
+    <div class="animation-controls" v-if="animations && animations.length > 0">
+      <Button class="p-button-rounded p-button-text" @click="togglePlay">
+        <i :class="['pi', playing ? 'pi-pause' : 'pi-play']"></i>
+      </Button>
+
+      <Select
+        v-model="selectedSpeed"
+        :options="speedOptions"
+        optionLabel="name"
+        optionValue="value"
+        @change="speedChange"
+        class="speed-dropdown"
+      />
+
+      <Select
+        v-model="selectedAnimation"
+        :options="animations"
+        optionLabel="name"
+        optionValue="index"
+        @change="animationChange"
+        class="animation-dropdown"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { ref } from 'vue'
+
+import Load3DControls from '@/components/load3d/Load3DControls.vue'
+
+const props = defineProps<{
+  animations: Array<{ name: string; index: number }>
+  playing: boolean
+  backgroundColor: string
+  showGrid: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleCamera'): void
+  (e: 'toggleGrid', value: boolean): void
+  (e: 'updateBackgroundColor', color: string): void
+  (e: 'togglePlay', value: boolean): void
+  (e: 'speedChange', value: number): void
+  (e: 'animationChange', value: number): void
+}>()
+
+const animations = ref(props.animations)
+const playing = ref(props.playing)
+const selectedSpeed = ref(1)
+const selectedAnimation = ref(0)
+const backgroundColor = ref(props.backgroundColor)
+const showGrid = ref(props.showGrid)
+
+const speedOptions = [
+  { name: '0.1x', value: 0.1 },
+  { name: '0.5x', value: 0.5 },
+  { name: '1x', value: 1 },
+  { name: '1.5x', value: 1.5 },
+  { name: '2x', value: 2 }
+]
+
+const onToggleCamera = () => {
+  emit('toggleCamera')
+}
+const onToggleGrid = (value: boolean) => emit('toggleGrid', value)
+const onUpdateBackgroundColor = (color: string) =>
+  emit('updateBackgroundColor', color)
+
+const togglePlay = () => {
+  playing.value = !playing.value
+
+  emit('togglePlay', playing.value)
+}
+
+const speedChange = () => {
+  emit('speedChange', selectedSpeed.value)
+}
+
+const animationChange = () => {
+  emit('animationChange', selectedAnimation.value)
+}
+
+defineExpose({
+  animations,
+  selectedAnimation,
+  playing,
+  backgroundColor,
+  showGrid
+})
+</script>
+
+<style scoped>
+.controls-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.animation-controls {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+.pi {
+  color: white;
+  font-size: 1.2rem;
+}
+
+.speed-dropdown {
+  width: 5rem;
+}
+
+.animation-dropdown {
+  width: 8rem;
+}
+</style>

src/components/load3d/Load3DControls.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="view-controls">
+    <Button class="p-button-rounded p-button-text" @click="toggleCamera">
+      <i class="pi pi-camera"></i>
+    </Button>
+
+    <Button
+      class="p-button-rounded p-button-text"
+      :class="{ 'p-button-outlined': showGrid }"
+      @click="toggleGrid"
+    >
+      <i class="pi pi-table"></i>
+    </Button>
+
+    <Button class="p-button-rounded p-button-text" @click="openColorPicker">
+      <i class="pi pi-palette"></i>
+      <input
+        type="color"
+        ref="colorPickerRef"
+        :value="backgroundColor"
+        @input="
+          updateBackgroundColor(($event.target as HTMLInputElement).value)
+        "
+        class="color-input"
+      />
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  backgroundColor: string
+  showGrid: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleCamera'): void
+  (e: 'toggleGrid', value: boolean): void
+  (e: 'updateBackgroundColor', color: string): void
+}>()
+
+const backgroundColor = ref(props.backgroundColor)
+const showGrid = ref(props.showGrid)
+const colorPickerRef = ref<HTMLInputElement | null>(null)
+
+const toggleCamera = () => {
+  emit('toggleCamera')
+}
+
+const toggleGrid = () => {
+  showGrid.value = !showGrid.value
+  emit('toggleGrid', showGrid.value)
+}
+
+const updateBackgroundColor = (color: string) => {
+  emit('updateBackgroundColor', color)
+}
+
+const openColorPicker = () => {
+  colorPickerRef.value?.click()
+}
+
+defineExpose({
+  backgroundColor,
+  showGrid
+})
+</script>
+
+<style scoped>
+.view-controls {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+.pi {
+  color: white;
+  font-size: 1.2rem;
+}
+
+.color-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+}
+</style>