feat!: v3 (#209)

Author: alvarosabu

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [3.0.0-next.0](https://github.com/Tresjs/post-processing/compare/2.4.0...3.0.0-next.0) (2025-06-24)
+
+### Features
+
+* adapt code and playgrounds to latest changes on ecosystem ([#207](https://github.com/Tresjs/post-processing/issues/207)) ([39ad650](https://github.com/Tresjs/post-processing/commit/39ad650786d565cbaafb300cabfa51978c0fb73d)), closes [#208](https://github.com/Tresjs/post-processing/issues/208)
+
+### Bug Fixes
+
+* update import paths for post-processing components in documentation ([#206](https://github.com/Tresjs/post-processing/issues/206)) ([7289c15](https://github.com/Tresjs/post-processing/commit/7289c152b81ea9e386f7d4621e55fc61292b505f))
+
 ## [2.4.0](https://github.com/Tresjs/post-processing/compare/2.3.1...2.4.0) (2025-05-26)
 
 ### Features

docs/.vitepress/theme/components/BlenderCube.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
+import { computed, shallowRef } from 'vue'
 
-const { nodes }
-= await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
-const model = nodes.Cube
+const { nodes } = useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+  { draco: true },
+)
 
-model.traverse((child) => {
-  if (child.isMesh) {
-    child.castShadow = true
-  }
-})
+const modelRef = shallowRef<TresObject | null>(null)
+
+const model = computed(() => nodes.value?.BlenderCube)
 </script>
 
 <template>
-  <primitive :object="model" />
+  <primitive v-if="model" ref="modelRef" :object="model" />
 </template>

docs/.vitepress/theme/components/Ducky.vue

@@ -1,10 +1,20 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import { Mesh } from 'three'
+import { watch } from 'vue'
 
-const { scene: model }
-  = await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
+const { state }
+  = useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
+
+watch(state, (model) => {
+  model.scene.traverse((child) => {
+    if (child instanceof Mesh) {
+      child.castShadow = true
+    }
+  })
+})
 </script>
 
 <template>
-  <primitive :object="model" />
+  <primitive v-if="state" :object="state.scene" />
 </template>

docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue

@@ -40,17 +40,13 @@ const effectParams = ref({
       :position="[-5, 0.5, -10]"
       :scale="0.5"
     >
-      <Suspense>
-        <Ducky />
-      </Suspense>
+      <Ducky />
     </TresGroup>
     <TresGroup
       :position="[0, 0.5, 0]"
       :scale="0.5"
     >
-      <Suspense>
-        <BlenderCube />
-      </Suspense>
+      <BlenderCube />
     </TresGroup>
     <TresAmbientLight />
     <TresDirectionalLight

docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue

@@ -30,7 +30,7 @@ const { angle, scale, blendFunction } = useControls({
   },
 })
 
-const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/suzanne/suzanne.glb', { draco: true })
+const { state } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/suzanne/suzanne.glb', { draco: true })
 </script>
 
 <template>
@@ -44,7 +44,15 @@ const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets
       />
       <OrbitControls />
 
-      <primitive :scale="2" :rotation-x="Math.PI / -5" :rotation-y="Math.PI" :position-y=".25" :position-z="0.5" :object="scene" />
+      <primitive
+        v-if="state"
+        :scale="2"
+        :rotation-x="Math.PI / -5"
+        :rotation-y="Math.PI"
+        :position-y=".25"
+        :position-z="0.5"
+        :object="state.scene"
+      />
 
       <ContactShadows
         :opacity="1"

docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue

@@ -18,8 +18,8 @@ const glComposer = {
   multisampling: 4,
 }
 
-const { scene: scenePlantJar } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/plant-jar/plant-jar.glb', { draco: true })
-const { scene: sceneWatermelon } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/watermelon/watermelon_fruit.glb', { draco: true })
+const { state: scenePlantJar } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/plant-jar/plant-jar.glb', { draco: true })
+const { state: sceneWatermelon } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/watermelon/watermelon_fruit.glb', { draco: true })
 
 const effectProps = reactive({
   blendFunction: BlendFunction.NORMAL,
@@ -51,8 +51,19 @@ watch(enabled, () => {
 
       <TresDirectionalLight />
 
-      <primitive :position-x="-3" :position-y="-3.5" :scale="5" :object="scenePlantJar" />
-      <primitive :position-x="4" :scale="20" :object="sceneWatermelon" />
+      <primitive
+        v-if="scenePlantJar"
+        :position-x="-3"
+        :position-y="-3.5"
+        :scale="5"
+        :object="scenePlantJar.scene"
+      />
+      <primitive
+        v-if="sceneWatermelon"
+        :position-x="4"
+        :scale="20"
+        :object="sceneWatermelon.scene"
+      />
 
       <ContactShadows
         :opacity=".25"

docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue

@@ -26,9 +26,7 @@ const { effectComposer } = useRouteDisposal()
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
-    <Suspense>
-      <BlenderCube />
-    </Suspense>
+    <BlenderCube />
     <EffectComposerPmndrs ref="effectComposer">
       <DepthOfFieldPmndrs :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
       <VignettePmndrs :darkness="0.9" :offset="0.3" />

docs/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */

docs/package.json

@@ -9,8 +9,8 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "^4.1.0",
-    "@tresjs/core": "^4.3.2",
+    "@tresjs/cientos": "5.0.0-next.2",
+    "@tresjs/core": "5.0.0-next.3",
     "@tresjs/post-processing": "workspace:^",
     "gsap": "^3.12.7"
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/post-processing",
   "type": "module",
-  "version": "2.4.0",
+  "version": "3.0.0-next.0",
   "packageManager": "pnpm@10.6.3",
   "description": "Post-processing library for TresJS",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -52,7 +52,7 @@
     "docs:preview": "vitepress preview"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=4.0",
+    "@tresjs/core": ">=5.0",
     "three": ">=0.169",
     "vue": ">=3.4"
   },
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",
-    "@tresjs/core": "^4.3.2",
+    "@tresjs/core": "5.0.0-next.6",
     "@tresjs/eslint-config": "^1.4.0",
     "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
     "@types/three": "^0.172.0",