feat: update demos to v4 (Tresjs#166)

* chore: update deps * feat(array-cameras): update to v4 * chore: clean up brickelangelo * fix: cult-of-the-lamb * feat: updated dancing-blob * chore: remove tweakpane from portal * chore: remove unused tag * feat: fixed broken experiments * feat: fixed issue with parallax on scrollscontrols demo
damienmontastier · Sep 1, 2024 · ea12f07 · ea12f07
1 parent 377a3f2
commit ea12f07
Show file tree

Hide file tree

Showing 46 changed files with 4,109 additions and 4,125 deletions.
diff --git a/app.vue b/app.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="">
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
diff --git a/components/content/array-cameras/model.vue → ...ts/content/array-cameras/KnightRigged.vue b/components/content/array-cameras/model.vue → ...ts/content/array-cameras/KnightRigged.vue
@@ -32,17 +32,15 @@ watch(animation, (value) => {
   currentAction.play()
 })
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (mixer) {
     mixer.update(0.01)
   }
 })
 </script>
 
 <template>
-  <Suspense>
-    <primitive :object="model" />
-  </Suspense>
+  <primitive :object="model" />
 </template>
diff --git a/components/content/array-cameras/index.vue b/components/content/array-cameras/index.vue
@@ -79,7 +79,7 @@ useControls('fpsgraph')
       :position="[0, 2, 5]"
     />
     <Suspense>
-      <model />
+      <KnightRigged />
     </Suspense>
     <TresAmbientLight
       :color="0xffffff"

diff --git a/components/content/brickelangelo-david/David.vue b/components/content/brickelangelo-david/David.vue
@@ -7,7 +7,6 @@ import { useMouse } from '@vueuse/core'
 const groupRef = ref<Group>()
 
 const gltf = await useGLTF('/models/legolangelo/david.glb')
-console.log(gltf)
 
 const david = gltf.nodes.David
 
@@ -25,40 +24,6 @@ const lego = legoNodes.LegoPiece
 const legoMaterial = new MeshPhongMaterial({ color: 'lightgray' })
 const legoInstancedMesh = new InstancedMesh(lego.geometry, legoMaterial, instanceCount)
 
-/* function pointInsideDavidMesh(point) {
-  const raycaster = new Raycaster()
-  const direction = new Vector3(1, 0, 0) // Arbitrary direction
-  const origin = point.clone()
-  raycaster.set(origin, direction)
-
-  const intersects = raycaster.intersectObject(david)
-
-  return intersects.length % 2 === 1
-}
-
-const dummy = new Object3D()
-let instanceIndex = 0
-
-david.geometry.computeBoundingBox()
-const boundingBox = david.geometry.boundingBox
-const legoSize = 1 // Adjust the size of the lego piece
-
-console.log(boundingBox)
-
-for (let x = boundingBox.min.x; x < boundingBox.max.x; x += legoSize) {
-  for (let y = boundingBox.min.y; y < boundingBox.max.y; y += legoSize) {
-    for (let z = boundingBox.min.z; z < boundingBox.max.z; z += legoSize) {
-      const point = new Vector3(x, y, z)
-      if (pointInsideDavidMesh(point)) {
-        dummy.position.copy(point)
-        dummy.updateMatrix()
-        legoInstancedMesh.setMatrixAt(instanceIndex++, dummy.matrix)
-      }
-    }
-  }
-}
-
-legoInstancedMesh.instanceMatrix.needsUpdate = true */
 
 useControls('fpsgraph')
 

diff --git a/components/content/brickelangelo-david/index.vue b/components/content/brickelangelo-david/index.vue
@@ -17,7 +17,6 @@ const gl = {
 }
 
 const lightRef = ref()
-const sphereLight = ref()
 
 watch([x, y], () => {
   // Normalize the mouse position to a range that's relevant for your scene
@@ -32,11 +31,10 @@ watch([x, y], () => {
 
 const cameraRef = ref()
 const cameraPosition = ref(new Vector3(-0.63, 2, 0.63))
-const cameraLookAt = ref(new Vector3(0, 0, 0))
 
 useControls({ cameraPosition })
 
-const { hasFinishLoading, progress, items } = await useProgress()
+const { hasFinishLoading, progress } = await useProgress()
 
 watch(hasFinishLoading, (hasFinishLoading) => {
   if (!cameraRef.value || hasFinishLoading) return

diff --git a/components/content/cult-of-the-lamb/Lamb.vue b/components/content/cult-of-the-lamb/Lamb.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import { LoopOnce } from 'three'
 
-const { nodes, animations } = await useGLTF('/models/cult-of-the-lamb/Lamb.glb', { draco: true })
-console.log(animations)
+const { scene, nodes, animations } = await useGLTF('/models/cult-of-the-lamb/lamb-v2.glb', { draco: true })
+
 const lamb = nodes['rig']
 
-const { actions, mixer } = useAnimations(animations, lamb)
+const { actions } = useAnimations(animations, lamb)
 
-const currentAction = ref(actions['rigAction'])
+const currentAction = ref(actions['elevate'])
 
 currentAction.value.clampWhenFinished = true
 currentAction.value.loop = LoopOnce
 currentAction.value.play()
 </script>
 
 <template>
-  <Levioso>
-    <primitive :object="lamb" />
-  </Levioso>
+  <TresGroup>
+    <Levioso>
+      <primitive :object="scene" />
+    </Levioso>
+  </TresGroup>
 </template>
diff --git a/components/content/cult-of-the-lamb/Ritual.vue b/components/content/cult-of-the-lamb/Ritual.vue
@@ -46,15 +46,17 @@ materials['Flame'].emissive = new Color('#C55B37')
 </script>
 
 <template>
-  <primitive :object="pentagram" />
-  <template v-for="symbol in symbols">
-    <Levioso>
-      <primitive :object="symbol" />
-    </Levioso>
-  </template>
-
-  <primitive
-    v-for="candle in candles"
-    :object="candle"
-  />
+  <TresGroup>
+    <primitive :object="pentagram" />
+    <template v-for="symbol in symbols">
+      <Levioso>
+        <primitive :object="symbol" />
+      </Levioso>
+    </template>
+
+    <primitive
+      v-for="candle in candles"
+      :object="candle"
+    />
+  </TresGroup>
 </template>
diff --git a/components/content/cult-of-the-lamb/index.vue b/components/content/cult-of-the-lamb/index.vue
@@ -2,8 +2,7 @@
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
-import { OrbitControls } from '@tresjs/cientos'
-import { EffectComposer, Bloom } from '@tresjs/post-processing'
+/* import { EffectComposer, Bloom } from '@tresjs/post-processing' */
 import { BlendFunction } from 'postprocessing'
 
 const gl = {
@@ -19,7 +18,7 @@ const bloomParams = reactive({
   luminanceThreshold: 0.1,
   luminanceSmoothing: 0.3,
   mipmapBlur: true,
-  intensity: 0.3,
+  intensity: 0.4,
   radius: 0.5,
   disableRender: true,
   blendFunction: BlendFunction.ADD,
@@ -35,15 +34,17 @@ const bloomParams = reactive({
     <Suspense>
       <Lamb />
     </Suspense>
-    <Suspense>
-      <Ritual />
-    </Suspense>
+
     <TresAmbientLight :args="[0xffffff, 0.5]" />
+
     <Suspense>
       <EffectComposer>
         <Bloom v-bind="bloomParams" />
       </EffectComposer>
     </Suspense>
+    <Suspense>
+      <Ritual />
+    </Suspense>
     <Backdrop  
       :floor="1.5" 
       :segments="20"

diff --git a/components/content/dancing-blob/TheDancingBlob.vue b/components/content/dancing-blob/TheDancingBlob.vue
@@ -0,0 +1,82 @@
+<!-- Github Luckystriike: https://github.com/luckystriike22/TresJsPlayground/ -->
+<script lang="ts" setup>
+import vertexShader from './shaders/vertex.glsl'
+import fragmentShader from './shaders/fragment.glsl'
+
+import { Vector2 } from 'three'
+
+const props = defineProps<{
+  analyser: any
+  dataArray: any
+}>()
+
+// composables
+const { onBeforeRender } = useLoop()
+
+// refs
+const blobRef = shallowRef<any>(null)
+
+
+onBeforeRender(({ elapsed }) => {
+  if (blobRef.value && props.analyser && props.dataArray) {
+    props.analyser?.getByteFrequencyData(props.dataArray);
+
+    // calc average frequency
+    let sum = 0;
+    for (let i = 0; i < props.dataArray?.length; i++) {
+      sum += props.dataArray[i];
+    }
+
+    uniforms.value.u_frequency.value = sum > 0 ? sum / props.dataArray?.length : 0;
+    uniforms.value.u_time.value = elapsed
+    blobRef.value.rotation.x += 0.01
+  }
+})
+
+
+// shader
+// set props to pass into the shader
+const uniforms = ref({
+  u_resolution: { type: 'V2', value: new Vector2(window.innerWidth, window.innerHeight) },
+  u_time: { type: 'f', value: 0.0 },
+  u_frequency: { type: 'f', value: 0.0 },
+  u_amplitude: { type: 'f', value: 1.5 }
+});
+
+
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[13, 0, 0]" />
+  <OrbitControls />
+  <TresMesh ref="blobRef">
+    <TresIcosahedronGeometry :args="[4, 80]"></TresIcosahedronGeometry>
+    <TresShaderMaterial wireframe :uniforms="uniforms" :fragment-shader="fragmentShader"
+      :vertex-shader="vertexShader" />
+  </TresMesh>
+  <TresDirectionalLight :position="[1, 1, 1]" />
+  <TresAmbientLight :intensity="1" />
+</template>
+
+<style scoped>
+.gitBtn {
+  margin-bottom: 10px;
+  margin-right: 10px;
+  z-index: 10;
+  color: white;
+}
+
+.blobPermissionDialog {
+  height: 100vh;
+  justify-content: center;
+  display: flex;
+  background-color: #0c1a30;
+  width: 100vw;
+  color: white;
+  font-size: x-large;
+}
+
+.blobPermissionDialog p {
+  width: 700px;
+}
+</style>