feat: adapt code and playgrounds to latest changes on ecosystem

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

@@ -52,7 +52,7 @@
     "docs:preview": "vitepress preview"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=4.0",
+    "@tresjs/core": ">=5.0",
     "three": ">=0.169",
     "vue": ">=3.4"
   },

playground/src/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>

playground/src/components/Ducky.vue

@@ -1,16 +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 })
 
-model.traverse((child) => {
-  if (child.isMesh) {
-    child.castShadow = 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>

playground/src/pages/postprocessing/on-demand.vue

@@ -13,10 +13,6 @@ function onRender() {
 }
 
 const canvas = ref<InstanceType<typeof TresCanvas>>()
-
-function onControlChange() {
-  canvas.value?.context?.invalidate()
-}
 </script>
 
 <template>
@@ -30,7 +26,7 @@ function onControlChange() {
       :position="[5, 5, 5]"
       :look-at="[0, 0, 0]"
     />
-    <OrbitControls @change="onControlChange" />
+    <OrbitControls />
     <TresMesh
       :position="[-3.5, 1, 0]"
     >

src/core/pmndrs/DepthOfFieldPmndrs.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { BlendFunction } from 'postprocessing'
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 import { DepthOfFieldEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
@@ -44,7 +44,7 @@ export interface DepthOfFieldPmndrsProps {
 
 <script lang="ts" setup>
 const props = defineProps<DepthOfFieldPmndrsProps>()
-const { camera } = useTresContext()
+const { camera } = useTres()
 
 const { pass, effect } = useEffectPmndrs(() => new DepthOfFieldEffect(camera.value, props), props)
 defineExpose({ pass, effect })