[3d] use vue to rewrite the UI for load3d (#2467)

src/components/load3d/Load3DAnimationControls.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
+    <Load3DControls
+      :backgroundColor="backgroundColor"
+      :showGrid="showGrid"
+      @toggleCamera="onToggleCamera"
+      @toggleGrid="onToggleGrid"
+      @updateBackgroundColor="onUpdateBackgroundColor"
+      ref="load3dControlsRef"
+    />
+
+    <div
+      v-if="animations && animations.length > 0"
+      class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
+    >
+      <Button class="p-button-rounded p-button-text" @click="togglePlay">
+        <i
+          :class="[
+            'pi',
+            playing ? 'pi-pause' : 'pi-play',
+            'text-white text-lg'
+          ]"
+        ></i>
+      </Button>
+
+      <Select
+        v-model="selectedSpeed"
+        :options="speedOptions"
+        optionLabel="name"
+        optionValue="value"
+        @change="speedChange"
+        class="w-24"
+      />
+
+      <Select
+        v-model="selectedAnimation"
+        :options="animations"
+        optionLabel="name"
+        optionValue="index"
+        @change="animationChange"
+        class="w-32"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { ref, watch } 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 load3dControlsRef = ref(null)
+
+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 }
+]
+
+watch(backgroundColor, (newValue) => {
+  load3dControlsRef.value.backgroundColor = newValue
+})
+
+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>

src/components/load3d/Load3DControls.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="absolute top-2 left-2 flex flex-col gap-2 pointer-events-auto z-20"
+  >
+    <Button class="p-button-rounded p-button-text" @click="toggleCamera">
+      <i class="pi pi-camera text-white text-lg"></i>
+    </Button>
+
+    <Button
+      class="p-button-rounded p-button-text"
+      :class="{ 'p-button-outlined': showGrid }"
+      @click="toggleGrid"
+    >
+      <i class="pi pi-table text-white text-lg"></i>
+    </Button>
+
+    <Button class="p-button-rounded p-button-text" @click="openColorPicker">
+      <i class="pi pi-palette text-white text-lg"></i>
+      <input
+        type="color"
+        ref="colorPickerRef"
+        :value="backgroundColor"
+        @input="
+          updateBackgroundColor(($event.target as HTMLInputElement).value)
+        "
+        class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+      />
+    </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>