From 74a2c4786330286dcaf132f5382f656cd69651aa Mon Sep 17 00:00:00 2001
From: andretchen0 <petermoldovia@yahoo.ca>
Date: Sat, 15 Jun 2024 11:24:06 +0200
Subject: [PATCH] refactor: playground housekeeping (#719)

* refactor: playground housekeeping

* move single-use components into folders with their parent components
* add "Issues" category

* chore: run linter

---------

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>
---
 playground/components.d.ts                    |   1 +
 playground/src/components/AkuAku.vue          |  17 -
 .../components/AnimatedObjectUseUpdate.vue    |  27 --
 .../src/components/LocalOrbitControls.vue     | 319 ------------------
 .../{TestSphere.vue => PbrSphere.vue}         |   0
 .../advanced/fbo}/FBOCube.vue                 |   2 +-
 .../pages/advanced/{FBO.vue => fbo/index.vue} |   2 +-
 .../advanced/fbo}/useFBO.ts                   |   0
 .../advanced/suspense/AsyncComponent.vue      |  11 +
 .../pages/advanced/{ => suspense}/index.vue   |  32 +-
 .../TakeOverRenderExperience.vue}             |   0
 .../index.vue}                                |   1 +
 playground/src/pages/cameras/NoCamera.vue     |   3 +-
 .../multipleCameras}/TheCameraOperator.vue    |   0
 .../index.vue}                                |   6 +-
 .../events/propagation}/Box.vue               |   0
 .../index.vue}                                |   2 +-
 playground/src/pages/index.vue                |  58 ++--
 .../pages/{basic/vIf => issues/717}/MyBox.vue |   0
 .../pages/{basic/vIf => issues/717}/index.vue |   3 +-
 .../directives}/DirectiveSubComponent.vue     |   2 +-
 .../{Directives.vue => directives/index.vue}  |   2 +-
 .../misc/text3D}/Text3D.vue                   |   0
 .../misc/{Text3DDemo.vue => text3D/index.vue} |   1 +
 playground/src/router/index.ts                | 116 +------
 playground/src/router/routes/advanced.ts      |  13 +-
 playground/src/router/routes/basic.ts         |   5 -
 playground/src/router/routes/cameras.ts       |   2 +-
 playground/src/router/routes/index.ts         |  13 +
 playground/src/router/routes/issues.ts        |   7 +
 playground/src/router/routes/misc.ts          |   4 +-
 31 files changed, 99 insertions(+), 550 deletions(-)
 delete mode 100644 playground/src/components/AkuAku.vue
 delete mode 100644 playground/src/components/LocalOrbitControls.vue
 rename playground/src/components/{TestSphere.vue => PbrSphere.vue} (100%)
 rename playground/src/{components => pages/advanced/fbo}/FBOCube.vue (90%)
 rename playground/src/pages/advanced/{FBO.vue => fbo/index.vue} (95%)
 rename playground/src/{composables => pages/advanced/fbo}/useFBO.ts (100%)
 create mode 100644 playground/src/pages/advanced/suspense/AsyncComponent.vue
 rename playground/src/pages/advanced/{ => suspense}/index.vue (68%)
 rename playground/src/{components/TakeOverLoopExperience.vue => pages/advanced/takeOverRender/TakeOverRenderExperience.vue} (100%)
 rename playground/src/pages/advanced/{TakeOverLoop.vue => takeOverRender/index.vue} (88%)
 rename playground/src/{components => pages/cameras/multipleCameras}/TheCameraOperator.vue (100%)
 rename playground/src/pages/cameras/{MultipleCameras.vue => multipleCameras/index.vue} (93%)
 rename playground/src/{components => pages/events/propagation}/Box.vue (100%)
 rename playground/src/pages/events/{Propagation.vue => propagation/index.vue} (98%)
 rename playground/src/pages/{basic/vIf => issues/717}/MyBox.vue (100%)
 rename playground/src/pages/{basic/vIf => issues/717}/index.vue (94%)
 rename playground/src/{components => pages/misc/directives}/DirectiveSubComponent.vue (56%)
 rename playground/src/pages/misc/{Directives.vue => directives/index.vue} (90%)
 rename playground/src/{components => pages/misc/text3D}/Text3D.vue (100%)
 rename playground/src/pages/misc/{Text3DDemo.vue => text3D/index.vue} (95%)
 create mode 100644 playground/src/router/routes/issues.ts

diff --git a/playground/components.d.ts b/playground/components.d.ts
index d8528055b..b344e1bd1 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
     LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default']
     Overlay: typeof import('./src/components/Overlay.vue')['default']
     OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
+    PbrSphere: typeof import('./src/components/PbrSphere.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TakeOverLoopExperience: typeof import('./src/components/TakeOverLoopExperience.vue')['default']
diff --git a/playground/src/components/AkuAku.vue b/playground/src/components/AkuAku.vue
deleted file mode 100644
index da35e1437..000000000
--- a/playground/src/components/AkuAku.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
-import { useGLTF } from '@tresjs/cientos'
-
-const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/AkuAku.glb', { draco: true })
-const model = nodes.Cube
-
-model.position.set(0, 1, 0)
-
-const state = useTresContext()
-
-state.invalidate()
-</script>
-
-<template>
-  <primitive :object="model" />
-</template>
diff --git a/playground/src/components/AnimatedObjectUseUpdate.vue b/playground/src/components/AnimatedObjectUseUpdate.vue
index c775616c1..dd28d0121 100644
--- a/playground/src/components/AnimatedObjectUseUpdate.vue
+++ b/playground/src/components/AnimatedObjectUseUpdate.vue
@@ -53,33 +53,6 @@ watchEffect(() => {
     off()
   }
 })
-/* const anotherLog = useThrottleFn(() => console.log('after render'), 3000)
- */
-/* useUpdate(() => {
-  anotherLog()
-}, 1) */
-
-/* useUpdate(() => {
-  console.count('update loop 1')
-})
-
-useUpdate(() => {
-  console.count('update loop 2')
-}) */
-
-/* useUpdate(() => {
-  console.count('before renderer')
-}, -1)
-
-useUpdate(() => {
-  console.log('this should be just before render')
-})
-
-useUpdate((state) => {
-  if (!sphereRef.value) { return }
-  console.count('after renderer')
-  sphereRef.value.position.y += Math.sin(state.elapsed) * 0.01
-}, 2) */
 </script>
 
 <template>
diff --git a/playground/src/components/LocalOrbitControls.vue b/playground/src/components/LocalOrbitControls.vue
deleted file mode 100644
index 56922ab60..000000000
--- a/playground/src/components/LocalOrbitControls.vue
+++ /dev/null
@@ -1,319 +0,0 @@
-<script lang="ts" setup>
-import type { Camera } from 'three'
-import { OrbitControls } from 'three-stdlib'
-import { onUnmounted, ref, unref } from 'vue'
-import type { TresVector3 } from '@tresjs/core'
-import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
-import { useEventListener } from '@vueuse/core'
-
-export interface OrbitControlsProps {
-  /**
-   * Whether to make this the default controls.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   */
-  makeDefault?: boolean
-  /**
-   * The camera to control.
-   *
-   * @type {Camera}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
-   */
-  camera?: Camera
-  /**
-   * The dom element to listen to.
-   *
-   * @type {HTMLElement}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
-   */
-  domElement?: HTMLElement
-  /**
-   * The target to orbit around.
-   *
-   * @type {TresVector3}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
-   */
-  target?: TresVector3
-  /**
-   * Whether to enable damping (inertia)
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
-   */
-  enableDamping?: boolean
-  /**
-   * The damping inertia used if `.enableDamping` is set to true
-   *
-   * @default 0.05
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
-   */
-  dampingFactor?: number
-  /**
-   * Set to true to automatically rotate around the target.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
-   */
-  autoRotate?: boolean
-  /**
-   * How fast to rotate around the target if `.autoRotate` is true.
-   *
-   * @default 2
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
-   */
-  autoRotateSpeed?: number
-  /**
-   * Whether to enable panning.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
-   */
-  enablePan?: boolean
-  /**
-   * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
-   *
-   * @default 7.0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
-   */
-  keyPanSpeed?: number
-  /**
-   * This object contains references to the keycodes for controlling camera panning.
-   * Default is the 4 arrow keys.
-   *
-   * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
-   * @type Record<string, string>
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
-   */
-  keys?: Record<string, string>
-  /**
-   * How far you can orbit horizontally, upper limit.
-   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-   * with ( max - min < 2 PI ). Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
-   */
-  maxAzimuthAngle?: number
-  /**
-   * How far you can orbit horizontally, lower limit.
-   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-   * with ( max - min < 2 PI ).
-   * Default is - Infinity.
-   *
-   * @default -Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
-   */
-  minAzimuthAngle?: number
-  /**
-   * How far you can orbit vertically, upper limit.
-   * Range is 0 to Math.PI radians, and default is Math.PI.
-   *
-   * @default Math.PI
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
-   */
-  maxPolarAngle?: number
-  /**
-   * How far you can orbit vertically, lower limit.
-   * Range is 0 to Math.PI radians, and default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
-   */
-  minPolarAngle?: number
-  /**
-   * The minimum distance of the camera to the target.
-   * Default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
-   */
-  minDistance?: number
-  /**
-   * The maximum distance of the camera to the target.
-   * Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
-   */
-  maxDistance?: number
-  /**
-   * The minimum field of view angle, in radians.
-   * Default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
-   */
-  minZoom?: number
-  /**
-   * The maximum field of view angle, in radians.
-   * ( OrthographicCamera only ).
-   * Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
-   */
-  maxZoom?: number
-  touches?: {
-    ONE?: number
-    TWO?: number
-  }
-  /**
-   * Whether to enable zooming.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
-   */
-  enableZoom?: boolean
-  /**
-   * How fast to zoom in and out. Default is 1.
-   *
-   * @default 1
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
-   */
-  zoomSpeed?: number
-  /**
-   * Whether to enable rotating.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
-   */
-  enableRotate?: boolean
-  /**
-   * How fast to rotate around the target. Default is 1.
-   *
-   * @default 1
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
-   */
-  rotateSpeed?: number
-}
-
-// TODO: remove disable once eslint is updated to support vue 3.3
-
-const {
-  autoRotate = false,
-  autoRotateSpeed = 2,
-  enableDamping = false,
-  dampingFactor = 0.05,
-  enablePan = true,
-  keyPanSpeed = 7,
-  maxAzimuthAngle = Number.POSITIVE_INFINITY,
-  minAzimuthAngle = Number.NEGATIVE_INFINITY,
-  maxPolarAngle = Math.PI,
-  minPolarAngle = 0,
-  minDistance = 0,
-  maxDistance = Number.POSITIVE_INFINITY,
-  minZoom = 0,
-  maxZoom = Number.POSITIVE_INFINITY,
-  enableZoom = true,
-  zoomSpeed = 1,
-  enableRotate = true,
-  rotateSpeed = 1,
-  target = [0, 0, 0],
-} = defineProps<OrbitControlsProps>()
-
-const emit = defineEmits(['change', 'start', 'end'])
-
-const { renderer, camera: activeCamera } = useTresContext()
-
-const controls = ref<OrbitControls | null>(null)
-
-extend({ OrbitControls })
-
-function addEventListeners() {
-  useEventListener(controls.value as any, 'change', () =>
-    emit('change', controls.value))
-  useEventListener(controls.value as any, 'start', () =>
-    emit('start', controls.value))
-  useEventListener(controls.value as any, 'end', () =>
-    emit('end', controls.value))
-}
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (controls.value && (enableDamping || autoRotate)) {
-    controls.value.update()
-  }
-})
-
-onMounted(() => {
-  addEventListeners()
-})
-
-onUnmounted(() => {
-  if (controls.value) {
-    controls.value.dispose()
-  }
-})
-</script>
-
-<template>
-  <TresOrbitControls
-    v-if="activeCamera && renderer"
-    ref="controls"
-    :target="target"
-    :auto-rotate="autoRotate"
-    :auto-rotate-speed="autoRotateSpeed"
-    :enable-damping="enableDamping"
-    :damping-factor="dampingFactor"
-    :enable-pan="enablePan"
-    :key-pan-speed="keyPanSpeed"
-    :keys="keys"
-    :max-azimuth-angle="maxAzimuthAngle"
-    :min-azimuth-angle="minAzimuthAngle"
-    :max-polar-angle="maxPolarAngle"
-    :min-polar-angle="minPolarAngle"
-    :min-distance="minDistance"
-    :max-distance="maxDistance"
-    :min-zoom="minZoom"
-    :max-zoom="maxZoom"
-    :touches="touches"
-    :enable-zoom="enableZoom"
-    :zoom-speed="zoomSpeed"
-    :enable-rotate="enableRotate"
-    :rotate-speed="rotateSpeed"
-    :args="[unref(activeCamera) || camera, renderer?.domElement || domElement]"
-  />
-</template>
diff --git a/playground/src/components/TestSphere.vue b/playground/src/components/PbrSphere.vue
similarity index 100%
rename from playground/src/components/TestSphere.vue
rename to playground/src/components/PbrSphere.vue
diff --git a/playground/src/components/FBOCube.vue b/playground/src/pages/advanced/fbo/FBOCube.vue
similarity index 90%
rename from playground/src/components/FBOCube.vue
rename to playground/src/pages/advanced/fbo/FBOCube.vue
index f6ba89fe4..0ddd77e7d 100644
--- a/playground/src/components/FBOCube.vue
+++ b/playground/src/pages/advanced/fbo/FBOCube.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
-import { useFBO } from '../composables/useFBO'
+import { useFBO } from './useFBO'
 
 const fboTarget = useFBO({
   depth: true,
diff --git a/playground/src/pages/advanced/FBO.vue b/playground/src/pages/advanced/fbo/index.vue
similarity index 95%
rename from playground/src/pages/advanced/FBO.vue
rename to playground/src/pages/advanced/fbo/index.vue
index 6f4a3fbe7..8359de72a 100644
--- a/playground/src/pages/advanced/FBO.vue
+++ b/playground/src/pages/advanced/fbo/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
 import { OrbitControls } from '@tresjs/cientos'
+import FBOCube from './FBOCube.vue'
 import '@tresjs/leches/styles'
 
 const gl = {
diff --git a/playground/src/composables/useFBO.ts b/playground/src/pages/advanced/fbo/useFBO.ts
similarity index 100%
rename from playground/src/composables/useFBO.ts
rename to playground/src/pages/advanced/fbo/useFBO.ts
diff --git a/playground/src/pages/advanced/suspense/AsyncComponent.vue b/playground/src/pages/advanced/suspense/AsyncComponent.vue
new file mode 100644
index 000000000..d4881320e
--- /dev/null
+++ b/playground/src/pages/advanced/suspense/AsyncComponent.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useTresContext } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf', { draco: true })
+useTresContext().invalidate()
+</script>
+
+<template>
+  <primitive :object="scene" :position-y="-2" />
+</template>
diff --git a/playground/src/pages/advanced/index.vue b/playground/src/pages/advanced/suspense/index.vue
similarity index 68%
rename from playground/src/pages/advanced/index.vue
rename to playground/src/pages/advanced/suspense/index.vue
index ae32af8c6..2637a6058 100644
--- a/playground/src/pages/advanced/index.vue
+++ b/playground/src/pages/advanced/suspense/index.vue
@@ -4,7 +4,7 @@ import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { Perf, TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
 import { OrbitControls } from '@tresjs/cientos'
-import AkuAku from './AkuAku.vue'
+import AsyncComponent from './AsyncComponent.vue'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -15,14 +15,16 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const { sphere } = useControls({
-  sphere: true,
+const { show } = useControls({
+  show: true,
 })
 
 const ctx = ref(null)
 
 watchEffect(() => {
-  if (!ctx.value) { return }
+  if (!ctx.value) {
+    return
+  }
   // eslint-disable-next-line no-console
   console.log('ctx', ctx.value)
 })
@@ -35,29 +37,25 @@ useControls({
       ctx?.value?.dispose()
     },
   },
-
 })
 </script>
 
 <template>
   <TresLeches />
-  <TresCanvas
-    v-bind="gl"
-    ref="ctx"
-  >
+  <TresCanvas v-bind="gl" ref="ctx">
     <Perf />
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
     <Suspense>
-      <AkuAku v-if="sphere" />
+      <AsyncComponent v-if="show" />
     </Suspense>
-    <!--  <TresMesh
-      v-if="sphere.value"
-      :position="[0, 0, 0]"
-    >
-      <TresSphereGeometry />
-      <TresMeshStandardMaterial color="teal" />
-    </TresMesh> -->
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
+  <OverlayInfo>
+    <h1>Suspense</h1>
+    <p>
+      Because the model in this page is loaded asynchronously behind the scenes
+      with <code>useGLTF</code>, it must be wrapped in a Suspense component.
+    </p>
+  </OverlayInfo>
 </template>
diff --git a/playground/src/components/TakeOverLoopExperience.vue b/playground/src/pages/advanced/takeOverRender/TakeOverRenderExperience.vue
similarity index 100%
rename from playground/src/components/TakeOverLoopExperience.vue
rename to playground/src/pages/advanced/takeOverRender/TakeOverRenderExperience.vue
diff --git a/playground/src/pages/advanced/TakeOverLoop.vue b/playground/src/pages/advanced/takeOverRender/index.vue
similarity index 88%
rename from playground/src/pages/advanced/TakeOverLoop.vue
rename to playground/src/pages/advanced/takeOverRender/index.vue
index c107ab1dc..f5a8032f3 100644
--- a/playground/src/pages/advanced/TakeOverLoop.vue
+++ b/playground/src/pages/advanced/takeOverRender/index.vue
@@ -2,6 +2,7 @@
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
+import TakeOverLoopExperience from './TakeOverRenderExperience.vue'
 import '@tresjs/leches/styles'
 
 const gl = {
diff --git a/playground/src/pages/cameras/NoCamera.vue b/playground/src/pages/cameras/NoCamera.vue
index 8a369315d..3bdf8027c 100644
--- a/playground/src/pages/cameras/NoCamera.vue
+++ b/playground/src/pages/cameras/NoCamera.vue
@@ -26,7 +26,6 @@ const useOwnCamera = ref(false)
         v-bind="state"
         :camera="useOwnCamera ? camera : undefined"
       >
-        <LocalOrbitControls />
         <TresAmbientLight :intensity="0.5" />
         <TresMesh :position="[0, 4, 0]">
           <TresBoxGeometry :args="[1, 1, 1]" />
@@ -34,7 +33,7 @@ const useOwnCamera = ref(false)
         </TresMesh>
 
         <Suspense>
-          <TestSphere />
+          <PbrSphere />
         </Suspense>
         <TresDirectionalLight
           :position="[0, 2, 4]"
diff --git a/playground/src/components/TheCameraOperator.vue b/playground/src/pages/cameras/multipleCameras/TheCameraOperator.vue
similarity index 100%
rename from playground/src/components/TheCameraOperator.vue
rename to playground/src/pages/cameras/multipleCameras/TheCameraOperator.vue
diff --git a/playground/src/pages/cameras/MultipleCameras.vue b/playground/src/pages/cameras/multipleCameras/index.vue
similarity index 93%
rename from playground/src/pages/cameras/MultipleCameras.vue
rename to playground/src/pages/cameras/multipleCameras/index.vue
index b49aaa225..86bc7a21d 100644
--- a/playground/src/pages/cameras/MultipleCameras.vue
+++ b/playground/src/pages/cameras/multipleCameras/index.vue
@@ -2,7 +2,9 @@
 import type { Camera } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { OrbitControls } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
+import TheCameraOperator from './TheCameraOperator.vue'
 
 const state = reactive({
   clearColor: '#4f4f4f',
@@ -75,7 +77,7 @@ const camera3Exists = ref(false)
             :look-at="[0, 4, 0]"
           />
         </TheCameraOperator>
-        <LocalOrbitControls />
+        <OrbitControls />
         <TresAmbientLight :intensity="0.5" />
         <TresMesh :position="[0, 4, 0]">
           <TresBoxGeometry :args="[1, 1, 1]" />
@@ -83,7 +85,7 @@ const camera3Exists = ref(false)
         </TresMesh>
 
         <Suspense>
-          <TestSphere />
+          <PbrSphere />
         </Suspense>
         <TresDirectionalLight
           :position="[0, 2, 4]"
diff --git a/playground/src/components/Box.vue b/playground/src/pages/events/propagation/Box.vue
similarity index 100%
rename from playground/src/components/Box.vue
rename to playground/src/pages/events/propagation/Box.vue
diff --git a/playground/src/pages/events/Propagation.vue b/playground/src/pages/events/propagation/index.vue
similarity index 98%
rename from playground/src/pages/events/Propagation.vue
rename to playground/src/pages/events/propagation/index.vue
index a9847cf7a..baf1097f4 100644
--- a/playground/src/pages/events/Propagation.vue
+++ b/playground/src/pages/events/propagation/index.vue
@@ -6,7 +6,7 @@ import {
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
-import Box from '../../components/Box.vue'
+import Box from './Box.vue'
 
 const gl = {
   clearColor: '#202020',
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index e5e2c0b5a..57acffbd5 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -4,6 +4,7 @@ import {
   basicRoutes,
   cameraRoutes,
   eventsRoutes,
+  issuesRoutes,
   miscRoutes,
   modelsRoutes,
 } from '../router/routes'
@@ -15,23 +16,17 @@ const sections = [
   { icon: '📷', title: 'Camera', routes: cameraRoutes },
   { icon: '🐇', title: 'Models', routes: modelsRoutes },
   { icon: '🤪', title: 'Misc', routes: miscRoutes },
+  { icon: '🔬', title: 'Issues', routes: issuesRoutes },
 ]
 </script>
 
 <template>
   <div
-    class="
-  container mx-auto max-w-3xl
-  font-sans text-xs color-gray
-  bg-white
-  "
+    class="container mx-auto max-w-3xl font-sans text-xs color-gray bg-white"
   >
     <div class="mx-4">
       <div
-        class="
-    mt-24 mb-12 text-center align-baseline items-center gap-6
-    sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse sm:justify-left
-    "
+        class="mt-24 mb-12 text-center align-baseline items-center gap-6 sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse sm:justify-left"
       >
         <div>
           <img
@@ -42,44 +37,41 @@ const sections = [
         </div>
         <div class="sm:w-2/3">
           <h1
-            class="
-        w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3
-        sm:mx-none sm:w-1/2 sm:max-w-72
-        "
+            class="w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3 sm:mx-none sm:w-1/2 sm:max-w-72"
           >
             <span class="text-tres-primary">TresJS</span> Playground
           </h1>
-          <p class="text-lg">
-            Testing zone for TresJS/core components
-          </p>
+          <p class="text-lg">Testing zone for TresJS/core components</p>
         </div>
       </div>
-      <div class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4">
+      <div
+        class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4"
+      >
         <div
           v-for="{ title, routes, icon } in sections"
           :key="title"
-          class="
-          p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded
-          sm:my-0
-          "
+          class="p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded sm:my-0"
         >
-          <div class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded">
+          <div
+            class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded"
+          >
             {{ icon }}
           </div>
           <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
             {{ title }}
           </h2>
-          <div
-            v-for="route in routes"
-            :key="route.name"
-            class="link-wrapper"
-          >
-            <router-link
-              class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
-              :to="route.path"
-            >
-              <span>{{ route.name }} </span>
-            </router-link>
+          <div v-if="routes.length">
+            <div v-for="route in routes" :key="route.name" class="link-wrapper">
+              <router-link
+                class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
+                :to="route.path"
+              >
+                <span>{{ route.name }} </span>
+              </router-link>
+            </div>
+          </div>
+          <div v-else>
+            (empty)
           </div>
         </div>
       </div>
diff --git a/playground/src/pages/basic/vIf/MyBox.vue b/playground/src/pages/issues/717/MyBox.vue
similarity index 100%
rename from playground/src/pages/basic/vIf/MyBox.vue
rename to playground/src/pages/issues/717/MyBox.vue
diff --git a/playground/src/pages/basic/vIf/index.vue b/playground/src/pages/issues/717/index.vue
similarity index 94%
rename from playground/src/pages/basic/vIf/index.vue
rename to playground/src/pages/issues/717/index.vue
index 9fb1b2ea7..2fa83bbd1 100644
--- a/playground/src/pages/basic/vIf/index.vue
+++ b/playground/src/pages/issues/717/index.vue
@@ -42,10 +42,9 @@ onUnmounted(() => intervalId && clearInterval(intervalId))
         <TresMeshBasicMaterial color="red" />
       </TresMesh>
     </TresMesh>
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1.2" cast-shadow />
   </TresCanvas>
   <OverlayInfo>
-    <h1>v-if</h1>
+    <h1>Issue #717: v-if</h1>
     <h2>Setup</h2>
     <p>
       In this scene, there is a Box with a <code>v-if</code>. Its <code>v-if</code> value is toggled on and off.
diff --git a/playground/src/components/DirectiveSubComponent.vue b/playground/src/pages/misc/directives/DirectiveSubComponent.vue
similarity index 56%
rename from playground/src/components/DirectiveSubComponent.vue
rename to playground/src/pages/misc/directives/DirectiveSubComponent.vue
index ec4b9a4ff..4dd4269ff 100644
--- a/playground/src/components/DirectiveSubComponent.vue
+++ b/playground/src/pages/misc/directives/DirectiveSubComponent.vue
@@ -3,5 +3,5 @@ import { vLightHelper } from '@tresjs/core'
 </script>
 
 <template>
-  <TresDirectionalLight v-light-helper :position="[3, 3, 3]" :intensity="1" />
+  <TresDirectionalLight v-light-helper :position="[-1, 1, 0]" :intensity="1" />
 </template>
diff --git a/playground/src/pages/misc/Directives.vue b/playground/src/pages/misc/directives/index.vue
similarity index 90%
rename from playground/src/pages/misc/Directives.vue
rename to playground/src/pages/misc/directives/index.vue
index 604db6b16..41d046c7f 100644
--- a/playground/src/pages/misc/Directives.vue
+++ b/playground/src/pages/misc/directives/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
 import { OrbitControls } from '@tresjs/cientos'
+import DirectiveSubComponent from './DirectiveSubComponent.vue'
 
 const gl = {
   clearColor: '#82DBC5',
diff --git a/playground/src/components/Text3D.vue b/playground/src/pages/misc/text3D/Text3D.vue
similarity index 100%
rename from playground/src/components/Text3D.vue
rename to playground/src/pages/misc/text3D/Text3D.vue
diff --git a/playground/src/pages/misc/Text3DDemo.vue b/playground/src/pages/misc/text3D/index.vue
similarity index 95%
rename from playground/src/pages/misc/Text3DDemo.vue
rename to playground/src/pages/misc/text3D/index.vue
index 5e1fdd373..ed5fa977c 100644
--- a/playground/src/pages/misc/Text3DDemo.vue
+++ b/playground/src/pages/misc/text3D/index.vue
@@ -3,6 +3,7 @@ import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
+import Text3D from './Text3D.vue'
 
 import '@tresjs/leches/styles'
 
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
index 482b5b805..6a997fa75 100644
--- a/playground/src/router/index.ts
+++ b/playground/src/router/index.ts
@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { basicRoutes } from './routes/basic'
-import { advancedRoutes, cameraRoutes, eventsRoutes, miscRoutes, modelsRoutes } from './routes'
+import { allRoutes } from './routes'
 
 const routes = [
   {
@@ -8,118 +7,7 @@ const routes = [
     name: 'Home',
     component: () => import('../pages/index.vue'),
   },
-  ...basicRoutes,
-  ...advancedRoutes,
-  ...eventsRoutes,
-  ...cameraRoutes,
-  ...modelsRoutes,
-  ...miscRoutes,
-/*   {
-    path: '/',
-    name: 'Home',
-    component: () => import('./pages/index.vue'),
-  },
-  {
-    path: '/basic',
-    name: 'Basic',
-    component: () => import('./pages/TheBasic.vue'),
-  },
-  {
-    path: '/lights',
-    name: 'lights',
-    component: () => import('./pages/lights.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/MultipleCanvas.vue'),
-  },
-  {
-    path: '/cameras/multiple-cameras',
-    name: 'Multiple Cameras',
-    component: () => import('./pages/cameras/MultipleCameras.vue'),
-  },
-  {
-    path: '/cameras/no-camera',
-    name: 'No Camera',
-    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: '/raycaster/propagation',
-    name: 'Event Propogation',
-    component: () => import('./pages/raycaster/Propagation.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'),
-  },
-  {
-    path: '/click-blocking-box',
-    name: 'Click Blocking Box',
-    component: () => import('./pages/click-blocking-box.vue'),
-  },
-  {
-    path: '/perf',
-    name: 'Perf',
-    component: () => import('./pages/perf/index.vue'),
-  },
-  {
-    path: '/primitives',
-    name: 'Primitives',
-    component: () => import('./pages/primitives.vue'),
-  },
-  {
-    path: '/rendering-modes',
-    name: 'Rendering Modes',
-    component: () => import('./pages/rendering-modes/index.vue'),
-  },
-  {
-    path: '/on-demand-rendering',
-    name: 'On Demand Rendering',
-    component: () => import('./pages/on-demand-rendering.vue'),
-  },
-  {
-    path: '/empty',
-    name: 'empty',
-    component: () => import('./pages/empty.vue'),
-  },
-   */
+  ...allRoutes,
 ]
 export const router = createRouter({
   history: createWebHistory(),
diff --git a/playground/src/router/routes/advanced.ts b/playground/src/router/routes/advanced.ts
index 5621d299c..a2c5cdd96 100644
--- a/playground/src/router/routes/advanced.ts
+++ b/playground/src/router/routes/advanced.ts
@@ -10,13 +10,18 @@ export const advancedRoutes = [
     component: () => import('../../pages/advanced/manual/index.vue'),
   },
   {
-    path: '/advanced/take-over-loop',
-    name: 'Take Over loop',
-    component: () => import('../../pages/advanced/TakeOverLoop.vue'),
+    path: '/advanced/take-over-render',
+    name: 'Take Over render',
+    component: () => import('../../pages/advanced/takeOverRender/index.vue'),
   },
   {
     path: '/advanced/fbo',
     name: 'FBO',
-    component: () => import('../../pages/advanced/FBO.vue'),
+    component: () => import('../../pages/advanced/fbo/index.vue'),
+  },
+  {
+    path: '/advanced/suspense',
+    name: 'Suspense',
+    component: () => import('../../pages/advanced/suspense/index.vue'),
   },
 ]
diff --git a/playground/src/router/routes/basic.ts b/playground/src/router/routes/basic.ts
index 97174baa7..4c89e1585 100644
--- a/playground/src/router/routes/basic.ts
+++ b/playground/src/router/routes/basic.ts
@@ -44,9 +44,4 @@ export const basicRoutes = [
     name: 'Pierced Props',
     component: () => import('../../pages/basic/PiercedProps.vue'),
   },
-  {
-    path: '/basic/v-if',
-    name: 'v-if',
-    component: () => import('../../pages/basic/vIf/index.vue'),
-  },
 ]
diff --git a/playground/src/router/routes/cameras.ts b/playground/src/router/routes/cameras.ts
index c96dcaf44..102f03bf5 100644
--- a/playground/src/router/routes/cameras.ts
+++ b/playground/src/router/routes/cameras.ts
@@ -12,6 +12,6 @@ export const cameraRoutes = [
   {
     path: '/cameras/multiple-cameras',
     name: 'Multiple Cameras',
-    component: () => import('../../pages/cameras/MultipleCameras.vue'),
+    component: () => import('../../pages/cameras/multipleCameras/index.vue'),
   },
 ]
diff --git a/playground/src/router/routes/index.ts b/playground/src/router/routes/index.ts
index d59d1ca8f..b64964a75 100644
--- a/playground/src/router/routes/index.ts
+++ b/playground/src/router/routes/index.ts
@@ -4,6 +4,17 @@ import { eventsRoutes } from './events'
 import { basicRoutes } from './basic'
 import { advancedRoutes } from './advanced'
 import { miscRoutes } from './misc'
+import { issuesRoutes } from './issues'
+
+const allRoutes = [
+  ...basicRoutes,
+  ...advancedRoutes,
+  ...eventsRoutes,
+  ...cameraRoutes,
+  ...modelsRoutes,
+  ...miscRoutes,
+  ...issuesRoutes,
+]
 
 export {
   basicRoutes,
@@ -12,4 +23,6 @@ export {
   cameraRoutes,
   modelsRoutes,
   miscRoutes,
+  issuesRoutes,
+  allRoutes,
 }
diff --git a/playground/src/router/routes/issues.ts b/playground/src/router/routes/issues.ts
new file mode 100644
index 000000000..718ce5f01
--- /dev/null
+++ b/playground/src/router/routes/issues.ts
@@ -0,0 +1,7 @@
+export const issuesRoutes = [
+  {
+    path: '/issues/717vIf',
+    name: '#717: v-if',
+    component: () => import('../../pages/issues/717/index.vue'),
+  },
+]
diff --git a/playground/src/router/routes/misc.ts b/playground/src/router/routes/misc.ts
index 996c00cea..eda07bdfb 100644
--- a/playground/src/router/routes/misc.ts
+++ b/playground/src/router/routes/misc.ts
@@ -2,11 +2,11 @@ export const miscRoutes = [
   {
     path: '/misc',
     name: 'Text 3D',
-    component: () => import('../../pages/misc/Text3DDemo.vue'),
+    component: () => import('../../pages/misc/text3D/index.vue'),
   },
   {
     path: '/misc/directives',
     name: 'Directives',
-    component: () => import('../../pages/misc/Directives.vue'),
+    component: () => import('../../pages/misc/directives/index.vue'),
   },
 ]