feat(ScreenSpace): add component, demo, docs (#536)

* feat(ScreenSpace): add component, demo, docs * chore: lint * chore: remove unnecesary variable prop --------- Co-authored-by: alvarosabu <[email protected]>
Tresjs · Dec 4, 2024 · e43f112 · e43f112
1 parent 5bae4de
commit e43f112
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 0 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -78,6 +78,7 @@ export default defineConfig({
           { text: 'Edges', link: '/guide/abstractions/edges' },
           { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
           { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
+          { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
           { text: 'Outline', link: '/guide/abstractions/outline' },
           { text: 'Image', link: '/guide/abstractions/image' },
           { text: 'Billboard', link: '/guide/abstractions/billboard' },

diff --git a/docs/.vitepress/theme/components/ScreenSpaceDemo.vue b/docs/.vitepress/theme/components/ScreenSpaceDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OrbitControls, ScreenSpace } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <ScreenSpace :depth="5">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts
@@ -17,6 +17,7 @@ export default [
       },
       { text: 'Sampler', link: '/guide/abstractions/sampler' },
       { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
+      { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
       { text: 'Outline', link: '/guide/abstractions/outline' },
       { text: 'Image', link: '/guide/abstractions/image' },
       { text: 'Billboard', link: '/guide/abstractions/billboard' },

diff --git a/docs/guide/abstractions/screen-space.md b/docs/guide/abstractions/screen-space.md
@@ -0,0 +1,17 @@
+# ScreenSpace
+
+<DocsDemo>
+  <ScreenSpaceDemo />
+</DocsDemo>
+
+`<ScreenSpace />` wraps its children in a `<TresGroup />` and positions them in front of the active camera at `:depth`.
+
+## Usage
+
+<<< @/.vitepress/theme/components/ScreenSpaceDemo.vue
+
+## Props
+
+| Prop             | Description              | Default       |
+| :--------------- | :----------------------- | ------------- |
+| `depth`          | Distance from the camera | `1`           |
diff --git a/playground/vue/src/pages/abstractions/ScreenSpaceDemo.vue b/playground/vue/src/pages/abstractions/ScreenSpaceDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OrbitControls, ScreenSpace } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <ScreenSpace :depth="5">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/router/routes/abstractions.ts b/playground/vue/src/router/routes/abstractions.ts
@@ -64,6 +64,11 @@ export const abstractionsRoutes = [
     name: 'AnimatedSprite',
     component: () => import('../../pages/abstractions/AnimatedSpriteDemo.vue'),
   },
+  {
+    path: '/abstractions/screen-space',
+    name: 'ScreenSpace',
+    component: () => import('../../pages/abstractions/ScreenSpaceDemo.vue'),
+  },
   {
     path: '/abstractions/outline',
     name: 'Outline',

diff --git a/src/core/abstractions/ScreenSpace.vue b/src/core/abstractions/ScreenSpace.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { useLoop } from '@tresjs/core'
+
+export interface ScreenSpaceProps {
+  depth?: number
+}
+
+withDefaults(defineProps<ScreenSpaceProps>(), {
+  depth: -1,
+})
+
+const outerRef = shallowRef()
+
+useLoop().onBeforeRender(({ camera }) => {
+  if (outerRef.value) {
+    outerRef.value.quaternion.copy(camera.quaternion)
+    outerRef.value.position.copy(camera.position)
+  }
+})
+
+defineExpose({ instance: outerRef })
+</script>
+
+<template>
+  <TresGroup ref="outerRef">
+    <TresGroup :position-z="-depth">
+      <slot></slot>
+    </TresGroup>
+  </TresGroup>
+</template>
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
@@ -8,6 +8,7 @@ import MouseParallax from './MouseParallax.vue'
 import Outline from './Outline/component.vue'
 import PositionalAudio from './PositionalAudio.vue'
 import Reflector from './Reflector.vue'
+import ScreenSpace from './ScreenSpace.vue'
 import Text3D from './Text3D.vue'
 import { useAnimations } from './useAnimations'
 import Fbo from './useFBO/component.vue'
@@ -31,6 +32,7 @@ export {
   PositionalAudio,
   Reflector,
   Sampler,
+  ScreenSpace,
   Text3D,
   useAnimations,
 }