Merge pull request #198 from Tresjs/feature-157-re-order-components

feat(Cientos): re-order components

docs/.vitepress/config.ts

@@ -28,15 +28,9 @@ export default defineConfig({
         text: 'Abstractions',
         items: [
           { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+          { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
           { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
-          { text: 'Environment', link: '/guide/abstractions/environment' },
-          { text: 'useEnvironment', link: '/guide/abstractions/use-environment' },
           { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
-          { text: 'Stars', link: '/guide/abstractions/stars' },
-          { text: 'Smoke', link: '/guide/abstractions/smoke' },
-          { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
-          { text: 'Contact Shadows', link: '/guide/abstractions/contact-shadows' },
-          { text: 'Precipitation', link: '/guide/abstractions/precipitation' },
         ],
       },
       {
@@ -92,11 +86,18 @@ export default defineConfig({
       },
       {
         text: 'Staging',
-        collapsed: true,
-        items: [{ text: 'Backdrop', link: '/guide/staging/backdrop' }],
+        items: [
+          { text: 'Backdrop', link: '/guide/staging/backdrop' },
+          { text: 'Environment', link: '/guide/staging/environment' },
+          { text: 'useEnvironment', link: '/guide/staging/use-environment' },
+          { text: 'Stars', link: '/guide/staging/stars' },
+          { text: 'Smoke', link: '/guide/staging/smoke' },
+          { text: 'Contact Shadows', link: '/guide/staging/contact-shadows' },
+          { text: 'Precipitation', link: '/guide/staging/precipitation' }],
       },
       {
         text: 'Misc',
+        collapsed: true,
         items: [
           { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' },
           { text: 'Stats', link: '/guide/misc/stats' },

docs/guide/abstractions/environment.md → docs/guide/staging/environment.md

@@ -4,7 +4,7 @@
 
 Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`,
 
-It uses the composable [useEnvironment](/guide/abstractions/use-environment) under the hood to load the cubemap.
+It uses the composable [useEnvironment](/guide/staging/use-environment) under the hood to load the cubemap.
 
 ## Usage
 

docs/package.json

@@ -13,6 +13,7 @@
     "vite-svg-loader": "^4.0.0"
   },
   "dependencies": {
-    "@tresjs/cientos": "workspace:^"
+    "@tresjs/cientos": "workspace:^",
+    "@tweakpane/plugin-essentials": "^0.2.0"
   }
 }

playground/.eslintrc-auto-import.json

@@ -8,6 +8,7 @@
     "PropType": true,
     "Ref": true,
     "VNode": true,
+    "WritableComputedRef": true,
     "computed": true,
     "createApp": true,
     "customRef": true,
@@ -48,6 +49,7 @@
     "toRaw": true,
     "toRef": true,
     "toRefs": true,
+    "toValue": true,
     "triggerRef": true,
     "unref": true,
     "useAttrs": true,
@@ -57,8 +59,6 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "toValue": true,
-    "WritableComputedRef": true
+    "watchSyncEffect": true
   }
 }

playground/components.d.ts

@@ -8,8 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']
-    BackdropDemo: typeof import('./src/components/BackdropDemo.vue')['default']
-    ContactShadowsDemo: typeof import('./src/components/ContactShadowsDemo.vue')['default']
     EnvironmentDemo: typeof import('./src/components/EnvironmentDemo.vue')['default']
     GlassMaterialDemo: typeof import('./src/components/GlassMaterialDemo.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
@@ -18,8 +16,6 @@ declare module 'vue' {
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ScrollDemo: typeof import('./src/components/ScrollDemo.vue')['default']
-    SVGDemo: typeof import('./src/components/SVGDemo.vue')['default']
     TheGizmos: typeof import('./src/components/TheGizmos.vue')['default']
     UseVideoTextureDemo: typeof import('./src/components/useVideoTextureDemo.vue')['default']
     WobbleMaterial: typeof import('./src/components/WobbleMaterial.vue')['default']

playground/src/pages/index.vue

@@ -2,6 +2,6 @@
 
 <template>
   <Suspense>
-    <GlassMaterialDemo />
+    <ModelsDemo />
   </Suspense>
 </template>

playground/src/components/useVideoTextureDemo.vue → playground/src/pages/loaders/useVideoTextureDemo.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useVideoTexture, OrbitControls } from '@tresjs/cientos'
+import { useVideoTexture, OrbitControls, Sphere } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { SRGBColorSpace, NoToneMapping } from 'three'
-import { Sphere } from '../../../src/core'
 
 const gl = {
   clearColor: '#333',