chore(deps): dependency updates in nuxt playground (#135)

* updated dependencies

* cleanup

* cleanup

* lint fixes

---------

Co-authored-by: Tino Koch <>
Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

Author: Tinoooo

playground-nuxt/nuxt.config.ts

@@ -15,4 +15,5 @@ export default defineNuxtConfig({
       dedupe: ['three', '@tresjs/core', '@vueuse/core'],
     },
   },
+  compatibilityDate: '2024-10-13',
 })

playground-nuxt/package.json

@@ -10,9 +10,10 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@tresjs/cientos": "^3.5.1",
-    "@tresjs/nuxt": "^1.2.2",
-    "@types/three": "^0.152.1"
+    "@tresjs/cientos": "^4.0.3",
+    "@tresjs/nuxt": "^3.0.7",
+    "@tresjs/post-processing": "^0.7.1",
+    "@types/three": "^0.169.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

playground-nuxt/pages/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { Bloom, EffectComposer } from '@tresjs/post-processing/pmndrs'
-import { BlendFunction } from 'postprocessing'
-import { BasicShadowMap, Color, NoToneMapping, SRGBColorSpace } from 'three'
-import { reactive } from 'vue'
+import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -12,13 +10,6 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
-
-const bloomParams = reactive({
-  luminanceThreshold: 0.2,
-  luminanceSmoothing: 0.3,
-  intensity: 4.0,
-  blendFunction: BlendFunction.ADD,
-})
 </script>
 
 <template>
@@ -30,17 +21,13 @@ const bloomParams = reactive({
     <OrbitControls />
     <TresMesh>
       <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshStandardMaterial
-        color="hotpink"
-        :emissive="new Color('hotpink')"
-        :emissive-intensity="9"
-      />
+      <TresMeshNormalMaterial />
     </TresMesh>
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
       <EffectComposer>
-        <Bloom v-bind="bloomParams" />
+        <Glitch />
       </EffectComposer>
     </Suspense>
   </TresCanvas>