feat: of scroll controls showcase (Tresjs#52)

* chore: draft of scroll controls showcase * feat: scroll portfolio example
damienmontastier · Jul 12, 2023 · 4910ac7 · 4910ac7
1 parent 4992056
commit 4910ac7
Show file tree

Hide file tree

Showing 11 changed files with 1,145 additions and 982 deletions.
diff --git a/components/content/TresBasic.vue b/components/content/TresBasic.vue
@@ -31,3 +31,5 @@ const gl = {
     <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
   </TresCanvas>
 </template>
+
+
diff --git a/components/content/scroll-controls-demo/LowPolyPlanet.vue b/components/content/scroll-controls-demo/LowPolyPlanet.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { TresObject3D } from '@tresjs/core';
+import { shallowRef } from 'vue'
+
+const props = defineProps<{
+  progress: number
+}>()
+
+const { progress } = toRefs(props)
+
+const { nodes } = await useGLTF(
+  '/models/low-poly-planet/low-poly-planet-v3.glb',
+)
+
+const planet = nodes['Planet'] as TresObject3D
+const planetRef = shallowRef()
+const clouds = Object.values(nodes).filter(node => node.name.includes('Cloud'))
+const cloudsRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+  if (!planet) return
+  planet.rotation.y -= delta * 0.004
+  planet.rotation.z -= delta * 0.002
+  planet.rotation.x -= delta * 0.005
+  planet.updateMatrixWorld()
+
+  /* if(cloudsRef.value) {
+    cloudsRef.value.forEach((cloud: TresObject3D) => {
+      cloud.rotation.x = -progress.value * 2
+    })
+  } */
+})
+</script>
+<template>
+  <TresGroup :position="[-2, 2, 0]">
+    <primitive ref="planetRef" :object="planet" />
+    <TresGroup :rotation="[0, -progress, 0]">
+      <primitive v-for="cloud in clouds" :object="cloud" :key="cloud.id" ref="cloudsRef" />
+    </TresGroup>
+
+  </TresGroup>
+</template>
diff --git a/components/content/scroll-controls-demo/Rocket.vue b/components/content/scroll-controls-demo/Rocket.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { TresObject3D } from '@tresjs/core';
+
+const props = defineProps<{
+  progress: number
+}>()
+
+const { progress } = toRefs(props)
+
+const { nodes } = await useGLTF(
+  '/models/low-poly-planet/rocket.glb',
+)
+
+const rocket = nodes['Model-Toy-Rocket'] as TresObject3D
+
+const rocketRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+
+    if (!rocket) return
+    rocket.rotation.y = - progress.value * Math.PI / 2 * 8
+
+    if(progress.value > 0.5) {
+      rocket.position.x = -Math.pow(progress.value,2) * 7
+    }
+
+    /* if(progress.value === 1) {
+      rocket.position.set(rocket.position.x + Math.random() * -.1, Math.random() * -.1, Math.random() * -.1)
+    } */
+})
+</script>
+<template>
+  <TresGroup :position="[7, 3, 0]" :scale="[0.4, 0.4, 0.4]" :rotate-z="Math.PI / 4">
+    <primitive ref="rocketRef" :object="rocket" />
+  </TresGroup>
+</template>
diff --git a/components/content/scroll-controls-demo/index.vue b/components/content/scroll-controls-demo/index.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import {  Stars, ScrollControls } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#0F4866',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+function lerp(start, end, t) {
+  return start * (1 - t) + end * t
+}
+
+const progress = ref(0)
+const scRef = ref()
+
+const cameraRef = ref()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (cameraRef.value) {
+    if(progress.value <= 0.5) {
+      cameraRef.value.position.x = -progress.value
+      cameraRef.value.position.z = -progress.value * 2  + 6
+    } else {
+      const t = (progress.value - 0.5) * 4  // Normalize progress from 0.5 to 1 to range 0 to 1
+      cameraRef.value.position.x = lerp(-0.5, 1, t*t) // Smoothly interpolate from -0.5 to 1 based on t
+    }
+  }
+})
+
+watchEffect(() => {
+  if(!cameraRef.value) return
+  console.log('jaime ~ progress:', {
+    progress: progress.value,
+    camera: cameraRef.value.position.x
+  })
+})
+</script>
+
+<template>
+  <main>
+    <section class="min-h-screen container flex justify-end items-center">
+      <div class="w-1/2 text-right">
+        <h2 class="text-4xl text-light font-extrabold ">Hi! 👋 I'm <span class="text-primary">AlvaroSabu</span></h2>
+
+      </div>
+    </section>
+    <section class="min-h-screen container flex justify-end items-center">
+      <div class="w-1/2 text-light text-right">
+        <h2 class="text-4xl font-extrabold mb-4">Welcome to <span class="text-primary">TresJS</span></h2>
+        <p class="font-italic">The coolest 3D solution for Vue </p>
+
+      </div>
+    </section>
+    <section class="min-h-screen container flex justify-end items-center">
+      <div class="w-1/2 text-light text-right">
+        <h2 class="text-4xl font-extrabold mb-4">Launch your 3D Portfolio</h2>
+        <p class="font-italic">And take it to the 🌕 🚀</p>
+
+      </div>
+    </section>
+  </main>
+
+    <TresCanvas v-bind="gl" window-size>
+      <TresPerspectiveCamera ref="cameraRef" :position="[0, 2, 5]"/>
+      <Stars :radius="1" />
+      <ScrollControls ref="scRef" 
+      v-model="progress"
+      :distance="10"
+      :smooth-scroll="0.1"
+      html-scroll
+      >
+      <Suspense>
+        <LowPolyPlanet :progress="progress" />
+      </Suspense>
+      <Suspense>
+        <Rocket :progress="progress" />
+      </Suspense>
+
+      </ScrollControls>
+      <TresAmbientLight :intensity="2" />
+      <TresPointLight color="#1BFFEF" :position="[0, 8, -16]" :intensity="8" cast-shadow />
+      <TresDirectionalLight ref="directionalLightRef" :position="[0, 2, 4]" :intensity="1" cast-shadow />
+    </TresCanvas>
+
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
+* {
+  font-family: 'Inter', sans-serif;
+}
+
+</style>
diff --git a/content/experiments/scroll-controls.md b/content/experiments/scroll-controls.md
@@ -0,0 +1,10 @@
+---
+thumbnail: /scroll-controls.png
+title: ScrollControls 
+author: alvarosabu
+description: A basic example of how to use the ScrollControl with TresJS and cientos
+tags: ['cientos', 'scroll', 'controls']
+---
+
+::scroll-controls-demo
+::
diff --git a/package.json b/package.json
@@ -14,21 +14,21 @@
     "@iconify-json/ic": "^1.1.13",
     "@iconify-json/logos": "^1.1.33",
     "@nuxt/content": "^2.7.0",
-    "@nuxt/image-edge": "1.0.0-rc.1-28119537.bfe30ab",
-    "@tresjs/cientos": "2.2.0",
+    "@nuxt/image-edge": "1.0.0-rc.1-28143901.afe4120",
+    "@tresjs/cientos": "2.3.0",
     "@tresjs/nuxt": "1.0.0",
-    "@types/three": "^0.152.1",
-    "@unocss/nuxt": "^0.53.4",
-    "gsap": "^3.12.1",
-    "nuxt": "^3.6.0",
-    "nuxt-svgo": "^3.1.0",
-    "postprocessing": "^6.32.1",
+    "@types/three": "^0.153.0",
+    "@unocss/nuxt": "^0.53.5",
+    "gsap": "^3.12.2",
+    "nuxt": "^3.6.2",
+    "nuxt-svgo": "^3.3.0",
+    "postprocessing": "^6.32.2",
     "vite-plugin-glsl": "^1.1.2",
     "vite-svg-loader": "^4.0.0"
   },
   "dependencies": {
-    "@tresjs/core": "^2.3.0",
+    "@tresjs/core": "^2.4.0",
     "@tresjs/post-processing": "^0.3.0",
-    "three": "^0.153.0"
+    "three": "^0.154.0"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -14,7 +14,6 @@ const { data: formattedExperiments } = await useAsyncData('/', () =>
   ),
 )
 
-console.log({formattedExperiments})
 </script>
 <template>
   <main>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,3 +31,5 @@ const gl = {
		<TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
		</TresCanvas>
		</template>
-Original file line number
+Diff line change
@@ Expand Up @@
       ),
     )
-    console.log({formattedExperiments})
     </script>
     <template>
       <main>
@@ Expand Down @@