chore: testing out the new tres leches API for playgrounds (#911)

* chore:  testing out the new tres leches API for playgrounds

* chore: remove unused Three.js imports from Suspense example

playground/vue/package.json

@@ -11,10 +11,10 @@
   "dependencies": {
     "@tresjs/cientos": "4.0.3",
     "@tresjs/core": "workspace:^",
+    "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tresjs/leches": "0.15.0-next.3",
     "@tweakpane/plugin-essentials": "^0.2.0",
     "unplugin-auto-import": "^0.19.0",
     "vite-plugin-glsl": "^1.3.1",

playground/vue/src/components/AnimatedObjectUseUpdate.vue

@@ -23,15 +23,12 @@ onBeforeRender(() => {
   log2()
 }, -1)
 
-const { areUpdatesPaused } = useControls({
+const { areUpdatesPaused, unregister } = useControls({
   areUpdatesPaused: {
     value: false,
     type: 'boolean',
     label: 'Pause Updates',
   },
-})
-
-const { unregister } = useControls({
   unregister: {
     value: false,
     type: 'boolean',

playground/vue/src/pages/advanced/suspense/AsyncComponent.vue

@@ -2,10 +2,10 @@
 import { useGLTF } from '@tresjs/cientos'
 import { useTresContext } from '@tresjs/core'
 
-const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf', { draco: true })
+const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 useTresContext().invalidate()
 </script>
 
 <template>
-  <primitive :object="scene" :position-y="-2" />
+  <primitive :object="scene" />
 </template>

playground/vue/src/pages/advanced/suspense/index.vue

@@ -1,26 +1,23 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { Perf, TresLeches, useControls } from '@tresjs/leches'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
 import AsyncComponent from './AsyncComponent.vue'
 import '@tresjs/leches/styles'
 
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
+const ctx = ref(null)
 
 const { show } = useControls({
   show: true,
+  button: {
+    label: 'Render dispose',
+    type: 'button',
+    onClick() {
+      ctx?.value?.dispose()
+    },
+  },
 })
 
-const ctx = ref(null)
-
 watchEffect(() => {
   if (!ctx.value) {
     return
@@ -28,23 +25,12 @@ watchEffect(() => {
   // eslint-disable-next-line no-console
   console.log('ctx', ctx.value)
 })
-
-useControls({
-  button: {
-    label: 'Render dispose',
-    type: 'button',
-    onClick() {
-      ctx?.value?.dispose()
-    },
-  },
-})
 </script>
 
 <template>
   <TresLeches />
-  <TresCanvas v-bind="gl" ref="ctx">
-    <Perf />
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
+  <TresCanvas ref="ctx" clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[7, 7, 7]" />
     <OrbitControls />
     <Suspense>
       <AsyncComponent v-if="show" />

playground/vue/src/pages/advanced/takeOverRender/TakeOverRenderExperience.vue

@@ -10,15 +10,12 @@ const { off } = render(({ renderer, scene, camera }) => {
   renderer.render(scene, camera)
 })
 
-const { isRenderPaused } = useControls({
+const { isRenderPaused, unregisterRender } = useControls({
   isRenderPaused: {
     value: false,
     type: 'boolean',
     label: 'Pause Render',
   },
-})
-
-const { unregisterRender } = useControls({
   unregisterRender: {
     value: false,
     type: 'boolean',

playground/vue/src/pages/basic/Primitives.vue

@@ -28,11 +28,8 @@ const gl = {
 const canvas = ref()
 const meshRef = ref()
 
-const { knot } = useControls({
+const { knot, isVisible } = useControls({
   knot: true,
-})
-
-const { isVisible } = useControls({
   isVisible: true,
 })
 

playground/vue/src/pages/misc/text3D/Text3D.vue

@@ -3,6 +3,10 @@ import { extend, useTexture } from '@tresjs/core'
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
 
+const props = defineProps<{
+  text: string
+}>()
+
 extend({ TextGeometry })
 
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
@@ -12,7 +16,7 @@ const fontOptions = {
   height: 0.2,
   curveSegments: 5,
   bevelEnabled: true,
-  bevelThickness: 0.05,
+  bevelThickness: 0.02,
   bevelSize: 0.02,
   bevelOffset: 0,
   bevelSegments: 4,
@@ -37,7 +41,7 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
 <template>
   <TresMesh>
     <TresTextGeometry
-      :args="['TresJS', { font, ...fontOptions }]"
+      :args="[props.text, { font, ...fontOptions }]"
       center
     />
     <TresMeshNormalMaterial :matcap="matcapTexture" />

playground/vue/src/pages/misc/text3D/index.vue

@@ -16,8 +16,9 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const { isVisible } = useControls({
+const { isVisible, text } = useControls({
   isVisible: true,
+  text: 'TresJS',
 })
 </script>
 
@@ -27,7 +28,7 @@ const { isVisible } = useControls({
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
     <Suspense>
-      <Text3D v-if="isVisible" />
+      <Text3D v-if="isVisible" :text="text" />
     </Suspense>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>