feat: backdrop stage abstraction

docs/.vitepress/config.ts

@@ -84,6 +84,13 @@ export default defineConfig({
           { text: 'Tube', link: '/guide/shapes/tube' },
         ],
       },
+      {
+        text: 'Staging',
+        collapsed: true,
+        items: [
+          { text: 'Backdrop', link: '/guide/staging/backdrop' },
+        ]
+      },
       {
         text: 'Misc',
         items: [{ text: 'useTweakpane', link: '/guide/misc/use-tweakpane' }],

docs/.vitepress/theme/components/BackdropDemo.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { PCFSoftShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { useProgress, Backdrop, GLTFModel } from '@tresjs/cientos'
+import { ref } from 'vue'
+import { watch } from 'vue'
+import { watchEffect } from 'vue'
+
+const gl = {
+  clearColor: 'pink',
+  shadows: true,
+  alpha: false,
+  shadowMapType: PCFSoftShadowMap,
+  outputColorSpace: SRGBColorSpace,
+}
+
+const model = ref(null)
+
+watch(model, ({ value }) => {
+  value.traverse(child => {
+    if (child.isMesh) {
+      child.castShadow = true
+    }
+  })
+})
+
+function onCameraChange(e) {
+  console.log('camera changed', e)
+}
+
+const cameraRef = ref(null)
+
+watchEffect(() => {
+  if (cameraRef.value) {
+    cameraRef.value.lookAt(0, 5, 0)
+  }
+})
+
+const { hasFinishLoading, progress, items } = await useProgress()
+</script>
+
+<template>
+  <div class="aspect-video w-full relative">
+    <Transition
+      name="fade-overlay"
+      enter-active-class="opacity-1 transition-opacity duration-200"
+      leave-active-class="opacity-0 transition-opacity duration-200"
+    >
+      <div
+        v-show="!hasFinishLoading"
+        class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+      >
+        <div class="w-200px">Loading... {{ progress }} %</div>
+      </div>
+    </Transition>
+    <TresCanvas v-bind="gl">
+      <TresPerspectiveCamera
+        ref="camerRef"
+        :position="[0.07224002153117198, 0.5245876539770153, 2.9469498522622626]"
+        :rotation="[-0.04419077275543715, 0.025561987075415186, 0.0011302162688196786]"
+        :fov="35"
+      />
+      <Suspense>
+        <GLTFModel ref="model" cast-shadow :path="'/card-bo-bot/CardBoBotv3.glb'" draco :rotation="[0, 0.5, 0]" />
+      </Suspense>
+      <Backdrop :floor="1.5" :scale="[10, 3, 3]" :position="[0, 0, -3]" receive-shadow>
+        <TresMeshPhysicalMaterial :roughness="1" color="pink" :side="2" />
+      </Backdrop>
+      <TresAmbientLight :intensity="0.5" />
+      <TresDirectionalLight
+        :args="['white', 2]"
+        cast-shadow
+        :position="[3, 4, 4]"
+        :look-at="[0, 0, 0]"
+        :shadow-mapSize-width="256"
+        :shadow-mapSize-height="256"
+        :shadow-camera-near="0.5"
+        :shadow-camera-left="-10"
+      />
+      <TresDirectionalLight
+        :args="['pink', 1]"
+        cast-shadow
+        :position="[-3, 2, 4]"
+        :look-at="[0, 0, 0]"
+        :shadow-mapSize-width="256"
+        :shadow-mapSize-height="256"
+        :shadow-camera-near="0.5"
+        :shadow-camera-left="-10"
+      />
+    </TresCanvas>
+  </div>
+</template>

docs/.vitepress/theme/style.css

@@ -62,3 +62,11 @@
   color: var(--vp-button-alt-text);
   background-color: var(--vp-button-alt-bg);
 }
+
+.demo-scene {
+  height: auto;
+  margin: 2rem 0;
+  overflow: hidden;
+  aspect-ratio: 16/9;
+  border-radius: 8px;
+}

docs/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    BackdropDemo: typeof import('./.vitepress/theme/components/BackdropDemo.vue')['default']
     Feather: typeof import('./.vitepress/theme/components/Feather.vue')['default']
     LeviosoDemo: typeof import('./.vitepress/theme/components/LeviosoDemo.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']

docs/guide/staging/backdrop.md

@@ -0,0 +1,23 @@
+# Backdrop
+
+<ClientOnly>
+  <Suspense>
+    <BackdropDemo class="demo-scene" />
+  </Suspense>
+</ClientOnly>
+
+The `cientos` package provides a `<Backdrop />` component. It's just a curved plane, like a studio backdrop. Meant is for presentational purposes, to break up light and shadows more interestingly.
+
+## Usage
+
+```html
+<Backdrop />
+
+// Backdrop with a custom material
+<Backdrop  
+  :floor="1.5" 
+  :segments="20" 
+  recieve-shadow>
+    <TresMeshPhysicalMaterial color="orange" :roughness="1" />
+</Backdrop>
+```

docs/package.json

@@ -9,12 +9,12 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "unocss": "^0.53.0",
+    "unocss": "^0.53.5",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.1"
+    "vitepress": "1.0.0-beta.5"
   },
   "dependencies": {
     "@tresjs/cientos": "workspace:^",
-    "gsap": "^3.11.5"
+    "gsap": "^3.12.2"
   }
 }

playground/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    BackdropDemo: typeof import('./src/components/BackdropDemo.vue')['default']
     ContactShadowsDemo: typeof import('./src/components/ContactShadowsDemo.vue')['default']
     EnvironmentDemo: typeof import('./src/components/EnvironmentDemo.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']

playground/src/components/BackdropDemo.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { OrbitControls, Backdrop } from '@tresjs/cientos'
+
+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 />
+    <Backdrop :floor="1.5" :scale="[20, 5, 5]">
+        <TresMeshPhysicalMaterial  :roughness="1" color="#efefef" :side="2" />
+    </Backdrop>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/components/WobbleMaterial.vue

@@ -22,7 +22,7 @@ const context = ref()
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <TresMesh>
       <TresTorusGeometry />
-      <MeshWobbleMaterial color="orange" :speed="10" :factor="5" />
+      <MeshWobbleMaterial color="orange" :speed="10" :factor="8" />
     </TresMesh>
     <TresGridHelper :args="[10, 10]" />
     <TresAmbientLight :intensity="1" />

playground/src/pages/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 </script>
 <template>
-  <Suspense>
-    <ScrollDemo />
-  </Suspense>
+    <BackdropDemo/>
 </template>