From a6e17378caabf32619e9ec913bb45651f4518635 Mon Sep 17 00:00:00 2001 From: Jaime A Torrealba C <63722373+JaimeTorrealba@users.noreply.github.com> Date: Mon, 15 Jan 2024 08:01:15 +0000 Subject: [PATCH 1/3] refactor(app): Add tres version to the canvas as a data attribute (#504) --- src/components/TresCanvas.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue index e80866a74..e70fb4be1 100644 --- a/src/components/TresCanvas.vue +++ b/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%', From a16b12b160098e97993b14a7bb054103c88b6263 Mon Sep 17 00:00:00 2001 From: Steve245270533 <46118247+Steve245270533@users.noreply.github.com> Date: Wed, 17 Jan 2024 00:50:55 +0800 Subject: [PATCH 2/3] fix(usetrescontextprovider): fixed rendering issues caused when resize is triggered (#512) * fix(usetrescontextprovider): fixed rendering issues caused when resize is triggered (#511) * fix(usetrescontextprovider): Solved Camel Naming --- .../useTresContextProvider/index.ts | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/src/composables/useTresContextProvider/index.ts b/src/composables/useTresContextProvider/index.ts index 378814eb2..678db27ad 100644 --- a/src/composables/useTresContextProvider/index.ts +++ b/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) @@ -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() }) From 4e0f89e1d3bc4a1acb8873c539923698b3627df2 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Tue, 16 Jan 2024 19:57:41 +0100 Subject: [PATCH 3/3] chore: release v3.6.1 --- CHANGELOG.md | 9 +++++++++ package.json | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24bbeb93e..c365eb33d 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package.json b/package.json index 228ee0e8b..3954f90d7 100644 --- a/package.json +++ b/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 (https://github.com/alvarosabu/)",