docs: improve scroll-docs (#235)

Tresjs · Sep 27, 2023 · 3023776 · 3023776
1 parent 688b511
commit 3023776
Show file tree

Hide file tree

Showing 7 changed files with 293 additions and 139 deletions.
diff --git a/docs/.vitepress/theme/components/ScrollControlsDemo.vue b/docs/.vitepress/theme/components/ScrollControlsDemo.vue
@@ -1,109 +1,21 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { ScrollControls, Stars, Sphere, Box } from '@tresjs/cientos'
-import { SRGBColorSpace, NoToneMapping } from 'three'
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-
-const scRef = ref()
-const sphereRef = ref()
-const boxRef = ref()
-const progress = ref(0)
-
-watchEffect(() => {
-  // eslint-disable-next-line no-console
-  console.log('jaime ~ progress:', progress.value)
-})
-
-const gl = {
-  clearColor: '#333',
-  alpha: true,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-
-useControls('fpsgraph')
-useControls({
-  progress: progress.value,
-})
-
-const { onLoop } = useRenderLoop()
-onLoop(() => {
-  if (boxRef.value) {
-    boxRef.value.value.rotation.x = progress.value * 10
-    boxRef.value.value.rotation.y = progress.value * 2
-  }
-})
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
 </script>
 
 <template>
   <TresCanvas
-    v-bind="gl"
     class="important-absolute"
+    clear-color="#333"
   >
     <TresPerspectiveCamera :position="[0, 2, 5]" />
     <Stars :radius="1" />
     <TresGridHelper :args="[10, 10]" />
-
-    <ScrollControls
-      ref="scRef"
-      v-model="progress"
-      :distance="20"
-      :smooth-scroll="0.1"
-    >
-      <Sphere
-        ref="sphereRef"
-        :scale="0.1"
-        :position="[1, 2, 0]"
-      />
-      <Box
-        ref="boxRef"
-        :scale="0.5"
-        :color="0xff00ff"
-        :position="[-1, 1, 0]"
-      />
-    </ScrollControls>
+    <ScrollControls />
+    <Box
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
   </TresCanvas>
-  <main>
-    <section>
-      <h1>First section</h1>
-    </section>
-
-    <section>
-      <h2>Second section</h2>
-    </section>
-    <section>
-      <h3>Third section</h3>
-    </section>
-  </main>
 </template>
-
-<style scoped>
-.fixed {
-  position: fixed;
-  top: 0;
-  right: 0;
-}
-.scroll {
-  height: 200vh;
-}
-.container {
-  height: 50vh;
-  overflow: scroll;
-}
-main {
-  background-color: transparent;
-}
-section {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  outline: 1px solid red;
-}
-h1,
-h2,
-h3 {
-  color: #f7f7f7;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue b/docs/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls horizontal />
+    <Box
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsPagesDemo.vue b/docs/.vitepress/theme/components/ScrollControlsPagesDemo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls
+      :pages="20"
+      :distance="20"
+      :smooth-scroll="0.05"
+    />
+    <Box
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue b/docs/.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+
+const boxRef = ref()
+const progress = ref(0)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+    boxRef.value.value.position.x = progress.value * 4.5
+  }
+})
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls
+      v-model="progress"
+      :distance="0"
+    />
+    <Box
+      ref="boxRef"
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsProgressDemo.vue b/docs/.vitepress/theme/components/ScrollControlsProgressDemo.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+
+const boxRef = ref()
+const progress = ref(0)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+    boxRef.value.value.position.x = progress.value * 4.5
+  }
+})
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls
+      v-model="progress"
+      :distance="2"
+    />
+    <Box
+      ref="boxRef"
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsSlotsDemo.vue b/docs/.vitepress/theme/components/ScrollControlsSlotsDemo.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Sphere, Box } from '@tresjs/cientos'
+
+const scRef = ref()
+const boxRef = ref()
+const progress = ref(0)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+  }
+})
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#333"
+    class="important-absolute"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <Sphere
+      :scale="0.1"
+      :position="[1, 2, 0]"
+    />
+    <ScrollControls
+      ref="scRef"
+      v-model="progress"
+      :distance="20"
+      :smooth-scroll="0.1"
+    >
+      <Box
+        ref="boxRef"
+        :scale="0.5"
+        :color="0xff00ff"
+        :position="[-1, 1, 0]"
+      />
+    </ScrollControls>
+  </TresCanvas>
+</template>