try html component for debugger

Author: damienmontastier

src/core/abstractions/Decal/Item.vue

@@ -3,6 +3,7 @@ import { onUnmounted, shallowRef, toRefs, watch } from 'vue'
 import { MathUtils, Mesh } from 'three'
 import { DecalGeometry } from 'three-stdlib'
 import type { Decal, DecalAttributesItem, EnhancedTexture } from './types'
+import { Html } from '@tresjs/cientos'
 
 const props = withDefaults(defineProps<DecalAttributesItem>(), {
   properties: () => ({} as Decal),

src/core/abstractions/Decal/Resizer.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { useElementBounding, useMouse, useMouseInElement, useMousePressed } from '@vueuse/core'
+import type { UseMouseEventExtractor } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+const testRef = ref<HTMLElement | null>(null)
+const { width, height, left, top } = useElementBounding(testRef)
+const { isOutside } = useMouseInElement(testRef)
+const { pressed: mouseIsPressed } = useMousePressed({ target: testRef, touch: false, drag: false })
+
+const angle = ref(0)
+const resizerIsActive = ref(false)
+
+const extractor: UseMouseEventExtractor = (event) => {
+  if (event instanceof Touch) { return null }
+  const centerX = width.value / 2
+  const centerY = height.value / 2
+  const offsetX = event.clientX - left.value - centerX
+  const offsetY = event.clientY - top.value - centerY
+
+  return [offsetX, offsetY]
+}
+
+const { x, y } = useMouse({ target: testRef, type: extractor })
+
+watch([x, y], () => {
+  const distance = Math.sqrt(x.value ** 2 + y.value ** 2)
+  const radius = Math.min(width.value, height.value) / 2
+  const distanceNormalized = distance / radius
+
+  resizerIsActive.value = distanceNormalized < 1.1 && distanceNormalized > 0.95
+
+  if (resizerIsActive.value) {
+    const angleRad = Math.atan2(y.value, x.value)
+    angle.value = angleRad + Math.PI
+  }
+
+  if (mouseIsPressed.value && !resizerIsActive.value) {
+    console.log('transformation')
+    // testRef.value.style.transform = `translate(${x.value}px, ${y.value}px)`
+  }
+
+  if (mouseIsPressed.value && resizerIsActive.value) {
+    console.log('resize scale')
+  }
+})
+</script>
+
+<template>
+  <div ref="testRef" class="test-controler__wrapper">
+    <span class="border"></span>
+    <span class="dot-center"></span>
+    <div :class="{ hide: !resizerIsActive || isOutside }" class="bar" :style="`transform: rotate(${angle}rad) translateZ(0px)`">
+      <span class="bar-inner"></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.test-controler {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.test-controler__wrapper {
+  position: absolute;
+  width: 450px;
+  height: 450px;
+  pointer-events: all;
+}
+
+.dot-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  background-color: white;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.bar {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  cursor: ew-resize;
+}
+
+.bar.hide {
+  display: none;
+}
+
+.bar-inner {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  width: 50px;
+  height: 12px;
+  border-radius: 5px;
+  background-color: red;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+.border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  outline: 5px solid white;
+}
+</style>

src/core/abstractions/Decal/index.vue

@@ -6,12 +6,13 @@ import type { BoxHelper, Group, Intersection } from 'three'
 import { Color, Euler, MathUtils, Mesh, SRGBColorSpace, Vector3 } from 'three'
 import { DecalGeometry } from 'three-stdlib'
 import { useRenderLoop, useTexture, useTresContext } from '@tresjs/core'
-import { Box } from '../../index'
+import { Box, Html } from '../../index'
 import Item from './Item.vue'
 import { parseTextureFilename, updateBoxHelper } from './utils'
 import { useControls } from '@tresjs/leches'
 import { useClipboard } from '@vueuse/core'
 import type { Decal, DecalAttributes, DecalElementProps, EnhancedTexture } from './types'
+import Resizer from './Resizer.vue'
 
 const props = withDefaults(defineProps<DecalAttributes>(), {
   debug: false,
@@ -716,6 +717,10 @@ onUnmounted(() => {
     <TresMeshNormalMaterial />
   </Box>
 
+  <Html>
+    <Resizer />
+  </Html>
+
   <TresGroup ref="boxHelpersRef">
     <TresBoxHelper
       v-if="debug"

src/core/abstractions/Decal/useDecalControls.ts

@@ -0,0 +1,90 @@
+import { computed, ref } from 'vue'
+import { useControls } from '@tresjs/leches'
+
+export function useDecalControls(textureMap, computedNodesDecal, onClearDecals, onDeleteCurrentDecal, onExportDecals) {
+  const typeEdit = ref([
+    { text: 'scale', value: 'scale' },
+    { text: 'orientation', value: 'orientation' },
+    { text: 'position', value: 'position' },
+  ])
+
+  const {
+    scaleControls,
+    orientationZControls,
+    keyTextureSelected,
+    decalSelected,
+    clearBtn,
+    deleteBtn,
+    typeEditControls,
+    exportBtn,
+  } = useControls({
+    keyTextureSelected: {
+      options: Object.keys(textureMap.value).map(key => ({
+        text: key,
+        value: key,
+      })),
+      value: Object.keys(textureMap.value)[0],
+    },
+    decalSelected: {
+      options: computedNodesDecal.value,
+      value: 'none',
+    },
+    typeEditControls: {
+      label: 'Edit',
+      options: typeEdit.value,
+      value: typeEdit.value[0].value,
+      visible: false,
+    },
+    scaleControls: {
+      label: 'Scale',
+      value: 1,
+      visible: false,
+      min: 0.001,
+      max: 10,
+      step: 0.001,
+    },
+    orientationZControls: {
+      label: 'Orientation Z',
+      visible: false,
+      value: 0,
+      min: -360,
+      max: 360,
+      step: 1,
+    },
+    deleteBtn: {
+      label: 'Delete Decal',
+      type: 'button',
+      onClick: onDeleteCurrentDecal,
+      visible: false,
+      size: 'md',
+    },
+    exportBtn: {
+      label: 'Export decals',
+      type: 'button',
+      onClick: onExportDecals,
+      visible: false,
+      size: 'md',
+    },
+    clearBtn: {
+      label: 'Clear Decals',
+      type: 'button',
+      onClick: onClearDecals,
+      size: 'md',
+    },
+  })
+
+  clearBtn.value.visible = false
+  deleteBtn.value.visible = false
+  exportBtn.value.visible = false
+
+  return {
+    scaleControls,
+    orientationZControls,
+    keyTextureSelected,
+    decalSelected,
+    clearBtn,
+    deleteBtn,
+    typeEditControls,
+    exportBtn,
+  }
+}

src/core/abstractions/Decal/useDecals.ts

@@ -0,0 +1,115 @@
+/* eslint-disable no-console */
+
+import { computed, nextTick, ref, shallowRef, toRaw } from 'vue'
+import { Euler, MathUtils, Vector3 } from 'three'
+import { useClipboard } from '@vueuse/core'
+import type { Decal, DecalAttributes, DecalElementProps, EnhancedTexture } from './types'
+
+export function useDecals(textureMap, groupRef) {
+  const nodesDecalRefs = ref<Decal[]>([])
+  const decalItemsRef = ref<DecalElementProps[]>([])
+  const { copy, isSupported } = useClipboard()
+
+  const computedNodesDecal = computed(() => [
+    { text: 'none', value: 'none' },
+    ...nodesDecalRefs.value.map((_, index) => ({
+      text: `decal-${index}`,
+      value: `decal-${index}`,
+    })),
+  ])
+
+  const importDecals = async (decalsArray: any[]) => {
+    if (!groupRef.value) { return }
+
+    for (const decalData of decalsArray) {
+      const { position, normal, size, orientation, orientationZ, scale, uid, textureFilename } = decalData
+      const selectedMap = textureMap.value[textureFilename]
+
+      if (!selectedMap) {
+        console.warn(`Texture "${textureFilename}" introuvable dans textureMap.`)
+        continue
+      }
+
+      const recreatedDecal = {
+        position: new Vector3(...position),
+        orientation: new Euler(...orientation),
+        orientationZ,
+        size: new Vector3(...size),
+        scale,
+        normal: new Vector3(...normal),
+        parent: groupRef.value?.parent as Group,
+        map: selectedMap,
+        uid,
+        textureFilename,
+        index: nodesDecalRefs.value.length,
+      }
+
+      nodesDecalRefs.value.push(recreatedDecal)
+    }
+
+    await nextTick()
+
+    //   decalSelected.value.options = computedNodesDecal.value
+    //   decalSelected.value.value = 'none'
+  }
+
+  const onClearDecals = async () => {
+    nodesDecalRefs.value = []
+    decalItemsRef.value = []
+    await nextTick()
+    console.log('✅ Decals have just been removed')
+  }
+
+  const onDeleteCurrentDecal = async (selectedUid) => {
+    const indexToDelete = nodesDecalRefs.value.findIndex(node => node.uid === selectedUid)
+    if (indexToDelete === -1) {
+      console.warn(`Decal with UID ${selectedUid} not found.`)
+      return
+    }
+    nodesDecalRefs.value.splice(indexToDelete, 1)
+    decalItemsRef.value.splice(indexToDelete, 1)
+    await nextTick()
+    console.log(`✅ ${selectedUid} just been removed`)
+  }
+
+  const onExportDecals = async () => {
+    const decalsArr = toRaw(nodesDecalRefs.value)
+    const formattedDecals = decalsArr.map(item => ({
+      position: item.position.toArray(),
+      normal: item.normal.toArray(),
+      size: item.size.toArray(),
+      orientation: item.orientation.toArray().slice(0, 3),
+      orientationZ: item.orientationZ,
+      scale: item.scale,
+      uid: item.uid,
+      textureFilename: item.textureFilename,
+    }))
+
+    const jsonString = JSON.stringify(formattedDecals, null, 2)
+
+    if (isSupported) {
+      try {
+        await copy(jsonString)
+        console.log('✅ Data successfully copied to clipboard!')
+      }
+      catch (error) {
+        console.error('Copy to clipboard fails:', error)
+      }
+    }
+    else {
+      console.error('Copying to the clipboard is not supported on this browser.')
+    }
+
+    return jsonString
+  }
+
+  return {
+    nodesDecalRefs,
+    decalItemsRef,
+    computedNodesDecal,
+    importDecals,
+    onClearDecals,
+    onDeleteCurrentDecal,
+    onExportDecals,
+  }
+}