Skip to content

Commit fe39293

Browse files
damienmontastierdamienmontastier
committed
feat(cientos): continue experimental work and refine component behavior during testing
1 parent 9715238 commit fe39293

4 files changed

Lines changed: 115 additions & 103 deletions

File tree

‎packages/cientos/playground/vue/src/pages/abstractions/DecalDemo.vue‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { TresCanvas } from '@tresjs/core'
33
import { Box, Decal,DecalDebugUI, OrbitControls } from '@tresjs/cientos'
44
import { TresLeches, useControls } from '@tresjs/leches'
55
import { useTexture, useTextures } from '@tresjs/cientos'
6-
import { SRGBColorSpace } from 'three'
6+
import { DirectionalLight, SRGBColorSpace } from 'three'
77
88
const gl = {
99
clearColor: '#F6B03B',
@@ -29,26 +29,46 @@ const texturePaths = [
2929
'/decal/threejs.png',
3030
]
3131
32-
const testttttt = [
32+
const dataExport = [
3333
{
34-
"id": "5d77b913-fb20-42ab-a9a6-d8c8c7642f4b",
34+
"id": "8e6745c4-6e09-47dc-a9a2-019c23a83a9a",
3535
"position": [
36-
0.004330500446731596,
3736
1,
38-
0.16115118796291394
37+
0.2951952871379424,
38+
0.250421752701838
3939
],
4040
"orientation": [
41-
-1.57069632679523,
4241
0,
42+
1.5707963267948966,
4343
0
4444
],
4545
"size": [
4646
0.9749061269648661,
4747
0.22261635970063873,
4848
1
4949
],
50-
"zIndex": 2,
50+
"zIndex": 1,
5151
"map": "tresjs-dark.png"
52+
},
53+
{
54+
"id": "a4992c8d-9829-4f11-a474-62774fcc728f",
55+
"position": [
56+
-0.038218592388965966,
57+
0.1716433845731351,
58+
1
59+
],
60+
"orientation": [
61+
0,
62+
0,
63+
0
64+
],
65+
"size": [
66+
0.7071067811865475,
67+
0.7071067811865475,
68+
1
69+
],
70+
"zIndex": 3,
71+
"map": "vue.png"
5272
}
5373
]
5474
@@ -91,13 +111,15 @@ watch(textures, (val) => {
91111
:position-y="-.5"
92112
/>
93113

114+
94115
<TresMesh :scale="2" :position-x="0">
95116
<TresBoxGeometry />
96-
<TresMeshBasicMaterial color="#f6f6f6" />
117+
<TresMeshBasicMaterial color="#f6f6f6" wireframe />
97118

98119

99120
<!-- <Decal :map="texture" debug /> -->
100-
<Decal :map="textures" debug :data="testttttt" />
121+
<Decal :map="textures" debug :data="dataExport">
122+
</Decal>
101123

102124
</TresMesh>
103125

‎packages/cientos/src/core/abstractions/Decal/DebugUI.vue‎

Lines changed: 43 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -240,89 +240,62 @@ onBeforeUnmount(stop)
240240
</script>
241241

242242
<template>
243-
<div :class="{ hide: !isVisibleDecalIntersect }" class="cientos-decal-debug-ui__inner-wrapper">
243+
<div
244+
:class="{ hide: !isVisibleDecalIntersect }"
245+
class="cientos-decal-debug-ui__inner-wrapper"
246+
>
244247
<div ref="dragRef" :style="containerStyle" class="cientos-decal-debug-ui__drag-container">
245-
<div ref="innerRef" :style="innerStyle" class="cientos-decal-debug-ui__inner">
248+
<div ref="innerRef" :style="innerStyle" class="cientos-decal-debug-ui__inner group">
246249
<div class="cientos-decal-debug-ui__dot-center"></div>
247250
<div class="cientos-decal-debug-ui__border"></div>
248-
<div ref="sliderRef" class="cientos-decal-debug-ui__slider">
251+
<div ref="sliderRef" class="cientos-decal-debug-ui__slider group-active:cursor-grabbing cursor-grab">
249252
<div class="cientos-decal-debug-ui__slider-inner"></div>
250253
</div>
251254
</div>
252255

253-
<div ref="selectorRef" class="cientos-decal-debug-ui__selector">
254-
<button
255-
class="px-2 py-1 text-sm font-bold rounded-md transition h-[28px] flex items-center mr-2"
256-
:class="isSnapEnabled ? 'bg-blue-500 text-white' : 'bg-white/80 text-gray-600 hover:bg-gray-200'"
257-
title="Snap Angle (15°)"
258-
@click="toggleSnap"
259-
>
260-
🧲
261-
</button>
262-
<button
263-
class="px-2 py-1 text-sm font-bold rounded-md transition h-[28px] flex items-center mr-2 bg-white/80 text-gray-600 hover:bg-gray-200"
264-
265-
@click="exportData"
266-
>
267-
Export
268-
</button>
269-
<div v-if="hasMultipleTextures" class="flex mr-2 bg-white/80 rounded-md shadow-sm overflow-hidden h-[28px] items-center">
256+
<div ref="selectorRef" class="absolute left-1/2 -translate-x-1/2 top-[105%] flex flex-col items-center gap-3 w-max pointer-events-none z-[1000001]">
257+
<div class="pointer-events-auto flex items-center gap-2 p-2 bg-white/90 backdrop-blur-md rounded-full border border-gray-200 shadow-xl">
270258
<button
271-
class="px-2 h-full hover:bg-gray-200 border-r border-gray-300 font-bold text-gray-600 flex items-center justify-center"
272-
title="Précédent (←)"
273-
@click="onPrevTexture"
259+
class="w-9 h-9 flex items-center justify-center rounded-full transition-colors text-lg"
260+
:class="isSnapEnabled ? 'bg-blue-100 text-blue-600 border border-blue-200' : 'hover:bg-gray-100 text-gray-500'"
261+
title="Snap Angle (15°)"
262+
@click="toggleSnap"
274263
>
275-
&lt;
264+
🧲
276265
</button>
277-
<div class="px-2 h-full flex items-center justify-center text-xs text-gray-500 cursor-default select-none">
278-
🎨
279-
</div>
266+
280267
<button
281-
class="px-2 h-full hover:bg-gray-200 border-l border-gray-300 font-bold text-gray-600 flex items-center justify-center"
282-
title="Suivant (→)"
283-
@click="onNextTexture"
268+
class="px-4 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 text-xs font-bold text-gray-700 transition-colors border border-transparent hover:border-gray-200"
269+
@click="exportData"
284270
>
285-
&gt;
271+
Export
286272
</button>
273+
274+
<div class="w-px h-5 bg-gray-300 mx-1"></div>
275+
276+
<div v-if="hasMultipleTextures" class="flex items-center gap-2">
277+
<button class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 font-bold text-gray-500 transition-colors" @click="onPrevTexture">&lt;</button>
278+
<span class="text-xl select-none">🎨</span>
279+
<button class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 font-bold text-gray-500 transition-colors" @click="onNextTexture">&gt;</button>
280+
<div class="w-px h-5 bg-gray-300 mx-1"></div>
281+
</div>
282+
283+
<button class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-red-100 text-red-500 transition-colors text-sm font-bold" @click="onCancelEdit">❌</button>
284+
<button class="w-9 h-9 flex items-center justify-center rounded-full bg-green-500 hover:bg-green-600 text-white shadow-sm transition-colors text-sm font-bold" @click="onValidateDecal">✅</button>
287285
</div>
288286

289-
<button
290-
class="px-2 py-1 text-sm font-bold rounded-md bg-red-100 text-red-700 hover:bg-red-200 transition h-[28px] flex items-center"
291-
@click="onCancelEdit"
292-
>
293-
X
294-
</button>
295-
296-
<button
297-
class="px-2 py-1 text-sm font-bold rounded-md bg-green-100 text-green-700 hover:bg-green-200 transition ml-2 h-[28px] flex items-center"
298-
@click="onValidateDecal"
299-
>
300-
V
301-
</button>
302-
303-
<button
304-
v-if="currentEditingId"
305-
class="px-2 py-1 text-sm font-bold rounded-md bg-red-500 text-white hover:bg-red-600 transition ml-2 h-[28px] flex items-center"
306-
@click="onDeleteDecal"
307-
>
308-
🗑️
309-
</button>
310-
311-
<button
312-
v-if="currentEditingId"
313-
class="px-2 py-1 text-sm font-bold rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 transition ml-2 h-[28px] flex items-center"
314-
@click="onZIndexUp"
315-
>
316-
zIndex+
317-
</button>
318-
319-
<button
320-
v-if="currentEditingId"
321-
class="px-2 py-1 text-sm font-bold rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 transition ml-1 h-[28px] flex items-center"
322-
@click="onZIndexDown"
323-
>
324-
zIndex-
325-
</button>
287+
<div v-if="currentEditingId" class="pointer-events-auto flex items-center gap-2 p-2 bg-white/90 backdrop-blur-md rounded-full border border-gray-200 shadow-lg text-gray-600">
288+
<button class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-red-100 text-red-500 transition-colors text-sm" @click="onDeleteDecal">🗑️</button>
289+
290+
<div class="w-px h-5 bg-gray-300 mx-1"></div>
291+
292+
<span class="text-[11px] font-bold uppercase text-gray-500 px-2 select-none tracking-wide">Layer</span>
293+
294+
<div class="flex items-center gap-1 bg-gray-100 rounded-full p-1">
295+
<button class="w-7 h-7 flex items-center justify-center rounded-full hover:bg-white text-xs font-bold transition-all shadow-sm" @click="onZIndexDown">-</button>
296+
<button class="w-7 h-7 flex items-center justify-center rounded-full hover:bg-white text-xs font-bold transition-all shadow-sm" @click="onZIndexUp">+</button>
297+
</div>
298+
</div>
326299
</div>
327300
</div>
328301
</div>
@@ -371,7 +344,7 @@ onBeforeUnmount(stop)
371344
position: absolute;
372345
width: 100%;
373346
height: 100%;
374-
outline: 4px solid blue;
347+
outline: 4px solid white;
375348
border-radius: 500%;
376349
box-shadow:
377350
0 0 3px #00000080,
@@ -421,7 +394,7 @@ onBeforeUnmount(stop)
421394
pointer-events: none;
422395
pointer-events: auto;
423396
z-index: 9999;
424-
overflow: hidden;
397+
/* overflow: hidden; */
425398
}
426399
427400
.cientos-decal-debug-ui__slider-inner {

‎packages/cientos/src/core/abstractions/Decal/DecalItem.vue‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { computed, nextTick, onBeforeUnmount, ref, toRaw, toRefs, watch } from 'vue'
2+
import { computed, nextTick, onBeforeUnmount, ref, shallowRef, toRaw, toRefs, watch } from 'vue'
33
import { DecalGeometry } from 'three-stdlib'
44
import { Mesh, MeshBasicMaterial, Vector3 } from 'three'
55
import { useLoop } from '@tresjs/core'
@@ -23,6 +23,8 @@ const { parent, decal, map, isSelected, highlight } = toRefs(props)
2323
2424
const meshRef = ref<Mesh | null>(null)
2525
const raycastMesh = ref<Mesh | null>(null)
26+
const boxHelper = shallowRef(null)
27+
const isHovered = ref(false)
2628
2729
const originalScale = new Mesh().scale.clone()
2830
@@ -151,7 +153,7 @@ onBeforeRender(({ delta }) => {
151153
152154
localElapsed += delta
153155
154-
if (isSelected.value) {
156+
if (isSelected.value || isHovered.value) {
155157
const speed = 5
156158
const minO = 0.2
157159
const maxO = 1
@@ -177,11 +179,6 @@ watch([meshRef, () => props.groupTest], () => {
177179
originalScale.copy(meshRef.value.scale)
178180
}, { immediate: true })
179181
180-
const onClickMesh = (event: MouseEvent) => {
181-
event.stopPropagation()
182-
emit('select', decal.value)
183-
}
184-
185182
const stop = decalBus.on((payload) => {
186183
if (payload.type === 'refresh-raycasts') {
187184
buildGeometry()
@@ -200,6 +197,22 @@ watch(materialIsTransparent, async () => {
200197
meshRef.value.material.needsUpdate = true
201198
})
202199
200+
const onClickMesh = (event: MouseEvent) => {
201+
event.stopPropagation()
202+
emit('select', decal.value)
203+
}
204+
205+
const onPointerEnter = (event: PointerEvent) => {
206+
console.log('pointer enter decal item')
207+
event.stopPropagation()
208+
isHovered.value = true
209+
}
210+
211+
const onPointerLeave = (event: PointerEvent) => {
212+
console.log('pointer leave decal item')
213+
isHovered.value = false
214+
}
215+
203216
onBeforeUnmount(() => {
204217
if (raycastMesh.value && props.groupTest) {
205218
props.groupTest.remove(raycastMesh.value)
@@ -221,15 +234,16 @@ defineExpose({ meshRef })
221234
ref="meshRef"
222235
:name="`decal-${decal.id}`"
223236
:render-order="decal.zIndex ?? 0"
237+
:material-transparent="true"
238+
:material-polygonOffset="true"
239+
:material-polygonOffsetFactor="-(10 + (decal.zIndex ?? 0))"
240+
:material-depthTest="true"
241+
:material-map="map"
242+
:material-opacity="isSelected ? 0.5 : 1"
224243
@click="onClickMesh"
244+
@pointerenter="onPointerEnter"
245+
@pointerleave="onPointerLeave"
225246
>
226-
<TresMeshBasicMaterial
227-
:map="map"
228-
:polygonOffset="true"
229-
:transparent="true"
230-
:opacity="isSelected ? 0.5 : 1"
231-
:depthTest="true"
232-
:polygonOffsetFactor="-(10 + (decal.zIndex ?? 0))"
233-
/>
247+
<slot></slot>
234248
</TresMesh>
235249
</template>

‎packages/cientos/src/core/abstractions/Decal/index.vue‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const decalBackup = ref<{
8383
map: Texture | null
8484
} | null>(null)
8585
86-
const hideBoooooox = ref(false)
86+
const hideBoxHelper = ref(false)
8787
8888
const currentIntersectIsEmpty = computed(() => Object.keys(currentIntersect).length === 0)
8989
const decalIntersectIsEmpty = computed(() => Object.keys(decalIntersect).length === 0)
@@ -289,7 +289,7 @@ const makeGeometry = () => {
289289
}
290290
291291
watch(editingDecal, (isEditing) => {
292-
hideBoooooox.value = !!isEditing
292+
hideBoxHelper.value = !!isEditing
293293
if (isEditing) {
294294
makeGeometryInitial()
295295
for (const key in decalIntersect) { delete decalIntersect[key] }
@@ -497,11 +497,11 @@ onBeforeRender(() => {
497497
if (intersects.length > 0) {
498498
const { object } = intersects[0]
499499
if (object.uuid !== parent.uuid && decalIntersectIsEmpty.value) {
500-
hideBoooooox.value = true
500+
hideBoxHelper.value = true
501501
}
502502
else {
503503
if (editingDecal.value) { return }
504-
hideBoooooox.value = false
504+
hideBoxHelper.value = false
505505
if (!boxHelperRef.value || !meshRef.value) { return }
506506
const { point, face } = intersects[0]
507507
if (!face || !point) { return }
@@ -633,7 +633,7 @@ const stop = decalBus.on((payload) => {
633633
634634
for (const key in currentIntersect) { delete currentIntersect[key] }
635635
for (const key in decalIntersect) { delete decalIntersect[key] }
636-
hideBoooooox.value = false
636+
hideBoxHelper.value = false
637637
decalBus.emit({ type: 'ui-toggle-visibility-decal-intersect', visible: false })
638638
makeGeometryInitial()
639639
decalBus.emit({ type: 'refresh-raycasts' })
@@ -666,7 +666,7 @@ const stop = decalBus.on((payload) => {
666666
for (const key in currentIntersect) { delete currentIntersect[key] }
667667
for (const key in decalIntersect) { delete decalIntersect[key] }
668668
669-
hideBoooooox.value = false
669+
hideBoxHelper.value = false
670670
decalBus.emit({ type: 'ui-toggle-visibility-decal-intersect', visible: false })
671671
makeGeometryInitial()
672672
decalBus.emit({ type: 'refresh-raycasts' })
@@ -719,7 +719,7 @@ defineExpose({ root: meshRef })
719719
name="meshRef decal"
720720
:render-order="activeRenderOrder"
721721
>
722-
<slot></slot>
722+
<TresMeshBasicMaterial />
723723
</TresMesh>
724724

725725
<TresGroup v-if="currentParent" name="decal-items-group">
@@ -733,7 +733,9 @@ defineExpose({ root: meshRef })
733733
:decal="item"
734734
:is-selected="editingDecal?.id === item.id"
735735
@select="onSelectDecal"
736-
/>
736+
>
737+
<slot></slot>
738+
</DecalItem>
737739
</TresGroup>
738740

739741
<TresLine v-if="debug" ref="meshLineRef" :visible="!!(!currentIntersectIsEmpty)" name="decal-line-helper">
@@ -742,8 +744,9 @@ defineExpose({ root: meshRef })
742744
</TresLine>
743745

744746
<TresMesh
745-
v-if="!hideBoooooox"
747+
v-if="!hideBoxHelper"
746748
ref="boxHelperRef"
749+
:visible="false"
747750
name="decal-box-helper"
748751
@pointerdown="onPointerDown"
749752
@pointerup="onPointerUp"

0 commit comments

Comments
 (0)