chore: cleaned up playground and added leches GUI (#390)

* chore: cleaned up playground and added leches GUI

* chore: lint fixes

* chore: fix lint

* chore: add multiple canvas component back in

playground/package.json

@@ -9,11 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "3.1.0",
+    "@tresjs/cientos": "3.2.1",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@tresjs/leches": "^0.7.0",
+    "@tresjs/leches": "^0.8.0",
     "@tweakpane/plugin-essentials": "^0.2.0",
     "unplugin-auto-import": "^0.16.6",
     "vite-plugin-glsl": "^1.1.2",

playground/src/components/AnimatedModel.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { Color, SRGBColorSpace } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, useTweakPane, useGLTF, useAnimations } from '@tresjs/cientos'
-
-const bgColor = new Color('#F78B3D')
-
-const { pane } = useTweakPane()
-
-const { scene: model, animations } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf',
-)
-
-const { actions, mixer } = useAnimations(animations, model)
-
-let currentAction = actions.Greeting
-
-currentAction.play()
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'scene',
-    options: Object.keys(actions).map(name => ({
-      text: name,
-      value: name,
-    })),
-    value: 'Greeting',
-  })
-  .on('change', ({ value }) => {
-    if (currentAction) {
-      currentAction.stop()
-    }
-
-    currentAction = actions[value]
-
-    currentAction.play()
-  })
-
-console.log({ model, animations, actions, mixer })
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas
-      :clear-color="bgColor"
-      shadows
-      alpha
-      window-size
-      power-preference="high-performance"
-      :output-encoding="SRGBColorSpace"
-    >
-      <TresPerspectiveCamera
-        :position="[8, 8, 8]"
-        :fov="45"
-        :near="0.1"
-        :far="10000"
-      />
-      <OrbitControls />
-
-      <TresAmbientLight
-        :color="0xffffff"
-        :intensity="2"
-      />
-      <TresMesh v-bind="model" />
-      <TresDirectionalLight />
-    </TresCanvas>
-  </Suspense>
-</template>

playground/src/components/Cameras.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping, PerspectiveCamera, OrthographicCamera } from 'three'
-
-import { Box, useTweakPane } from '@tresjs/cientos'
-
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-
-const state = reactive({
-  cameraType: 'perspective',
-  camera: new PerspectiveCamera(75, 1, 0.1, 1000),
-})
-
-state.camera.position.set(5, 5, 5)
-state.camera.lookAt(0, 0, 0)
-const { pane } = useTweakPane()
-const perspectiveFolder = pane.addFolder({
-  title: 'Perspective Camera',
-})
-
-const orthographicFolder = pane.addFolder({
-  title: 'Ortographic Camera',
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'Camera',
-    options: [
-      { text: 'perspective', value: 'perspective' },
-      { text: 'orthographic', value: 'orthographic' },
-    ],
-    value: 'perspective',
-  })
-  .on('change', (e) => {
-    state.cameraType = e.value
-    const newCamera
-      = e.value === 'perspective'
-        ? new PerspectiveCamera(75, 1, 0.1, 1000)
-        : new OrthographicCamera(-10, 10, 10, -10, 0.1, 1000)
-
-    newCamera.position.set(5, 5, 5)
-    newCamera.lookAt(0, 0, 0)
-    state.camera = newCamera
-    perspectiveFolder.hidden = e.value === 'orthographic'
-    orthographicFolder.hidden = e.value === 'perspective'
-    /* context.value.state.accio += 1 */
-  })
-
-orthographicFolder.hidden = true
-
-watch(
-  () => state.cameraType,
-  () => {
-    if (state.cameraType === 'orthographic') {
-      perspectiveFolder.children.forEach((child) => {
-        child.dispose()
-      })
-      orthographicFolder.addInput(state.camera, 'left', { min: -50, max: 50 })
-      orthographicFolder.addInput(state.camera, 'right', { min: -50, max: 50 })
-      orthographicFolder.addInput(state.camera, 'top', { min: -50, max: 50 })
-      orthographicFolder.addInput(state.camera, 'bottom', { min: -50, max: 50 })
-      orthographicFolder.addInput(state.camera, 'near', { min: 0, max: 50 })
-      orthographicFolder.addInput(state.camera, 'far', { min: 0, max: 50 })
-    }
-    else {
-      orthographicFolder.children.forEach((child) => {
-        child.dispose()
-      })
-      perspectiveFolder.addInput(state.camera, 'fov', { min: 0, max: 180 })
-      perspectiveFolder.addInput(state.camera, 'near', { min: 0, max: 10 })
-      perspectiveFolder.addInput(state.camera, 'far', { min: 0, max: 10 })
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-
-const context = ref(null)
-
-watchEffect(() => {
-  if (context.value) {
-    console.log(context.value)
-  }
-})
-
-const asyncTorus = ref(false)
-
-setTimeout(() => {
-  asyncTorus.value = true
-}, 1000)
-</script>
-
-<template>
-  <TresCanvas
-    v-bind="gl"
-    ref="context"
-    :camera="state.camera"
-  >
-    <!--     <TresPerspectiveCamera v-if="state.cameraType === 'perspective'" :position="[11, 11, 11]" />
-    <TresOrthographicCamera v-if="state.cameraType === 'orthographic'" :position="[11, 11, 11]" /> -->
-    <Box
-      :position="[0, 1, 0]"
-      :scale="[2, 2, 2]"
-    >
-      <TresMeshNormalMaterial color="teal" />
-    </Box>
-    <TresGridHelper />
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight
-      :position="[3, 3, 3]"
-      :intensity="1"
-    />
-  </TresCanvas>
-</template>

playground/src/components/FBXModels.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { Color, SRGBColorSpace } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, useTweakPane, FBXModel, useFBX } from '@tresjs/cientos'
-
-const bgColor = new Color('#F78B3D')
-useTweakPane()
-
-const jeepRef = ref()
-
-const model = await useFBX(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx',
-)
-model.position.set(0, 4, 0)
-model.scale.set(0.01, 0.01, 0.01)
-model.updateMatrixWorld()
-
-watch(jeepRef, ({ model }) => {
-  model.scale.set(0.01, 0.01, 0.01)
-  model.rotation.y = -Math.PI / 2
-})
-</script>
-
-<template>
-  <TresCanvas
-    :clear-color="bgColor"
-    shadows
-    alpha
-    window-size
-    power-preference="high-performance"
-    :output-encoding="SRGBColorSpace"
-  >
-    <TresPerspectiveCamera
-      :position="8"
-      :fov="45"
-      :near="0.1"
-      :far="10000"
-    />
-    <OrbitControls />
-
-    <TresAmbientLight
-      :color="0xffffff"
-      :intensity="0.75"
-    />
-    <TresMesh v-bind="model" />
-    <Suspense>
-      <FBXModel
-        ref="jeepRef"
-        path="https://raw.githubusercontent.com/Tresjs/assets/main//models/low-poly-truck/Jeep_done.fbx"
-      />
-    </Suspense>
-  </TresCanvas>
-</template>

playground/src/components/MultipleCanvas.vue

@@ -3,7 +3,6 @@ import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { TresCanvas } from '@tresjs/core'
 
 // import { GLTFModel, OrbitControls } from '@tresjs/cientos'
-
 const state = reactive({
   clearColor: '#201919',
   shadows: true,
@@ -14,17 +13,14 @@ const state = reactive({
   disableRender: false,
   stencil: false,
 })
-
 const state2 = reactive({
   clearColor: '#4f4f4f',
   shadows: true,
   alpha: false,
-
   /*  shadowMapType: BasicShadowMap,
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping, */
 })
-
 const log = () => {
   console.log(3)
 }
@@ -98,4 +94,4 @@ const log = () => {
       </TresCanvas>
     </div>
   </div>
-</template>
+</template>

playground/src/components/TheEnvironment.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import { ref, shallowRef, watch } from 'vue'
-import { Environment, Box, PamCameraMouse } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
-
-const sphereRef = ref()
-
-/* const environmentFiles = [
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/px.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nx.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/py.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/ny.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/pz.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nz.jpg',
-] */
-
-const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']
-
-let envMap = null
-
-const environmentTexture = shallowRef()
-
-watch(environmentTexture, ({ getTexture }) => {
-  envMap = getTexture()
-})
-</script>
-
-<template>
-  <!--   <TresCanvas v-bind="state"> -->
-  <TresCanvas preset="realistic">
-    <TresPerspectiveCamera
-      :position="[10, 10, 18]"
-      :fov="45"
-      :near="0.1"
-      :far="1000"
-      :look-at="[-8, 3, -3]"
-    />
-    <PamCameraMouse :factor="2" />
-
-    <Environment
-      ref="environmentTexture"
-      background
-      :files="environmentFiles"
-      path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap"
-    />
-    <!--  <Environment ref="environmentTexture" background preset="sunset" /> -->
-    <TresAmbientLight :intensity="0.5" />
-
-    <TresMesh
-      ref="sphereRef"
-      :position="[0, 4, 0]"
-      cast-shadow
-    >
-      <TresSphereGeometry />
-      <TresMeshStandardMaterial
-        color="#FBB03B"
-        :map="envMap"
-        :metalness="1"
-        :roughness="0"
-      />
-    </TresMesh>
-    <Box
-      :position="[2, 6, 0]"
-      cast-shadow
-    >
-      <TresMeshStandardMaterial
-        color="#008080"
-        :map="envMap"
-        :metalness="1"
-        :roughness="0"
-      />
-    </Box>
-    <TresDirectionalLight
-      :position="[0, 8, 4]"
-      :intensity="0.7"
-      cast-shadow
-    />
-    <TresMesh
-      :rotation="[-Math.PI / 2, 0, 0]"
-      receive-shadow
-    >
-      <TresPlaneGeometry :args="[20, 20, 20, 10]" />
-      <TresMeshToonMaterial />
-    </TresMesh>
-    <TresDirectionalLight
-      :position="[0, 2, 4]"
-      :intensity="1"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>

playground/src/components/TheFirstScene.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Vector3 } from 'three'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    window-size
-  >
-    <TresPerspectiveCamera />
-    <TresMesh
-      :position="[1, 2, 3]"
-      :scale="new Vector3(2, 2, 2)"
-      :rotation="{ x: 1, y: 1, z: 1 }"
-    >
-      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-      <TresMeshBasicMaterial color="orange" />
-    </TresMesh>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>

playground/src/components/TheGizmos.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, TransformControls, useTweakPane } from '@tresjs/cientos'
-
-const state = shallowReactive({
-  clearColor: '#201919',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-
-const transformState = shallowReactive({
-  mode: 'translate',
-  size: 1,
-  axis: 'XY',
-  showX: true,
-  showY: true,
-  showZ: true,
-  enabled: true,
-})
-
-const boxRef = shallowRef()
-
-const { pane } = useTweakPane()
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'outputColorSpace',
-    options: [
-      { text: 'Translate', value: 'translate' },
-      { text: 'Rotate', value: 'rotate' },
-      { text: 'Scale', value: 'scale' },
-    ],
-    value: transformState.mode,
-  })
-  .on('change', (ev) => {
-    transformState.mode = ev.value
-  })
-
-pane.addInput(transformState, 'size')
-pane.addInput(transformState, 'enabled')
-
-const axisFolder = pane.addFolder({ title: 'Axis' })
-
-axisFolder
-  .addBlade({
-    view: 'list',
-    label: 'axis',
-    options: [
-      { text: 'X', value: 'X' },
-      { text: 'Y', value: 'Y' },
-      { text: 'XY', value: 'XY' },
-      { text: 'YZ', value: 'YZ' },
-      { text: 'XZ', value: 'XZ' },
-      { text: 'XYZ', value: 'XYZ' },
-    ],
-    value: transformState.axis,
-  })
-  .on('change', (ev) => {
-    transformState.axis = ev.value
-  })
-axisFolder.addInput(transformState, 'showX')
-axisFolder.addInput(transformState, 'showY')
-axisFolder.addInput(transformState, 'showZ')
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera
-      :position="[11, 11, 11]"
-      :fov="45"
-      :near="0.1"
-      :far="1000"
-      :look-at="[-8, 3, -3]"
-    />
-
-    <OrbitControls make-default />
-    <TresMesh
-      ref="boxRef"
-      :position="[0, 4, 0]"
-      cast-shadow
-    >
-      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-      <TresMeshToonMaterial color="#FBB03B" />
-    </TresMesh>
-    <TransformControls
-      :object="boxRef"
-      v-bind="transformState"
-    />
-
-    <TresMesh
-      :rotation="[-Math.PI / 2, 0, 0]"
-      receive-shadow
-    >
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshToonMaterial />
-    </TresMesh>
-    <TresAmbientLight :intensity="0.5" />
-    <TresDirectionalLight
-      :position="[0, 8, 4]"
-      :intensity="1.5"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>

playground/src/components/TheSmallExperience.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos/'
-</script>
-
-<template>
-  <div class="container">
-    <TresCanvas>
-      <TresPerspectiveCamera
-        :position="[5, 5, 5]"
-        :fov="75"
-        :aspect="1"
-        :near="0.1"
-        :far="1000"
-      />
-      <OrbitControls />
-      <TresAmbientLight
-        :color="0xffffff"
-        :intensity="0.5"
-      />
-      <TresMesh
-        :scale="1"
-        cast-shadow
-      >
-        <TresSphereGeometry :args="[1, 500, 500]" />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-    </TresCanvas>
-  </div>
-</template>
-
-<style scoped>
-.container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  aspect-ratio: 16/9;
-  background: white;
-  width: 50%;
-}
-</style>

playground/src/components/VectorSetProps.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-
-// import { useRenderLoop } from '..'
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
-
-const state = reactive({
-  clearColor: '#201919',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-
-const context = ref(null)
-
-watchEffect(() => {
-  if (context.value) {
-    console.log(context.value?.state?.scene)
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    v-bind="state"
-    ref="context"
-  >
-    <TresPerspectiveCamera
-      :position-x="5"
-      :position-y="5"
-      :position-z="5"
-      :fov="45"
-      :near="0.1"
-      :far="1000"
-      :look-at="[-8, 3, -3]"
-    />
-    <OrbitControls make-default />
-    <TresAmbientLight :intensity="0.5" />
-
-    <TresMesh
-      :scale-x="1.1"
-      :scale-y="2"
-      :scale-z="3"
-      :rotation-x="Math.PI * 1.5"
-      :rotation-y="Math.PI * 0.6"
-      :rotation-z="Math.PI * 0.2"
-      :position-y="5"
-      :position-z="-2"
-      cast-shadow
-    >
-      <TresBoxGeometry />
-      <TresMeshToonMaterial color="#FBB03B" />
-    </TresMesh>
-    <TresMesh
-      :scale-x="1.1"
-      :scale-y="2"
-      :scale-z="3"
-      :rotation-y="Math.PI * 0.6"
-      :rotation-x="Math.PI * 1.5"
-      :rotation-z="Math.PI * 0.2"
-      :position-y="1"
-      :position-z="2"
-      cast-shadow
-    >
-      <TresBoxGeometry />
-      <TresMeshToonMaterial
-        :color-r="0xff / 255"
-        :color-g="0x0 / 255"
-        :color-b="0xff / 255"
-      />
-    </TresMesh>
-    <TresDirectionalLight
-      :position-y="8"
-      :position-z="4"
-      :intensity="0.7"
-      cast-shadow
-    />
-    <TresMesh
-      :rotation="[-Math.PI / 2, 0, 0]"
-      receive-shadow
-    >
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshToonMaterial />
-    </TresMesh>
-    <TresDirectionalLight
-      :position-y="2"
-      :position-z="4"
-      :intensity="1"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>

playground/src/components/gltf/TheModel.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useTweakPane, useGLTF } from '@tresjs/cientos'
-
-useTweakPane()
-
-const { nodes, materials } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/threejs-journey/threejs-journey-level-vue.glb',
-  {
-    draco: true,
-  },
-)
-
-const akuAkuRef = ref(null)
-
-watch(akuAkuRef, (value) => {
-  console.log('akuAkuRef', value)
-})
-</script>
-
-<template>
-  <primitive
-    ref="akuAkuRef"
-    :object="nodes.Cactus"
-  >
-    <MeshWobbleMaterial
-      :speed="10"
-      :factor="0.4"
-      :map="materials.Cactus.map"
-    />
-  </primitive>
-</template>

playground/src/components/gltf/index.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-
-/* const akuAkuRef = ref(null) */
-
-const context = ref()
-watchEffect(() => {
-  if (context.value) {
-    console.log({ context: context.value.state.scene })
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    v-bind="state"
-    ref="context"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :fov="45"
-      :near="0.1"
-      :far="1000"
-      :look-at="[-8, 3, -3]"
-    />
-    <OrbitControls make-default />
-    <TresAmbientLight :intensity="0.5" />
-
-    <Suspense>
-      <!--  <GLTFModel
-        ref="akuAkuRef"
-        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf"
-        draco
-      /> -->
-      <TresGroup :scale="[1, 2, 1]">
-        <TheModel />
-      </TresGroup>
-    </Suspense>
-    <TresAxesHelper />
-    <TresDirectionalLight
-      :position="[0, 2, 4]"
-      :intensity="1"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>
-0.5

playground/src/components/meshWobbleMaterial/index.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useRenderLoop, extend } from '@tresjs/core'
-
-import { shallowRef, watchEffect } from 'vue'
-import { WobbleMaterialImpl as MeshWobbleMaterial } from './material'
-
-const props = withDefaults(
-  defineProps<{
-    speed?: number
-    factor?: number
-  }>(),
-  {
-    speed: 1,
-    factor: 1,
-  },
-)
-
-const materialRef = shallowRef()
-
-extend({ MeshWobbleMaterial })
-
-const { onLoop } = useRenderLoop()
-
-watchEffect(() => {
-  console.log(materialRef.value)
-})
-
-onLoop(({ elapsed }) => {
-  if (materialRef.value) {
-    materialRef.value.time = elapsed * props?.speed
-  }
-})
-</script>
-
-<template>
-  <TresMeshWobbleMaterial
-    ref="materialRef"
-    :factor="factor"
-    v-bind="$attrs"
-  />
-</template>

playground/src/components/meshWobbleMaterial/material.ts

@@ -1,55 +0,0 @@
-import type { MeshStandardMaterialParameters, Shader } from 'three'
-import { MeshStandardMaterial } from 'three'
-
-// Borrowed from @pmdrs drei implementation https://github.com/pmndrs/drei/blob/master/src/core/MeshWobbleMaterial.tsx
-interface Uniform<T> {
-  value: T
-}
-
-export class WobbleMaterialImpl extends MeshStandardMaterial {
-  _time: Uniform<number>
-  _factor: Uniform<number>
-
-  constructor(parameters: MeshStandardMaterialParameters = {}) {
-    super(parameters)
-    this.setValues(parameters)
-    this._time = { value: 0 }
-    this._factor = { value: 1 }
-  }
-
-  onBeforeCompile(shader: Shader) {
-    shader.uniforms.time = this._time
-    shader.uniforms.factor = this._factor
-
-    shader.vertexShader = `
-        uniform float time;
-        uniform float factor;
-        ${shader.vertexShader}
-      `
-    shader.vertexShader = shader.vertexShader.replace(
-      '#include <begin_vertex>',
-      `float theta = sin( time + position.y ) / 2.0 * factor;
-          float c = cos( theta );
-          float s = sin( theta );
-          mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );
-          vec3 transformed = vec3( position ) * m;
-          vNormal = vNormal * m;`,
-    )
-  }
-
-  get time() {
-    return this._time.value
-  }
-
-  set time(v) {
-    this._time.value = v
-  }
-
-  get factor() {
-    return this._factor.value
-  }
-
-  set factor(v) {
-    this._factor.value = v
-  }
-}

playground/src/components/portal-journey/TheFireFlies.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { AdditiveBlending } from 'three'
-import FirefliesVertex from './shaders/fireflies/vertex.glsl'
-import FirefliesFragment from './shaders/fireflies/fragment.glsl'
-
-const shader = {
-  transparent: true,
-  blending: AdditiveBlending,
-  depthWrite: false,
-
-  vertexShader: FirefliesVertex,
-  fragmentShader: FirefliesFragment,
-  uniforms: {
-    uSize: { value: 100 },
-    uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
-    uTime: { value: 0 },
-  },
-}
-
-const firefliesCount = 60
-const positionArray = new Float32Array(firefliesCount * 3)
-const scaleArray = new Float32Array(firefliesCount)
-
-for (let i = 0; i < firefliesCount; i++) {
-  positionArray[i * 3 + 0] = (Math.random() - 0.5) * 4
-  positionArray[i * 3 + 1] = Math.random() * 4
-  positionArray[i * 3 + 2] = (Math.random() - 0.5) * 4
-  scaleArray[i] = Math.random()
-}
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-  shader.uniforms.uTime.value = elapsed
-})
-</script>
-
-<template>
-  <TresPoints>
-    <TresBufferGeometry
-      :position="[positionArray, 3]"
-      :a-scale="[scaleArray, 1]"
-    />
-    <TresShaderMaterial v-bind="shader" />
-  </TresPoints>
-</template>

playground/src/components/portal-journey/ThePortal.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import type { Mesh } from 'three'
-import { SRGBColorSpace, DoubleSide, MeshBasicMaterial, ShaderMaterial, Color } from 'three'
-import { useRenderLoop, useTexture } from '@tresjs/core'
-import { useGLTF, useTweakPane } from '@tresjs/cientos'
-
-import PortalVertex from './shaders/portal/vertex.glsl'
-import PortalFragment from './shaders/portal/fragment.glsl'
-
-const experiment = {
-  portalColorStart: '#7030eb',
-  portalColorEnd: '#ddc0ff',
-}
-
-const { scene: portal } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/portal.glb',
-  {
-    draco: true,
-  },
-)
-
-const bakedTexture = await useTexture([
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/baked.jpg',
-])
-
-bakedTexture.flipY = false
-bakedTexture.encoding = SRGBColorSpace
-
-// Baked material
-const bakedMaterial = new MeshBasicMaterial({
-  map: bakedTexture,
-  side: DoubleSide,
-})
-
-const portalLightMaterial = new ShaderMaterial({
-  uniforms: {
-    uTime: { value: 0 },
-    uColorStart: { value: new Color(experiment.portalColorStart) },
-    uColorEnd: { value: new Color(experiment.portalColorEnd) },
-  },
-  vertexShader: PortalVertex,
-  fragmentShader: PortalFragment,
-  side: DoubleSide,
-})
-
-const portalObj = portal
-const bakedMesh = portalObj.children.find(child => child.name === 'baked')
-  ; (bakedMesh as Mesh).material = bakedMaterial
-const portalCircle = portalObj.children.find(child => child.name === 'portalCircle')
-  ; (portalCircle as Mesh).material = portalLightMaterial
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-  portalLightMaterial.uniforms.uTime.value = elapsed
-})
-
-// Controls
-const { pane } = useTweakPane()
-
-const portalCtrls = pane.addFolder({ title: 'Portal' })
-portalCtrls
-  .addInput(experiment, 'portalColorStart', {
-    label: 'color start',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    portalLightMaterial.uniforms.uColorStart.value.set(value)
-  })
-portalCtrls
-  .addInput(experiment, 'portalColorEnd', {
-    label: 'color end',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    portalLightMaterial.uniforms.uColorEnd.value.set(value)
-  })
-</script>
-
-<template>
-  <TresMesh v-bind="portal" />
-</template>

playground/src/components/portal-journey/index.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import ThePortal from './ThePortal.vue'
-import TheFireFlies from './TheFireFlies.vue'
-
-const gl = {
-  clearColor: '#202020',
-  shadows: true,
-  alpha: false,
-}
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :fov="45"
-      :aspect="1"
-      :near="0.1"
-      :far="1000"
-    />
-    <OrbitControls />
-    <TresFog :args="[gl.clearColor, 0.1, 75]" />
-    <Suspense>
-      <ThePortal />
-    </Suspense>
-    <TheFireFlies />
-    <TresAmbientLight
-      :position="[10, 10, 10]"
-      :intensity="1.5"
-      color="#00ff00"
-    />
-  </TresCanvas>
-</template>

playground/src/components/portal-journey/shaders/fireflies/fragment.glsl

@@ -1,7 +0,0 @@
-void main()
-{
-  float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-  float strength = 0.05 / distanceToCenter - 0.1;
-
-  gl_FragColor = vec4(1.0, 1.0, 1.0, strength);
-}

playground/src/components/portal-journey/shaders/fireflies/vertex.glsl

@@ -1,16 +0,0 @@
-uniform float uPixelRatio;
-uniform float uSize;
-uniform float uTime;
-attribute float aScale;
-
-void main()
-{
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-    modelPosition.y += sin(uTime + modelPosition.x * 100.0) * aScale * 0.2;
-    vec4 viewPosition = viewMatrix * modelPosition;
-    vec4 projectionPosition = projectionMatrix * viewPosition;
-
-    gl_Position = projectionPosition;
-    gl_PointSize = aScale * uSize * uPixelRatio;
-    gl_PointSize *= (1.0 / - viewPosition.z);
-}

playground/src/components/portal-journey/shaders/portal/fragment.glsl

@@ -1,101 +0,0 @@
-varying vec2 vUv;
-uniform float uTime;
-uniform vec3 uColorStart;
-uniform vec3 uColorEnd;
-
-//	Classic Perlin 3D Noise 
-//	by Stefan Gustavson
-//
-vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
-vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
-vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
-
-float cnoise(vec3 P){
-  vec3 Pi0 = floor(P); // Integer part for indexing
-  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
-  Pi0 = mod(Pi0, 289.0);
-  Pi1 = mod(Pi1, 289.0);
-  vec3 Pf0 = fract(P); // Fractional part for interpolation
-  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
-  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-  vec4 iy = vec4(Pi0.yy, Pi1.yy);
-  vec4 iz0 = Pi0.zzzz;
-  vec4 iz1 = Pi1.zzzz;
-
-  vec4 ixy = permute(permute(ix) + iy);
-  vec4 ixy0 = permute(ixy + iz0);
-  vec4 ixy1 = permute(ixy + iz1);
-
-  vec4 gx0 = ixy0 / 7.0;
-  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
-  gx0 = fract(gx0);
-  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
-  vec4 sz0 = step(gz0, vec4(0.0));
-  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
-  gy0 -= sz0 * (step(0.0, gy0) - 0.5);
-
-  vec4 gx1 = ixy1 / 7.0;
-  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
-  gx1 = fract(gx1);
-  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
-  vec4 sz1 = step(gz1, vec4(0.0));
-  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
-  gy1 -= sz1 * (step(0.0, gy1) - 0.5);
-
-  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
-  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
-  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
-  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
-  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
-  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
-  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
-  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
-
-  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
-  g000 *= norm0.x;
-  g010 *= norm0.y;
-  g100 *= norm0.z;
-  g110 *= norm0.w;
-  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
-  g001 *= norm1.x;
-  g011 *= norm1.y;
-  g101 *= norm1.z;
-  g111 *= norm1.w;
-
-  float n000 = dot(g000, Pf0);
-  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
-  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
-  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
-  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
-  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
-  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
-  float n111 = dot(g111, Pf1);
-
-  vec3 fade_xyz = fade(Pf0);
-  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
-  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
-  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
-  return 2.2 * n_xyz;
-}
-
-void main() 
-{
-    float speed = 0.1;
-    // Displace the UV coordinates by a noise value
-    vec2 displacedUv = vUv + cnoise(vec3(vUv* 5.0, uTime * speed));
-    // Get the color from the texture
-    float strength = cnoise(vec3(displacedUv * 5.0, uTime * speed * 2.0));
-
-    // Outer Glow
-
-    float outerGlow = distance(vUv, vec2(0.5)) * 5.0 - 1.4;
-    strength += outerGlow;
-
-    strength += step(- 0.2, strength) * 0.8;
-
-    strength = clamp(strength, 0.0, 1.0);
-
-    vec3 color = mix(uColorStart, uColorEnd, strength);
-
-    gl_FragColor = vec4(color, 1.0);
-}

playground/src/components/portal-journey/shaders/portal/vertex.glsl

@@ -1,11 +0,0 @@
-varying vec2 vUv;
-
-void main() 
-{
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-    vec4 viewPosition = viewMatrix * modelPosition;
-    vec4 projectionPosition = projectionMatrix * viewPosition;
-
-    gl_Position = projectionPosition;
-    vUv = uv;
-}

playground/src/components/shaders-experiment/index.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Vector2 } from 'three'
-import type { TresInstance } from '@tresjs/core'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import type { ShallowRef } from 'vue'
-import vertexShader from './shaders/vertex.glsl'
-import fragmentShader from './shaders/fragment.glsl'
-
-const gl = {
-  clearColor: '#4f4f4f',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-
-const blobRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-const uniforms = {
-  uTime: { value: 0 },
-  uAmplitude: { value: new Vector2(0.1, 0.1) },
-  uFrequency: { value: new Vector2(20, 5) },
-}
-
-const { onLoop } = useRenderLoop()
-onLoop(({ elapsed }) => {
-  if (blobRef.value) {
-    blobRef.value.material.uniforms.uTime.value = elapsed
-  }
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <TresMesh
-      ref="blobRef"
-      :position="[0, 4, 0]"
-    >
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresShaderMaterial
-        :vertex-shader="vertexShader"
-        :fragment-shader="fragmentShader"
-        :uniforms="uniforms"
-      />
-    </TresMesh>
-    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshBasicMaterial color="#444" />
-    </TresMesh>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>

playground/src/components/shaders-experiment/shaders/fragment.glsl

@@ -1,6 +0,0 @@
-precision mediump float;
-varying vec2 vUv;
-
-void main() {
-    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
-}

playground/src/components/shaders-experiment/shaders/vertex.glsl

@@ -1,15 +0,0 @@
-uniform vec2 uAmplitude;
-uniform vec2 uFrequency;
-uniform float uTime;
-
-varying vec2 vUv;
-
-void main() {
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-    modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x;
-    modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y;
-
-    vec4 viewPosition = viewMatrix * modelPosition;
-    gl_Position = projectionMatrix * viewPosition;
-    vUv = uv;
-}

playground/src/components/udsz/TheUSDZModel.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import { useLoader } from '@tresjs/core'
-import { USDZLoader } from 'three/addons/loaders/USDZLoader.js'
-
-const res = await useLoader(
-  USDZLoader,
-  'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/usdz/saeukkang.usdz',
-)
-
-console.log(res)
-</script>
-
-<template>
-  <primitive :object="res" />
-</template>

playground/src/components/udsz/index.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-
-/* const akuAkuRef = ref(null) */
-
-const context = ref()
-watchEffect(() => {
-  if (context.value) {
-    console.log({ context: context.value.state.scene })
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    v-bind="state"
-    ref="context"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :fov="45"
-      :near="0.1"
-      :far="1000"
-      :look-at="[-8, 3, -3]"
-    />
-    <OrbitControls make-default />
-    <TresAmbientLight :intensity="0.5" />
-
-    <Suspense>
-      <TheUSDZModel />
-    </Suspense>
-    <TresAxesHelper />
-    <TresDirectionalLight
-      :position="[0, 2, 4]"
-      :intensity="1"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>

playground/src/components/Responsiveness.vue → playground/src/pages/Responsiveness.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import TheEnvironment from './TheEnvironment.vue'
+import TheBasic from './TheBasic.vue'
 </script>
 
 <template>
   <div class="modal">
-    <TheEnvironment />
+    <TheBasic />
   </div>
 </template>
 
@@ -15,8 +15,8 @@ import TheEnvironment from './TheEnvironment.vue'
   left: 50%;
   right: 0;
   bottom: 0;
-  width: 200px;
-  height: 200px;
+  width: 600px;
+  height: 400px;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 100;
 }

playground/src/components/TheBasic.vue → playground/src/pages/TheBasic.vue

@@ -2,7 +2,7 @@
 import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
 import { reactive, ref } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls, TransformControls } from '@tresjs/cientos'
+import { OrbitControls } from '@tresjs/cientos'
 
 const state = reactive({
   clearColor: '#201919',
@@ -49,7 +49,7 @@ function onPointerEnter(ev) {
       @pointer-enter="onPointerEnter"
     >
       <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshToonMaterial color="cyan" />
+      <TresMeshToonMaterial color="teal" />
     </TresMesh>
 
     <TresDirectionalLight
@@ -64,11 +64,11 @@ function onPointerEnter(ev) {
       <TresPlaneGeometry :args="[10, 10, 10, 10]" />
       <TresMeshToonMaterial />
     </TresMesh>
+
     <TresDirectionalLight
       :position="[0, 2, 4]"
       :intensity="1"
       cast-shadow
     />
-    <TransformControls :object="sphereRef" />
   </TresCanvas>
 </template>

playground/src/components/TheConditional.vue → playground/src/pages/TheConditional.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { BasicShadowMap, MeshPhongMaterial, NoToneMapping, SRGBColorSpace } from 'three'
 import { reactive } from 'vue'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 
 const state = reactive({
   clearColor: '#201919',
@@ -19,16 +21,14 @@ const paneElements = reactive({
   boxPropMaterialVisible: true,
 })
 
-const { pane } = useTweakPane()
-
-pane.addInput(paneElements, 'boxVisible')
-pane.addInput(paneElements, 'groupVisible')
-pane.addInput(paneElements, 'boxPropMaterialVisible')
+useControls('fpsgraph')
+useControls(paneElements)
 
 const material = new MeshPhongMaterial({ color: '#ff0000' })
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera
       :position="[11, 11, 11]"

playground/src/components/TheGroups.vue → playground/src/pages/TheGroups.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { ref } from 'vue'
-import { OrbitControls } from '@tresjs/cientos/'
+import { OrbitControls } from '@tresjs/cientos'
 
 const { onLoop } = useRenderLoop()
 
@@ -15,7 +15,7 @@ onLoop(() => {
 </script>
 
 <template>
-  <div class="container">
+  <div class="w-full h-full">
     <TresCanvas>
       <TresPerspectiveCamera
         :position="[5, 5, 5]"

playground/src/pages/cameras/Cameras.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping, PerspectiveCamera, OrthographicCamera } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import { Box } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const state = reactive({
+  cameraType: 'perspective',
+  camera: new PerspectiveCamera(75, 1, 0.1, 1000),
+})
+
+state.camera.position.set(5, 5, 5)
+state.camera.lookAt(0, 0, 0)
+
+const { value: cameraType } = useControls({
+  cameraType: {
+    label: 'CameraType',
+    options: [{
+      text: 'Perspective',
+      value: 'perspective',
+    }, {
+      text: 'Orthographic',
+      value: 'orthographic',
+    }],
+    value: state.cameraType,
+  },
+})
+
+watch(cameraType, ({ value }) => {
+  state.cameraType = value
+  if (value === 'perspective') {
+    state.camera = new PerspectiveCamera(75, 1, 0.1, 1000)
+  }
+  else {
+    state.camera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 1000)
+  }
+  state.camera.position.set(5, 5, 5)
+  state.camera.lookAt(0, 0, 0)
+})
+
+const context = ref(null)
+
+watchEffect(() => {
+  if (context.value) {
+    console.log(context.value)
+  }
+})
+
+const asyncTorus = ref(false)
+
+setTimeout(() => {
+  asyncTorus.value = true
+}, 1000)
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    ref="context"
+    :camera="state.camera"
+  >
+    <!--     <TresPerspectiveCamera v-if="state.cameraType === 'perspective'" :position="[11, 11, 11]" />
+    <TresOrthographicCamera v-if="state.cameraType === 'orthographic'" :position="[11, 11, 11]" /> -->
+    <Box
+      :position="[0, 1, 0]"
+      :scale="[2, 2, 2]"
+    >
+      <TresMeshNormalMaterial color="teal" />
+    </Box>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
+  </TresCanvas>
+</template>

playground/src/components/DebugUI.vue → playground/src/pages/misc/GUI.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Vector3 } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
 
 // import { OrbitControls, Box } from '@tresjs/cientos'
-/* import { TresLeches, useControls } from '@tresjs/leches' */
-/* import '@tresjs/leches/styles' */
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 
 const gl = reactive({
-  /*   clearColor: '#82DBC5', */
+  clearColor: '#82DBC5',
   shadows: true,
   alpha: true,
   shadowMapType: BasicShadowMap,
@@ -16,9 +16,13 @@ const gl = reactive({
   toneMapping: NoToneMapping,
 })
 
-/* useControls('fpsgraph') */
-// useControls(gl)
-// useControls('Box', boxPosition.value)
+const boxPosition = ref(new Vector3(0, 0, 0))
+
+useControls('fpsgraph')
+useControls(gl)
+useControls('Box', {
+  position: boxPosition.value,
+})
 
 const boxWidth = ref(1)
 
@@ -28,13 +32,14 @@ setTimeout(() => {
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas
     v-bind="gl"
     :window-size="true"
   >
     <TresPerspectiveCamera :look-at="[0, 4, 0]" />
     <OrbitControls />
-    <TresMesh :position="[0, 1, 0]">
+    <TresMesh :position-x="boxPosition.x">
       <TresBoxGeometry :args="[boxWidth, 1, 1]" />
       <TresMeshToonMaterial color="teal" />
     </TresMesh>

playground/src/pages/misc/Text3DDemo.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
+import Text3D from '../../components/Text3D.vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Suspense>
+      <Text3D />
+    </Suspense>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/components/TheParticles.vue → playground/src/pages/misc/TheParticles.vue

@@ -69,7 +69,10 @@ onLoop(({ elapsed }) => {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
+  <TresCanvas
+    v-bind="gl"
+    window-size
+  >
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
       :fov="45"
@@ -92,4 +95,4 @@ onLoop(({ elapsed }) => {
       cast-shadow
     />
   </TresCanvas>
-</template>
+</template>

playground/src/components/TheEvents.vue → playground/src/pages/raycaster/TheEvents.vue

@@ -47,6 +47,10 @@ const visible = ref(true)
       window-size
       v-bind="gl"
     >
+      <TresPerspectiveCamera
+        :position="[11, 11, 11]"
+        :look-at="[0, 0, 0]"
+      />
       <OrbitControls />
 
       <template v-for="x in [-2.5, 0, 2.5]">

playground/src/pages/shapes.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import { BasicShadowMap, CubicBezierCurve3, DoubleSide, NoToneMapping, SRGBColorSpace, Vector3 } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import {
-  Plane,
-  Tube,
-  Box,
-  Sphere,
-  Torus,
-  Ring,
-  TorusKnot,
-  Tetrahedron,
-  Icosahedron,
-  Octahedron,
-  Dodecahedron,
-  Circle,
-  Cone,
-} from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-
-const planeRef = shallowRef()
-const boxRef = shallowRef()
-const torusRef = shallowRef()
-const torusKnotRef = shallowRef()
-const circleRef = shallowRef()
-const tubeRef = shallowRef()
-const ringRef = shallowRef()
-const tetrahedronRef = shallowRef()
-const icosahedronRef = shallowRef()
-const octahedronRef = shallowRef()
-const dodecahedronRef = shallowRef()
-
-watch(planeRef, (plane) => {
-  console.log('plane', plane.value.position)
-})
-watch(boxRef, (box) => {
-  console.log('box', box.value.position)
-})
-watch(torusRef, (torus) => {
-  console.log('torus', torus.value.position)
-})
-watch(torusKnotRef, (torusKnot) => {
-  console.log('torusKnot', torusKnot.value.position)
-})
-watch(circleRef, (circle) => {
-  console.log('circle', circle.value.position)
-})
-watch(tubeRef, (tube) => {
-  console.log('tube', tube.value.position)
-})
-watch(ringRef, (ring) => {
-  console.log('ring', ring.value.position)
-})
-watch(tetrahedronRef, (tetrahedron) => {
-  console.log('tetrahedron', tetrahedron.value.position)
-})
-watch(icosahedronRef, (icosahedron) => {
-  console.log('icosahedron', icosahedron.value.position)
-})
-watch(octahedronRef, (octahedron) => {
-  console.log('octahedron', octahedron.value.position)
-})
-watch(dodecahedronRef, (dodecahedron) => {
-  console.log('dodecahedron', dodecahedron.value.position)
-})
-
-const tubePath = new CubicBezierCurve3(
-  new Vector3(-1, 0, 0),
-  new Vector3(-0.5, -1, 0),
-  new Vector3(0.5, 1, 0),
-  new Vector3(1, 0, 0),
-)
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :fov="75"
-      :aspect="1"
-      :near="0.1"
-      :far="1000"
-    />
-
-    <TresAmbientLight
-      :color="0xffffff"
-      :intensity="1"
-    />
-    <TresDirectionalLight
-      :position="[0, 8, 4]"
-      :intensity="0.7"
-      cast-shadow
-    />
-    <Plane
-      ref="planeRef"
-      :args="[12, 8]"
-      :position="[-2, 4, 0]"
-      receive-shadow
-    >
-      <TresMeshToonMaterial color="teal" />
-    </Plane>
-    <Box
-      ref="boxRef"
-      :arg0s="[1, 1, 1]"
-      :position="[0, 6, 0]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="orange" />
-    </Box>
-    <Sphere
-      :args="[1, 32, 16]"
-      :position="[2, 6, 0]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="pink" />
-    </Sphere>
-    <Torus
-      ref="torusRef"
-      :args="[0.75, 0.4, 16, 80]"
-      :position="[-2, 6, 0]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="cyan" />
-    </Torus>
-    <TorusKnot
-      ref="torusKnotRef"
-      :args="[0.6, 0.2, 64, 8]"
-      :position="[-2, 6, 2]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="lime" />
-    </TorusKnot>
-    <Circle
-      ref="circleRef"
-      :args="[0.9, 32]"
-      :position="[0, 6, 2]"
-      :rotation="[Math.PI, 0, 0]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial
-        color="lightsalmon"
-        :side="DoubleSide"
-      />
-    </Circle>
-    <Cone
-      :args="[1, 1, 6]"
-      :position="[2, 6, 2]"
-      :rotation="[Math.PI, 0, 0]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="slateblue" />
-    </Cone>
-    <Tube
-      ref="tubeRef"
-      :args="[tubePath, 20, 0.2, 8, false]"
-      :position="[2, 6, -2]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="lightblue" />
-    </Tube>
-    <Ring
-      ref="ringRef"
-      :args="[0.5, 1, 32]"
-      :position="[0, 6, -2]"
-      :rotation="[Math.PI, 0, 0]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial
-        color="purple"
-        :side="DoubleSide"
-      />
-    </Ring>
-    <Tetrahedron
-      ref="tetrahedronRef"
-      :args="[1, 0]"
-      :position="[-2, 6, -2]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="yellow" />
-    </Tetrahedron>
-    <Icosahedron
-      ref="icosahedronRef"
-      :args="[1, 0]"
-      :position="[-4, 6, -2]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="red" />
-    </Icosahedron>
-    <Octahedron
-      ref="octahedronRef"
-      :args="[1, 0]"
-      :position="[-4, 6, 0]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="greenyellow" />
-    </Octahedron>
-    <Dodecahedron
-      ref="dodecahedronRef"
-      :args="[1, 0]"
-      :position="[-4, 6, 2]"
-      cast-shadow
-    >
-      <TresMeshToonMaterial color="deeppink" />
-    </Dodecahedron>
-  </TresCanvas>
-</template>

playground/src/router.ts

@@ -6,20 +6,65 @@ const routes = [
     name: 'Home',
     component: () => import('./pages/index.vue'),
   },
+  {
+    path: '/basic',
+    name: 'Basic',
+    component: () => import('./pages/TheBasic.vue'),
+  },
+  {
+    path: '/groups',
+    name: 'Groups',
+    component: () => import('./pages/TheGroups.vue'),
+  },
+  {
+    path: '/responsiveness',
+    name: 'Responsiveness',
+    component: () => import('./pages/Responsiveness.vue'),
+  },
+  {
+    path: '/conditional',
+    name: 'Conditional',
+    component: () => import('./pages/TheConditional.vue'),
+  },
   {
     path: '/multiple',
     name: 'Multiple',
-    component: () => import('./pages/multiple.vue'),
+    component: () => import('./pages/Multiple.vue'),
   },
   {
-    path: '/multiple-cameras',
+    path: '/cameras/multiple-cameras',
     name: 'Multiple Cameras',
-    component: () => import('./pages/multiple-cameras.vue'),
+    component: () => import('./pages/cameras/MultipleCameras.vue'),
   },
   {
-    path: '/no-camera',
+    path: '/cameras/no-camera',
     name: 'No Camera',
-    component: () => import('./pages/no-camera.vue'),
+    component: () => import('./pages/cameras/NoCamera.vue'),
+  },
+  {
+    path: '/cameras/camera',
+    name: 'Camera',
+    component: () => import('./pages/cameras/Cameras.vue'),
+  },
+  {
+    path: '/raycaster/events',
+    name: 'Raycaster',
+    component: () => import('./pages/raycaster/TheEvents.vue'),
+  },
+  {
+    path: '/misc/text-3d',
+    name: 'Text3D',
+    component: () => import('./pages/misc/Text3DDemo.vue'),
+  },
+  {
+    path: '/misc/gui-controls',
+    name: 'GUI Controls',
+    component: () => import('./pages/misc/GUI.vue'),
+  },
+  {
+    path: '/misc/particles',
+    name: 'Particles',
+    component: () => import('./pages/misc/TheParticles.vue'),
   },
 ]
 export const router = createRouter({

pnpm-lock.yaml

@@ -32,16 +32,16 @@ importers:
         version: 3.1.0(three@0.155.0)(tweakpane@4.0.0)(vue@3.3.4)
       '@tresjs/eslint-config-vue':
         specifier: ^0.1.1
-        version: 0.1.1(@typescript-eslint/eslint-plugin@6.4.1)(eslint@8.47.0)(typescript@5.1.6)
+        version: 0.1.1(@typescript-eslint/eslint-plugin@6.4.1)(eslint@8.47.0)(typescript@5.2.2)
       '@types/three':
         specifier: ^0.155.1
         version: 0.155.1
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.4.1
-        version: 6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.1.6)
+        version: 6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.2.2)
       '@typescript-eslint/parser':
         specifier: ^6.4.1
-        version: 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+        version: 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       '@vitejs/plugin-vue':
         specifier: ^4.3.3
         version: 4.3.3(vite@4.4.9)(vue@3.3.4)
@@ -101,7 +101,7 @@ importers:
         version: 0.155.0
       unocss:
         specifier: ^0.54.0
-        version: 0.54.0(postcss@8.4.28)(vite@4.4.9)
+        version: 0.54.0(postcss@8.4.29)(vite@4.4.9)
       unplugin:
         specifier: ^1.4.0
         version: 1.4.0
@@ -116,7 +116,7 @@ importers:
         version: 0.7.0
       vite-plugin-dts:
         specifier: 3.5.2
-        version: 3.5.2(typescript@5.1.6)(vite@4.4.9)
+        version: 3.5.2(typescript@5.2.2)(vite@4.4.9)
       vite-plugin-inspect:
         specifier: ^0.7.38
         version: 0.7.38(vite@4.4.9)
@@ -128,7 +128,7 @@ importers:
         version: 4.0.0
       vitepress:
         specifier: 1.0.0-rc.4
-        version: 1.0.0-rc.4(@algolia/client-search@4.19.1)(search-insights@2.7.0)
+        version: 1.0.0-rc.4(@algolia/client-search@4.19.1)(search-insights@2.8.1)
       vitest:
         specifier: ^0.34.2
         version: 0.34.2(@vitest/ui@0.34.2)(jsdom@22.1.0)
@@ -147,7 +147,7 @@ importers:
     devDependencies:
       unocss:
         specifier: ^0.54.0
-        version: 0.54.0(postcss@8.4.28)(vite@4.4.9)
+        version: 0.54.0(postcss@8.4.29)(vite@4.4.9)
       vite-svg-loader:
         specifier: ^4.0.0
         version: 4.0.0
@@ -155,15 +155,15 @@ importers:
   playground:
     dependencies:
       '@tresjs/cientos':
-        specifier: 3.1.0
-        version: 3.1.0(three@0.155.0)(tweakpane@4.0.0)(vue@3.3.4)
+        specifier: 3.2.1
+        version: 3.2.1(three@0.155.0)(tweakpane@4.0.0)(vue@3.3.4)
       vue-router:
         specifier: ^4.2.4
         version: 4.2.4(vue@3.3.4)
     devDependencies:
       '@tresjs/leches':
-        specifier: ^0.7.0
-        version: 0.7.0(vue@3.3.4)
+        specifier: ^0.8.0
+        version: 0.8.0(vue@3.3.4)
       '@tweakpane/plugin-essentials':
         specifier: ^0.2.0
         version: 0.2.0(tweakpane@4.0.0)
@@ -175,7 +175,7 @@ importers:
         version: 1.1.2(vite@4.4.9)
       vue-tsc:
         specifier: ^1.8.8
-        version: 1.8.8(typescript@5.1.6)
+        version: 1.8.8(typescript@5.2.2)
 
 packages:
 
@@ -184,10 +184,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0):
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.8.1):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.8.1)
       '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -195,13 +195,13 @@ packages:
       - search-insights
     dev: true
 
-  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0):
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.8.1):
     resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
     peerDependencies:
       search-insights: '>= 1 < 3'
     dependencies:
       '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
-      search-insights: 2.7.0
+      search-insights: 2.8.1
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
@@ -479,10 +479,10 @@ packages:
     resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
     dev: true
 
-  /@docsearch/js@3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0):
+  /@docsearch/js@3.5.2(@algolia/client-search@4.19.1)(search-insights@2.8.1):
     resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
     dependencies:
-      '@docsearch/react': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
+      '@docsearch/react': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.8.1)
       preact: 10.17.1
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -492,7 +492,7 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0):
+  /@docsearch/react@3.5.2(@algolia/client-search@4.19.1)(search-insights@2.8.1):
     resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -509,11 +509,11 @@ packages:
       search-insights:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0)
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.8.1)
       '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
       '@docsearch/css': 3.5.2
       algoliasearch: 4.19.1
-      search-insights: 2.7.0
+      search-insights: 2.8.1
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -1397,6 +1397,25 @@ packages:
       vue: 3.3.4
     transitivePeerDependencies:
       - '@vue/composition-api'
+    dev: true
+
+  /@tresjs/cientos@3.2.1(three@0.155.0)(tweakpane@4.0.0)(vue@3.3.4):
+    resolution: {integrity: sha512-3smk5gWOy+XIezr2c6Je2MK9o4Uk5eHZTpKwHEy0/0TomYr77AgO7UGRlKnU8v6VnWZU5weVcAy35tiUmNOTDg==}
+    peerDependencies:
+      three: '>=0.133'
+      tweakpane: '>=3.0.0'
+      vue: '>=3.3'
+    dependencies:
+      '@tresjs/core': 3.1.1(three@0.155.0)(vue@3.3.4)
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      camera-controls: 2.7.2(three@0.155.0)
+      three: 0.155.0
+      three-stdlib: 2.25.0(three@0.155.0)
+      tweakpane: 4.0.0
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
 
   /@tresjs/core@3.0.1(three@0.155.0)(vue@3.3.4):
     resolution: {integrity: sha512-bhLOXqDXCT527dFwdyvUpq7H+WpOgJrmJTFK3tCxrULv996+rIgS0Nz6QRLsFAuyVJwqg29FPD0H/MYEjrviSQ==}
@@ -1410,6 +1429,21 @@ packages:
       vue: 3.3.4
     transitivePeerDependencies:
       - '@vue/composition-api'
+    dev: true
+
+  /@tresjs/core@3.1.1(three@0.155.0)(vue@3.3.4):
+    resolution: {integrity: sha512-HkB65AqofpQ9wtOV0wV9tqy9gokmk4Z/46mV7ksr1eyraTd1OG0XQzejQ/uvPXlBz84K1us6YOGTGSzBwA0wlw==}
+    peerDependencies:
+      three: '>=0.133'
+      vue: '>=3.3'
+    dependencies:
+      '@alvarosabu/utils': 3.1.1
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      three: 0.155.0
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
 
   /@tresjs/eslint-config-base@0.1.1(@typescript-eslint/eslint-plugin@6.4.1)(@typescript-eslint/parser@6.4.1)(eslint@8.47.0):
     resolution: {integrity: sha512-BAbFYERV23H3dkFZ9ITQQrpPgPVvNqsl+CcyDlpav54ailN2zuIY28NNXkREHf8KL+QeQZZLedcDWJbffKxMgg==}
@@ -1438,36 +1472,36 @@ packages:
       - supports-color
     dev: true
 
-  /@tresjs/eslint-config-ts@0.1.1(eslint@8.47.0)(typescript@5.1.6):
+  /@tresjs/eslint-config-ts@0.1.1(eslint@8.47.0)(typescript@5.2.2):
     resolution: {integrity: sha512-VkW0Pgd8OswsP1m0P5S0bupIvunA+mvtVX7vz3b08ONpxTvYzBos1FL0GmxaUrCjT1FkMDXGvNH9lth25X1Y4w==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
       '@tresjs/eslint-config-base': 0.1.1(@typescript-eslint/eslint-plugin@6.4.1)(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)
-      '@typescript-eslint/eslint-plugin': 6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.1.6)
-      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+      '@typescript-eslint/eslint-plugin': 6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       eslint: 8.47.0
-      typescript: 5.1.6
+      typescript: 5.2.2
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
-  /@tresjs/eslint-config-vue@0.1.1(@typescript-eslint/eslint-plugin@6.4.1)(eslint@8.47.0)(typescript@5.1.6):
+  /@tresjs/eslint-config-vue@0.1.1(@typescript-eslint/eslint-plugin@6.4.1)(eslint@8.47.0)(typescript@5.2.2):
     resolution: {integrity: sha512-1zE4mPkwdNA/Tz44thZ0b11F2thZqzICxshGJFUZCpqSQa28gxXFpOyChjNA9sjAbSuGBvTdSRmJXUz2+naO4Q==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
       '@tresjs/eslint-config-base': 0.1.1(@typescript-eslint/eslint-plugin@6.4.1)(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)
-      '@tresjs/eslint-config-ts': 0.1.1(eslint@8.47.0)(typescript@5.1.6)
-      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+      '@tresjs/eslint-config-ts': 0.1.1(eslint@8.47.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       eslint: 8.47.0
       eslint-plugin-vue: 9.17.0(eslint@8.47.0)
       local-pkg: 0.4.3
-      typescript: 5.1.6
+      typescript: 5.2.2
     transitivePeerDependencies:
       - '@typescript-eslint/eslint-plugin'
       - eslint-import-resolver-typescript
@@ -1475,12 +1509,12 @@ packages:
       - supports-color
     dev: true
 
-  /@tresjs/leches@0.7.0(vue@3.3.4):
-    resolution: {integrity: sha512-WuPAvFdNuxaLTS5x6/6rTd9+X/VlxOiyWFz2f2sibAOOb9uAmugVKRvKJ3wiCCNHQetx1G4zFUfVWzZHx4DFRw==}
+  /@tresjs/leches@0.8.0(vue@3.3.4):
+    resolution: {integrity: sha512-bXTIYJoeM1I1kn4pRM5FIJsY0FJ/IDL2r1UF7dub+V9QT6vNV5uvQeWbsiBRsZkuh/ykp+27gZC/149g0uxlKQ==}
     peerDependencies:
       vue: '>=3.3'
     dependencies:
-      '@vueuse/components': 10.3.0(vue@3.3.4)
+      '@vueuse/components': 10.4.1(vue@3.3.4)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -1610,8 +1644,13 @@ packages:
 
   /@types/webxr@0.5.3:
     resolution: {integrity: sha512-orrXqFCuuRE5hMuwLZhPaQrukAZxpkMzNJHmKCNJ16XT5yiR5iNBLNdn+xONbfzU2XAXTZR0GA2R99ciUd/2hg==}
+    dev: true
 
-  /@typescript-eslint/eslint-plugin@6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.1.6):
+  /@types/webxr@0.5.4:
+    resolution: {integrity: sha512-41gfGLTtqXZhcmoDlLDHqMJDuwAMwhHwXf9Q2job3TUBsvkNfPNI/3IWVEtLH4tyY1ElWtfwIaoNeqeEX238/Q==}
+    dev: false
+
+  /@typescript-eslint/eslint-plugin@6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.2.2):
     resolution: {integrity: sha512-3F5PtBzUW0dYlq77Lcqo13fv+58KDwUib3BddilE8ajPJT+faGgxmI9Sw+I8ZS22BYwoir9ZhNXcLi+S+I2bkw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1623,10 +1662,10 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.7.0
-      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       '@typescript-eslint/scope-manager': 6.4.1
-      '@typescript-eslint/type-utils': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
-      '@typescript-eslint/utils': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+      '@typescript-eslint/type-utils': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       '@typescript-eslint/visitor-keys': 6.4.1
       debug: 4.3.4
       eslint: 8.47.0
@@ -1634,13 +1673,13 @@ packages:
       ignore: 5.2.4
       natural-compare: 1.4.0
       semver: 7.5.4
-      ts-api-utils: 1.0.2(typescript@5.1.6)
-      typescript: 5.1.6
+      ts-api-utils: 1.0.2(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.4.1(eslint@8.47.0)(typescript@5.1.6):
+  /@typescript-eslint/parser@6.4.1(eslint@8.47.0)(typescript@5.2.2):
     resolution: {integrity: sha512-610G6KHymg9V7EqOaNBMtD1GgpAmGROsmfHJPXNLCU9bfIuLrkdOygltK784F6Crboyd5tBFayPB7Sf0McrQwg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1652,11 +1691,11 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 6.4.1
       '@typescript-eslint/types': 6.4.1
-      '@typescript-eslint/typescript-estree': 6.4.1(typescript@5.1.6)
+      '@typescript-eslint/typescript-estree': 6.4.1(typescript@5.2.2)
       '@typescript-eslint/visitor-keys': 6.4.1
       debug: 4.3.4
       eslint: 8.47.0
-      typescript: 5.1.6
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1669,7 +1708,7 @@ packages:
       '@typescript-eslint/visitor-keys': 6.4.1
     dev: true
 
-  /@typescript-eslint/type-utils@6.4.1(eslint@8.47.0)(typescript@5.1.6):
+  /@typescript-eslint/type-utils@6.4.1(eslint@8.47.0)(typescript@5.2.2):
     resolution: {integrity: sha512-7ON8M8NXh73SGZ5XvIqWHjgX2f+vvaOarNliGhjrJnv1vdjG0LVIz+ToYfPirOoBi56jxAKLfsLm40+RvxVVXA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1679,12 +1718,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.4.1(typescript@5.1.6)
-      '@typescript-eslint/utils': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+      '@typescript-eslint/typescript-estree': 6.4.1(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       debug: 4.3.4
       eslint: 8.47.0
-      ts-api-utils: 1.0.2(typescript@5.1.6)
-      typescript: 5.1.6
+      ts-api-utils: 1.0.2(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1694,7 +1733,7 @@ packages:
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.4.1(typescript@5.1.6):
+  /@typescript-eslint/typescript-estree@6.4.1(typescript@5.2.2):
     resolution: {integrity: sha512-xF6Y7SatVE/OyV93h1xGgfOkHr2iXuo8ip0gbfzaKeGGuKiAnzS+HtVhSPx8Www243bwlW8IF7X0/B62SzFftg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1709,13 +1748,13 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
-      ts-api-utils: 1.0.2(typescript@5.1.6)
-      typescript: 5.1.6
+      ts-api-utils: 1.0.2(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@6.4.1(eslint@8.47.0)(typescript@5.1.6):
+  /@typescript-eslint/utils@6.4.1(eslint@8.47.0)(typescript@5.2.2):
     resolution: {integrity: sha512-F/6r2RieNeorU0zhqZNv89s9bDZSovv3bZQpUNOmmQK1L80/cV4KEu95YUJWi75u5PhboFoKUJBnZ4FQcoqhDw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1726,7 +1765,7 @@ packages:
       '@types/semver': 7.5.0
       '@typescript-eslint/scope-manager': 6.4.1
       '@typescript-eslint/types': 6.4.1
-      '@typescript-eslint/typescript-estree': 6.4.1(typescript@5.1.6)
+      '@typescript-eslint/typescript-estree': 6.4.1(typescript@5.2.2)
       eslint: 8.47.0
       semver: 7.5.4
     transitivePeerDependencies:
@@ -1800,7 +1839,7 @@ packages:
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.54.0(postcss@8.4.28):
+  /@unocss/postcss@0.54.0(postcss@8.4.29):
     resolution: {integrity: sha512-t1PmIkp2Qa9F/9swfCVCXMuheQxd1ddrcvf0+d4fOckpFF8YhvOi+WfMoZW4YFwoCmG5pvDg4VYgKbDunGHhRg==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -1811,7 +1850,7 @@ packages:
       css-tree: 2.3.1
       fast-glob: 3.3.1
       magic-string: 0.30.3
-      postcss: 8.4.28
+      postcss: 8.4.29
     dev: true
 
   /@unocss/preset-attributify@0.54.0:
@@ -2064,7 +2103,7 @@ packages:
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
 
-  /@vue/language-core@1.8.8(typescript@5.1.6):
+  /@vue/language-core@1.8.8(typescript@5.2.2):
     resolution: {integrity: sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==}
     peerDependencies:
       typescript: '*'
@@ -2079,7 +2118,7 @@ packages:
       '@vue/shared': 3.3.4
       minimatch: 9.0.3
       muggle-string: 0.3.1
-      typescript: 5.1.6
+      typescript: 5.2.2
       vue-template-compiler: 2.7.14
     dev: true
 
@@ -2136,21 +2175,21 @@ packages:
       vue-component-type-helpers: 1.8.4
     dev: true
 
-  /@vue/typescript@1.8.8(typescript@5.1.6):
+  /@vue/typescript@1.8.8(typescript@5.2.2):
     resolution: {integrity: sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==}
     dependencies:
       '@volar/typescript': 1.10.1
-      '@vue/language-core': 1.8.8(typescript@5.1.6)
+      '@vue/language-core': 1.8.8(typescript@5.2.2)
     transitivePeerDependencies:
       - typescript
     dev: true
 
-  /@vueuse/components@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-EeZz3kjmJI7bH7JSxxMlLyk21LGl6GQjXfpl2n/GiI9QSJi+BVzIra5kEty5eM8McwAanx3e/HnK4drYTgFOWw==}
+  /@vueuse/components@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-hEWeumCfH394fkEYc/hng6T5VcjVkdqx7b75Sd6z4Uw3anjeo93Zp9qqtzFOv5bAmHls3Zy04Kowo1glrxDFRQ==}
     dependencies:
-      '@vueuse/core': 10.3.0(vue@3.3.4)
-      '@vueuse/shared': 10.3.0(vue@3.3.4)
-      vue-demi: 0.14.5(vue@3.3.4)
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2167,6 +2206,17 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/core@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.4.1
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /@vueuse/integrations@10.3.0(focus-trap@7.5.2)(vue@3.3.4):
     resolution: {integrity: sha512-Jgiv7oFyIgC6BxmDtiyG/fxyGysIds00YaY7sefwbhCZ2/tjEx1W/1WcsISSJPNI30in28+HC2J4uuU8184ekg==}
     peerDependencies:
@@ -2220,6 +2270,9 @@ packages:
   /@vueuse/metadata@10.3.0:
     resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
 
+  /@vueuse/metadata@10.4.1:
+    resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
+
   /@vueuse/shared@10.3.0(vue@3.3.4):
     resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
@@ -2228,6 +2281,14 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/shared@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==}
+    dependencies:
+      vue-demi: 0.14.6(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -2708,6 +2769,15 @@ packages:
       three: '>=0.126.1'
     dependencies:
       three: 0.155.0
+    dev: true
+
+  /camera-controls@2.7.2(three@0.155.0):
+    resolution: {integrity: sha512-6+gaZFK3LYbWaXC94EN0BYLlvpo9xfUqwp59vsU3nV7WXIU05q4wyP5TOgyG1tqTHReuBofb20vKfZNBNjMtzw==}
+    peerDependencies:
+      three: '>=0.126.1'
+    dependencies:
+      three: 0.155.0
+    dev: false
 
   /chai@4.3.7:
     resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
@@ -3698,7 +3768,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       debug: 3.2.7
       eslint: 8.47.0
       eslint-import-resolver-node: 0.3.9
@@ -3744,7 +3814,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.1.6)
+      '@typescript-eslint/parser': 6.4.1(eslint@8.47.0)(typescript@5.2.2)
       array-includes: 3.1.6
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.1
@@ -3858,7 +3928,7 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.1.6)
+      '@typescript-eslint/eslint-plugin': 6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.2.2)
       eslint: 8.47.0
       eslint-rule-composer: 0.3.0
     dev: true
@@ -6210,6 +6280,15 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.29:
+    resolution: {integrity: sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /potpack@1.0.2:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
 
@@ -6670,9 +6749,8 @@ packages:
     resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
     dev: true
 
-  /search-insights@2.7.0:
-    resolution: {integrity: sha512-GLbVaGgzYEKMvuJbHRhLi1qoBFnjXZGZ6l4LxOYPCp4lI2jDRB3jPU9/XNhMwv6kvnA9slTreq6pvK+b3o3aqg==}
-    engines: {node: '>=8.16.0'}
+  /search-insights@2.8.1:
+    resolution: {integrity: sha512-gxfqTdzjOxl/i5LtTvSFdolgnm3pUQD5Ae3V8N6tFQ2bsYeo4C3CmrQAsMt212ZV78P22XBUH/nM9IhcAI946Q==}
     dev: true
 
   /semver-diff@4.0.0:
@@ -7083,6 +7161,26 @@ packages:
       potpack: 1.0.2
       three: 0.155.0
       zstddec: 0.0.2
+    dev: true
+
+  /three-stdlib@2.25.0(three@0.155.0):
+    resolution: {integrity: sha512-E1zW4szHzRsQqiYWzDwBDn7xkeoZEUeIrzyI//AClSi9t7m6BIcN1dWTUATVoNw9Z5d8FhGHCfwgo4tFJ2T8+Q==}
+    peerDependencies:
+      three: '>=0.128.0'
+    dependencies:
+      '@types/draco3d': 1.4.2
+      '@types/offscreencanvas': 2019.7.0
+      '@types/webxr': 0.5.4
+      chevrotain: 10.5.0
+      draco3d: 1.5.6
+      fflate: 0.6.10
+      ktx-parse: 0.4.5
+      mmd-parser: 1.0.4
+      opentype.js: 1.3.4
+      potpack: 1.0.2
+      three: 0.155.0
+      zstddec: 0.0.2
+    dev: false
 
   /three@0.155.0:
     resolution: {integrity: sha512-sNgCYmDijnIqkD/bMfk+1pHg3YzsxW7V2ChpuP6HCQ8NiZr3RufsXQr8M3SSUMjW4hG+sUk7YbyuY0DncaDTJQ==}
@@ -7169,13 +7267,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /ts-api-utils@1.0.2(typescript@5.1.6):
+  /ts-api-utils@1.0.2(typescript@5.2.2):
     resolution: {integrity: sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==}
     engines: {node: '>=16.13.0'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.1.6
+      typescript: 5.2.2
     dev: true
 
   /tsconfig-paths@3.14.2:
@@ -7306,8 +7404,8 @@ packages:
     hasBin: true
     dev: true
 
-  /typescript@5.1.6:
-    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+  /typescript@5.2.2:
+    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: true
@@ -7403,7 +7501,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.54.0(postcss@8.4.28)(vite@4.4.9):
+  /unocss@0.54.0(postcss@8.4.29)(vite@4.4.9):
     resolution: {integrity: sha512-SXjyQqt/MP1uW8mjEmQaSa0zd+QB3FwaGD/ityNlu+zNRx1D03BPP9ACbJDB1zZKx4aodMVSsHZ3TV5wsu+VRQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -7416,7 +7514,7 @@ packages:
       '@unocss/cli': 0.54.0
       '@unocss/core': 0.54.0
       '@unocss/extractor-arbitrary-variants': 0.54.0
-      '@unocss/postcss': 0.54.0(postcss@8.4.28)
+      '@unocss/postcss': 0.54.0(postcss@8.4.29)
       '@unocss/preset-attributify': 0.54.0
       '@unocss/preset-icons': 0.54.0
       '@unocss/preset-mini': 0.54.0
@@ -7596,7 +7694,7 @@ packages:
     resolution: {integrity: sha512-g0cm0wbrR6b6wR8FWtfD1RSDPacdumKEOAnneXv+NpJ9ez+j6rklRv6lMOO+aPf+Y6Zb8OzgIk0FXBZ6h+DeZQ==}
     dev: true
 
-  /vite-plugin-dts@3.5.2(typescript@5.1.6)(vite@4.4.9):
+  /vite-plugin-dts@3.5.2(typescript@5.2.2)(vite@4.4.9):
     resolution: {integrity: sha512-iKc851+jdHEoN1ifbOEsoMs+/Zg26PE1EyO2Jc+4apOWRoaeK2zRJnaStgUuJaVaEcAjTqWzpNgCAMq7iO6DWA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -7608,12 +7706,12 @@ packages:
     dependencies:
       '@microsoft/api-extractor': 7.36.4
       '@rollup/pluginutils': 5.0.3
-      '@vue/language-core': 1.8.8(typescript@5.1.6)
+      '@vue/language-core': 1.8.8(typescript@5.2.2)
       debug: 4.3.4
       kolorist: 1.8.0
-      typescript: 5.1.6
+      typescript: 5.2.2
       vite: 4.4.9(@types/node@20.5.3)
-      vue-tsc: 1.8.8(typescript@5.1.6)
+      vue-tsc: 1.8.8(typescript@5.2.2)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
@@ -7710,12 +7808,12 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress@1.0.0-rc.4(@algolia/client-search@4.19.1)(search-insights@2.7.0):
+  /vitepress@1.0.0-rc.4(@algolia/client-search@4.19.1)(search-insights@2.8.1):
     resolution: {integrity: sha512-JCQ89Bm6ECUTnyzyas3JENo00UDJeK8q1SUQyJYou+4Yz5BKEc/F3O21cu++DnUT2zXc0kvQ2Aj4BZCc/nioXQ==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.8.1)
       '@vitejs/plugin-vue': 4.3.3(vite@4.4.9)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 10.3.0(vue@3.3.4)
@@ -7847,6 +7945,20 @@ packages:
     dependencies:
       vue: 3.3.4
 
+  /vue-demi@0.14.6(vue@3.3.4):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.4
+
   /vue-eslint-parser@9.3.1(eslint@8.47.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -7881,16 +7993,16 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.8(typescript@5.1.6):
+  /vue-tsc@1.8.8(typescript@5.2.2):
     resolution: {integrity: sha512-bSydNFQsF7AMvwWsRXD7cBIXaNs/KSjvzWLymq/UtKE36697sboX4EccSHFVxvgdBlI1frYPc/VMKJNB7DFeDQ==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@vue/language-core': 1.8.8(typescript@5.1.6)
-      '@vue/typescript': 1.8.8(typescript@5.1.6)
+      '@vue/language-core': 1.8.8(typescript@5.2.2)
+      '@vue/typescript': 1.8.8(typescript@5.2.2)
       semver: 7.5.4
-      typescript: 5.1.6
+      typescript: 5.2.2
     dev: true
 
   /vue@3.3.4: