chore: update dependencies for starter to new tresjs package releases

app.vue

@@ -23,8 +23,8 @@ const bloomParams = reactive({
   <div style="height: 100vh">
     <TresCanvas v-bind="gl">
       <TresPerspectiveCamera
-        :position="[-5.3, 8.3, 10.6]"
-        :look-at="[0, 0, 0]"
+          :position="[-5.3, 8.3, 10.6]"
+          :look-at="[0, 1, 0]"
       />
       <OrbitControls />
 

components/NuxtStones.vue

@@ -1,47 +1,69 @@
 <script setup lang="ts">
-import { MeshBasicMaterial, Texture } from 'three'
+import { MeshBasicMaterial } from 'three'
 
-const { nodes } = await useGLTF('/nuxt-stones.glb')
-const stonesTexture = await useTexture(['/RockBaked.png'])
-const littleStonesTexture = await useTexture(['/LittleRocksBaked.png'])
+const { state, nodes } = useGLTF('/nuxt-stones.glb')
 
-stonesTexture.flipY = false
-littleStonesTexture.flipY = false
+watch(state, (state) => {
+  console.log(state)
+})
+
+const stone = computed(() => nodes.value.Stone)
+const stoneCarved = computed(() => nodes.value.StoneCarved)
+const logo = computed(() => nodes.value.Logo)
+const littleStones = computed(() => Object.values(nodes.value).filter(node => node.name.includes('Stone00')))
+
+const { state: stonesTexture } = useTexture('/RockBaked.png')
+const { state: littleStonesTexture } = useTexture('/LittleRocksBaked.png')
 
-const stoneBakedMaterial = new MeshBasicMaterial({
-  map: stonesTexture as Texture,
+watch(stonesTexture, (texture) => {
+  texture.flipY = false
 })
 
-const LittleStonesBakedMaterial = new MeshBasicMaterial({
-  map: littleStonesTexture as Texture,
+watch(littleStonesTexture, (texture) => {
+  texture.flipY = false
 })
 
-nodes.Stone.material = stoneBakedMaterial
-nodes.StoneCarved.material = stoneBakedMaterial
+const stoneBakedMaterial = computed(() => new MeshBasicMaterial({
+  map: stonesTexture.value,
+}))
 
-nodes.Logo.material.emissiveIntensity = 10
+const littleStonesBakedMaterial = computed(() => new MeshBasicMaterial({
+  map: littleStonesTexture.value,
+}))
 
-const littleStones = Object.values(nodes).filter(node => node.name.includes('Stone00'))
+watch([stone, stoneCarved, stoneBakedMaterial], ([stone, stoneCarved, texture]) => {
+  if (stone) {
+    stone.material = texture
+  }
+  if (stoneCarved) {
+    stoneCarved.material = texture
+  }
+})
+
+watch([littleStones, littleStonesBakedMaterial], ([littleStones, texture]) => {
+  littleStones.forEach((stone) => {
+    stone.material = texture
+  })
+})
 
-littleStones.forEach(stone => {
-  stone.material = LittleStonesBakedMaterial
+watch(logo, (logo) => {
+  logo.material.emissiveIntensity = 10
 })
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ elapsed }) => {
-  nodes.Logo.material.emissiveIntensity = Math.sin(elapsed) * 6 + 7
+onBeforeRender(({ elapsed }) => {
+  if (logo.value) {
+    logo.value.material.emissiveIntensity = Math.sin(elapsed) * 6 + 7
+  }
 })
 </script>
 
 <template>
-  <primitive :object="nodes.Orbs" />
-  <primitive :object="nodes.Logo" />
-  <primitive :object="nodes.Stone" />
-  <primitive :object="nodes.StoneCarved" />
-  <primitive 
-    v-for="stone in littleStones" 
-    :key="stone.id" 
-    :object="stone" 
-  />
-</template>
+  <TresGroup rotation-y="1.57">
+    <primitive
+        v-if="state"
+        :object="state.scene"
+    />
+  </TresGroup>
+</template>

package.json

@@ -24,15 +24,15 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@tresjs/cientos": "^4.1.1",
-    "@tresjs/nuxt": "^4.0.0",
-    "@tresjs/post-processing": "^2.1.0",
-    "@types/node": "^22.15.21",
-    "@types/three": "^0.173.0",
-    "nuxt": "^3.17.4",
-    "three": "^0.173.0"
+    "@tresjs/cientos": "^5.1.0",
+    "@tresjs/nuxt": "^5.1.0",
+    "@tresjs/post-processing": "^3.1.0",
+    "@types/node": "^22.18.10",
+    "@types/three": "^0.180.0",
+    "nuxt": "^3.19.3",
+    "three": "^0.180.0"
   },
   "resolutions": {
-    "@nuxt/kit": "3.17.4"
+    "@nuxt/kit": "^3.19.3"
   }
 }