Merge branch 'main' into fix/useLogger

CHANGELOG.md

@@ -1,5 +1,14 @@
 
 
+## [3.6.1](https://github.com/Tresjs/tres/compare/3.6.0...3.6.1) (2024-01-16)
+
+
+### Bug Fixes
+
+* correct minor typos ([#438](https://github.com/Tresjs/tres/issues/438)) ([341faac](https://github.com/Tresjs/tres/commit/341faacb93fd347aced7f1bc7e0484ecbc12e6ce)), closes [#452](https://github.com/Tresjs/tres/issues/452)
+* incorrect MathRepresentation type ([#456](https://github.com/Tresjs/tres/issues/456)) ([314b088](https://github.com/Tresjs/tres/commit/314b0883b78ded0cad2bdf9f2506bbeac4a0817e))
+* **usetrescontextprovider:** fixed rendering issues caused when resize is triggered ([#512](https://github.com/Tresjs/tres/issues/512)) ([a16b12b](https://github.com/Tresjs/tres/commit/a16b12b160098e97993b14a7bb054103c88b6263)), closes [#511](https://github.com/Tresjs/tres/issues/511)
+
 ## [3.6.0](https://github.com/Tresjs/tres/compare/3.5.2...3.6.0) (2023-12-12)
 
 

docs/guide/index.md

@@ -81,7 +81,7 @@ We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS
 
 We also have a playground where you can try TresJS online. Check it out [here](https://playground.tresjs.org/).
 
-![](/public/playground.png)
+![](/playground.png)
 
 ## Motivation
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "packageManager": "pnpm@8.10.2",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",

src/components/TresCanvas.vue

@@ -21,6 +21,7 @@ import {
   h, 
   getCurrentInstance,
 } from 'vue'
+import pkg from '../../package.json'
 import {
   useTresContextProvider,
   useLogger,
@@ -187,6 +188,7 @@ onMounted(() => {
     ref="canvas"
     :data-scene="scene.uuid"
     :class="$attrs.class"
+    :data-tres="`tresjs ${pkg.version}`"
     :style="{
       display: 'block',
       width: '100%',

src/composables/useTresContextProvider/index.ts

@@ -1,5 +1,5 @@
-import { toValue, useElementSize, useFps, useMemory, useRafFn, useWindowSize } from '@vueuse/core'
-import { inject, provide, readonly, shallowRef, computed, ref, onUnmounted } from 'vue'
+import { toValue, useElementSize, useFps, useMemory, useRafFn, useWindowSize, refDebounced } from '@vueuse/core'
+import { inject, provide, readonly, shallowRef, computed, ref, onUnmounted, watchEffect } from 'vue'
 import type { Camera, EventDispatcher, Scene, WebGLRenderer } from 'three'
 import { Raycaster } from 'three'
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
@@ -55,14 +55,23 @@ export function useTresContextProvider({
       : useElementSize(toValue(canvas).parentElement),
   )
 
-  const width = computed(() => elementSize.value.width.value)
-  const height = computed(() => elementSize.value.height.value)
+  const reactiveSize = shallowRef({
+    width: 0,
+    height: 0,
+  })
+  const debouncedReactiveSize = refDebounced(reactiveSize, 10)
+  const unWatchSize = watchEffect(() => {
+    reactiveSize.value = {
+      width: elementSize.value.width.value,
+      height: elementSize.value.height.value,
+    }
+  })
 
-  const aspectRatio = computed(() => width.value / height.value)
+  const aspectRatio = computed(() => debouncedReactiveSize.value.width / debouncedReactiveSize.value.height)
 
   const sizes = {
-    height,
-    width,
+    height: computed(() => debouncedReactiveSize.value.height),
+    width: computed(() => debouncedReactiveSize.value.width),
     aspectRatio,
   }
   const localScene = shallowRef<Scene>(scene)
@@ -113,7 +122,7 @@ export function useTresContextProvider({
 
   // Performance
   const updateInterval = 100 // Update interval in milliseconds
-  const fps = useFps({ every: updateInterval }) 
+  const fps = useFps({ every: updateInterval })
   const { isSupported, memory } = useMemory({ interval: updateInterval })
   const maxFrames = 160
   let lastUpdateTime = performance.now()
@@ -125,7 +134,7 @@ export function useTresContextProvider({
     if (toProvide.scene.value) {
       toProvide.perf.memory.allocatedMem = calculateMemoryUsage(toProvide.scene.value as unknown as TresObject)
     }
-    
+
     // Update memory usage
     if (timestamp - lastUpdateTime >= updateInterval) {
       lastUpdateTime = timestamp
@@ -147,9 +156,9 @@ export function useTresContextProvider({
           toProvide.perf.memory.accumulator.shift()
         }
 
-        toProvide.perf.memory.currentMem 
+        toProvide.perf.memory.currentMem
         = toProvide.perf.memory.accumulator.reduce((a, b) => a + b, 0) / toProvide.perf.memory.accumulator.length
-        
+
       }
     }
   }
@@ -157,25 +166,26 @@ export function useTresContextProvider({
   // Devtools
   let accumulatedTime = 0
   const interval = 1 // Interval in milliseconds, e.g., 1000 ms = 1 second
-    
+
   const { pause, resume } = useRafFn(({ delta }) => {
     if (!window.__TRES__DEVTOOLS__) return
 
     updatePerformanceData({ timestamp: performance.now() })
-    
+
     // Accumulate the delta time
     accumulatedTime += delta
-    
+
     // Check if the accumulated time is greater than or equal to the interval
     if (accumulatedTime >= interval) {
       window.__TRES__DEVTOOLS__.cb(toProvide)
-    
+
       // Reset the accumulated time
       accumulatedTime = 0
     }
-  }, { immediate: true }) 
-  
+  }, { immediate: true })
+
   onUnmounted(() => {
+    unWatchSize()
     pause()
   })