Merge branch 'v4' into feature/remove-default-camera-warning

Author: alvarosabu

CHANGELOG.md

@@ -6,12 +6,16 @@
 ### Features
 
 * 474 vue chrome devtools plugin ([#479](https://github.com/Tresjs/tres/issues/479)) ([224ab06](https://github.com/Tresjs/tres/commit/224ab06a4404e2ae5a0cbd2f43041961862b09fd))
+  
+
+## [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)
 

src/components/TresCanvas.vue

@@ -21,6 +21,7 @@ import {
   h, 
   getCurrentInstance,
 } from 'vue'
+import pkg from '../../package.json'
 import {
   useTresContextProvider,
   useLogger,
@@ -186,6 +187,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,35 +156,36 @@ 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
-        
+
       }
     }
   }
 
   // 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()
   })