feat: 615-adapt-camera-dependant-abstractions-to-core-v5-camera-changes (#621)

alvarosabu · web-flow · commit 682d38f2a636 · 2025-05-17T09:31:08.000+02:00
* feat: adapt core camera ctx changes to cientos

* fix: remove unused Camera type import in useFBO module

- Removed the unused `Camera` type import from `index.ts` in the `useFBO` module to clean up the code and improve maintainability.
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",
-    "@tresjs/core": "https://pkg.pr.new/@tresjs/core@ff35bfc",
+    "@tresjs/core": "https://pkg.pr.new/@tresjs/core@b630003",
     "@tresjs/eslint-config": "^1.4.0",
     "@types/node": "^22.10.5",
     "@types/three": "^0.172.0",
diff --git a/playground/vue/src/pages/abstractions/GlobalAudioDemo.vue b/playground/vue/src/pages/abstractions/GlobalAudioDemo.vue
@@ -31,16 +31,18 @@ watch(soundRef, (value) => {
       :near="0.1"
       :far="1000"
     />
-    <GlobalAudio
-      ref="soundRef"
-      :src="exampleAudio"
-      :volume="0.5"
-      :loop="true"
-      :playback-rate="1"
-      play-trigger="playBtn"
-      stop-trigger="stopBtn"
-      @is-playing="(e) => isPlaying = e"
-    />
+    <Suspense>
+      <GlobalAudio
+        ref="soundRef"
+        :src="exampleAudio"
+        :volume="0.5"
+        :loop="true"
+        :playback-rate="1"
+        play-trigger="playBtn"
+        stop-trigger="stopBtn"
+        @is-playing="(e) => isPlaying = e"
+      />
+    </Suspense>
   </TresCanvas>
 </template>
 
diff --git a/playground/vue/src/pages/controls/ScrollControlsDemo.vue b/playground/vue/src/pages/controls/ScrollControlsDemo.vue
@@ -13,7 +13,7 @@ const progress = ref(0)
 
 watchEffect(() => {
   // eslint-disable-next-line no-console
-  console.log('jaime ~ progress:', progress.value)
+  console.log('progress:', progress.value)
 })
 
 const gl = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/abstractions/GlobalAudio.ts b/src/core/abstractions/GlobalAudio.ts
@@ -69,7 +69,7 @@ export const GlobalAudio = defineComponent<AudioProps>({
     const { camera, renderer } = useTresContext()
 
     const listener = new AudioListener()
-    camera.value?.add(listener)
+    camera.activeCamera.value?.add(listener)
 
     const sound = new Audio(listener)
     const audioLoader = new AudioLoader()
diff --git a/src/core/abstractions/MouseParallax.vue b/src/core/abstractions/MouseParallax.vue
@@ -101,7 +101,7 @@ onBeforeRender(({ delta /* invalidate */ }) => {
 
 watch(
   () => cameraGroupRef.value,
-  value => value?.add(camera.value as Object3D),
+  value => value?.add(camera.activeCamera.value as Object3D),
 )
 </script>
 
diff --git a/src/core/abstractions/PositionalAudio.vue b/src/core/abstractions/PositionalAudio.vue
@@ -119,7 +119,7 @@ const createHelper = () => {
 }
 
 const dispose = () => {
-  camera?.value?.remove(listener)
+  camera.activeCamera.value?.remove(listener)
 
   disposeAudio()
   disposeHelper()
diff --git a/src/core/abstractions/useFBO/index.ts b/src/core/abstractions/useFBO/index.ts
@@ -1,7 +1,7 @@
 import { useLoop, useTresContext } from '@tresjs/core'
 import { DepthTexture, FloatType, HalfFloatType, LinearFilter, WebGLRenderTarget } from 'three'
 import { isReactive, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
-import type { Camera, RenderTargetOptions } from 'three'
+import type { RenderTargetOptions } from 'three'
 import type { Ref } from 'vue'
 
 export interface FboOptions {
@@ -85,7 +85,7 @@ export function useFBO(options: FboOptions) {
     if (autoRender.value) {
       renderer.instance.value.setRenderTarget(target.value)
       renderer.instance.value.clear()
-      renderer.instance.value.render(scene.value, camera.value as Camera)
+      renderer.instance.value.render(scene.value, camera.activeCamera.value)
 
       renderer.instance.value.setRenderTarget(null)
     }
diff --git a/src/core/controls/CameraControls.vue b/src/core/controls/CameraControls.vue
@@ -316,7 +316,7 @@ const props = withDefaults(defineProps<CameraControlsProps>(), {
   maxPolarAngle: Math.PI,
   minAzimuthAngle: Number.NEGATIVE_INFINITY,
   maxAzimuthAngle: Number.POSITIVE_INFINITY,
-  distance: () => useTresContext().camera.value!.position.z,
+  distance: () => useTresContext().camera.activeCamera.value!.position.z,
   minDistance: Number.EPSILON,
   maxDistance: Number.POSITIVE_INFINITY,
   infinityDolly: false,
@@ -336,8 +336,8 @@ const props = withDefaults(defineProps<CameraControlsProps>(), {
   boundaryFriction: 0.0,
   restThreshold: 0.01,
   colliderMeshes: () => [],
-  mouseButtons: () => getMouseButtons(useTresContext().camera.value),
-  touches: () => getTouches(useTresContext().camera.value),
+  mouseButtons: () => getMouseButtons(useTresContext().camera.activeCamera.value),
+  touches: () => getTouches(useTresContext().camera.activeCamera.value),
 })
 
 const emit = defineEmits(['change', 'start', 'end'])
@@ -387,7 +387,9 @@ const subsetOfTHREE = {
 }
 CameraControls.install({ THREE: subsetOfTHREE })
 
-const { camera: activeCamera, renderer, extend, controls } = useTresContext()
+const { camera: ctxCamera, renderer, extend, controls } = useTresContext()
+
+const { activeCamera } = ctxCamera
 
 const contextDomElement = computed(() => renderer.instance.value.domElement)
 
diff --git a/src/core/controls/KeyboardControls.vue b/src/core/controls/KeyboardControls.vue
@@ -61,7 +61,9 @@ const emit = defineEmits(['isLock', 'change'])
 
 const { moveSpeed } = toRefs(props)
 
-const { camera: activeCamera, controls, renderer } = useTresContext()
+const { camera: ctxCamera, controls, renderer } = useTresContext()
+
+const { activeCamera } = ctxCamera
 
 const contextDomElement = computed(() => renderer.instance.value.domElement)
 
diff --git a/src/core/controls/MapControls.vue b/src/core/controls/MapControls.vue
@@ -275,7 +275,9 @@ const {
   rotateSpeed,
 } = toRefs(props)
 
-const { camera: activeCamera, renderer, extend, controls } = useTresContext()
+const { camera: ctxCamera, renderer, extend, controls } = useTresContext()
+
+const { activeCamera } = ctxCamera
 
 const contextDomElement = computed(() => renderer.instance.value.domElement)
 
diff --git a/src/core/controls/OrbitControls.vue b/src/core/controls/OrbitControls.vue
@@ -298,7 +298,9 @@ const {
   mouseButtons,
 } = toRefs(props)
 
-const { camera: activeCamera, renderer, extend, controls } = useTresContext()
+const { camera: ctxCamera, renderer, extend, controls } = useTresContext()
+
+const { activeCamera } = ctxCamera
 
 const contextDomElement = computed(() => renderer.instance.value.domElement)
 
diff --git a/src/core/controls/PointerLockControls.vue b/src/core/controls/PointerLockControls.vue
@@ -57,7 +57,10 @@ const props = withDefaults(defineProps<PointerLockControlsProps>(), {
 
 const emit = defineEmits(['isLock', 'change'])
 
-const { camera: activeCamera, renderer, extend, controls } = useTresContext()
+const { camera: ctxCamera, renderer, extend, controls } = useTresContext()
+
+const { activeCamera } = ctxCamera
+
 const contextDomElement = computed(() => renderer.instance.value.domElement)
 watch(props, () => {
   if (renderer.canBeInvalidated.value) {
diff --git a/src/core/controls/ScrollControls.vue b/src/core/controls/ScrollControls.vue
@@ -92,7 +92,7 @@ const scrollNodeY = ref(0)
 const direction = props.horizontal ? 'x' : 'y'
 
 const unWatch = watch(
-  camera,
+  camera.activeCamera,
   (value) => {
     if (initialized.value) {
       unWatch()
@@ -193,11 +193,11 @@ watch(
 const { onBeforeRender } = useLoop()
 
 onBeforeRender(() => {
-  if (camera.value?.position) {
+  if (camera.activeCamera.value?.position) {
     const delta
-      = (progress.value * props.distance - camera.value.position[direction] + initCameraPos) * props.smoothScroll
+      = (progress.value * props.distance - camera.activeCamera.value.position[direction] + initCameraPos) * props.smoothScroll
 
-    camera.value.position[direction] += delta
+    camera.activeCamera.value.position[direction] += delta
     if (wrapperRef.value.children.length > 0) {
       wrapperRef.value.position[direction] += delta
     }
diff --git a/src/core/controls/TransformControls.vue b/src/core/controls/TransformControls.vue
@@ -40,7 +40,9 @@ const { object, mode, enabled, axis, translationSnap, rotationSnap, scaleSnap, s
 
 const controlsRef = shallowRef<TransformControls | null>(null)
 
-const { controls, camera: activeCamera, renderer, extend } = useTresContext()
+const { controls, camera: ctxCamera, renderer, extend } = useTresContext()
+
+const { activeCamera } = ctxCamera
 
 const domElement = computed(() => renderer.instance.value.domElement)
 
diff --git a/src/core/misc/html/HTML.vue b/src/core/misc/html/HTML.vue
@@ -176,7 +176,7 @@ watch(
         el.value.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;'
       }
       else {
-        const vector = calculatePosition(group, camera.value as TresCamera, {
+        const vector = calculatePosition(group, camera.activeCamera.value as TresCamera, {
           width: sizes.width.value,
           height: sizes.height.value,
         })
@@ -226,25 +226,25 @@ onBeforeRender(() => {
   // TODO: comment this until invalidate is back in the loop callback on v5
   // invalidate()
 
-  if (groupRef.value && camera.value && renderer.instance.value) {
-    camera.value?.updateMatrixWorld()
+  if (groupRef.value && camera.activeCamera.value && renderer.instance.value) {
+    camera.activeCamera.value?.updateMatrixWorld()
     groupRef.value.updateWorldMatrix(true, false)
 
     const vector = transform.value
       ? previousPosition.value
-      : calculatePosition(groupRef.value, camera.value as TresCamera, {
+      : calculatePosition(groupRef.value, camera.activeCamera.value as TresCamera, {
         width: sizes.width.value || 0,
         height: sizes.height.value || 0,
       })
 
     if (
       transform.value
-      || Math.abs(previousZoom.value - (camera.value as TresCamera).zoom) > eps.value
+      || Math.abs(previousZoom.value - (camera.activeCamera.value as TresCamera).zoom) > eps.value
       || Math.abs(previousPosition.value[0] - vector[0]) > eps.value
       || Math.abs(previousPosition.value[1] - vector[1]) > eps.value
       || Math.abs(previousPosition.value[2] - vector[2]) > eps.value
     ) {
-      const isBehindCamera = isObjectBehindCamera(groupRef.value, camera.value as TresCamera)
+      const isBehindCamera = isObjectBehindCamera(groupRef.value, camera.activeCamera.value as TresCamera)
       let raytraceTarget: null | undefined | boolean | TresObject3D[] = false
 
       if (isRayCastOcclusion.value) {
@@ -261,7 +261,7 @@ onBeforeRender(() => {
       if (raytraceTarget) {
         const isVisible = isObjectVisible(
           groupRef.value,
-          camera.value as TresCamera,
+          camera.activeCamera.value as TresCamera,
           raycaster.value,
           raytraceTarget as TresObject3D[],
         )
@@ -283,21 +283,21 @@ onBeforeRender(() => {
           : [halfRange - 1, 0]
         : zIndexRange.value
 
-      el.value.style.zIndex = `${objectZIndex(groupRef.value, camera.value as TresCamera, zRange)}`
+      el.value.style.zIndex = `${objectZIndex(groupRef.value, camera.activeCamera.value as TresCamera, zRange)}`
       if (transform.value) {
         const [widthHalf, heightHalf] = [
           (sizes.width.value) / 2,
           (sizes.height.value) / 2,
         ]
-        const fov = camera.value.projectionMatrix.elements[5] * heightHalf
-        const { isOrthographicCamera, top, left, bottom, right } = camera.value as OrthographicCamera
-        const cameraMatrix = getCameraCSSMatrix(camera.value.matrixWorldInverse)
+        const fov = camera.activeCamera.value.projectionMatrix.elements[5] * heightHalf
+        const { isOrthographicCamera, top, left, bottom, right } = camera.activeCamera.value as OrthographicCamera
+        const cameraMatrix = getCameraCSSMatrix(camera.activeCamera.value.matrixWorldInverse)
         const cameraTransform = isOrthographicCamera
           ? `scale(${fov})translate(${epsilon(-(right + left) / 2)}px,${epsilon((top + bottom) / 2)}px)`
           : `translateZ(${fov}px)`
         let matrix = groupRef.value.matrixWorld
         if (sprite.value) {
-          matrix = camera.value.matrixWorldInverse.clone().transpose().copyPosition(matrix).scale(groupRef.value.scale)
+          matrix = camera.activeCamera.value.matrixWorldInverse.clone().transpose().copyPosition(matrix).scale(groupRef.value.scale)
           matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0
           matrix.elements[15] = 1
         }
@@ -321,13 +321,13 @@ onBeforeRender(() => {
         const scale
           = distanceFactor?.value === undefined
             ? 1
-            : objectScale(groupRef.value, camera.value as TresCamera) * distanceFactor?.value
+            : objectScale(groupRef.value, camera.activeCamera.value as TresCamera) * distanceFactor?.value
         el.value.style.transform = `translate3d(${vector[0]}px,${vector[1]}px,0) scale(${scale})`
       }
     }
 
     previousPosition.value = vector
-    previousZoom.value = (camera.value as TresCamera).zoom
+    previousZoom.value = (camera.activeCamera.value as TresCamera).zoom
   }
 
   if (!isRayCastOcclusion.value && meshRef.value && !isMeshSizeSet.value) {
@@ -336,7 +336,7 @@ onBeforeRender(() => {
         const el = (vnode.value?.children as unknown as Array<HTMLElement>)[0]
 
         if (el?.clientWidth && el?.clientHeight) {
-          const { isOrthographicCamera } = camera.value as OrthographicCamera
+          const { isOrthographicCamera } = camera.activeCamera.value as OrthographicCamera
 
           if (isOrthographicCamera || geometry) {
             if (attrs.scale) {
@@ -376,7 +376,7 @@ onBeforeRender(() => {
         isMeshSizeSet.value = true
       }
 
-      occlusionMeshRef.value.lookAt(camera.value?.position)
+      occlusionMeshRef.value.lookAt(camera.activeCamera.value?.position)
     }
   }
 })
diff --git a/src/core/staging/AccumulativeShadows/component.vue b/src/core/staging/AccumulativeShadows/component.vue
@@ -111,9 +111,9 @@ function update(frames = 1) {
         light.update()
       }
     })
-    if (camera.value) {
+    if (camera.activeCamera.value) {
       const blend = Math.max(2, props.accumulate ? props.blend : props.frames)
-      progressiveLightMap.value.update(camera.value, blend)
+      progressiveLightMap.value.update(camera.activeCamera.value, blend)
     }
   }
 
diff --git a/src/core/staging/Bounds/component.vue b/src/core/staging/Bounds/component.vue
@@ -50,7 +50,7 @@ const emit = defineEmits<{
 const { renderer, camera, controls, sizes: size } = useTres()
 const defaultEasing = (t: number) => 1 - (1 - t) ** 3
 
-const bounds = new Bounds(camera.value ?? new PerspectiveCamera())
+const bounds = new Bounds(camera.activeCamera.value ?? new PerspectiveCamera())
 bounds.easing = props.easing ?? defaultEasing
 bounds.onStart = (arg: OnLookAtCallbackArg) => emit('start', arg)
 bounds.onCancel = (arg: OnLookAtCallbackArg) => emit('cancel', arg)
@@ -78,9 +78,9 @@ watchEffect(() => {
   if (controls.value) { bounds.controls = controls.value as unknown as BoundsControlsProto }
 })
 
-const shallowCam = computed(() => camera.value?.uuid)
+const shallowCam = computed(() => camera.activeCamera.value?.uuid)
 watch(shallowCam, () => {
-  if (camera.value) { bounds.camera = camera.value }
+  if (camera.activeCamera.value) { bounds.camera = camera.activeCamera.value }
 }, { immediate: true, deep: false })
 
 const refreshDebounce = useDebounceFn(refresh, 250, { maxWait: 2000 })
diff --git a/src/core/staging/Smoke.vue b/src/core/staging/Smoke.vue
@@ -109,11 +109,11 @@ const colorSpace = computed(() => renderer.instance.value?.outputColorSpace)
 const { onBeforeRender } = useLoop()
 
 onBeforeRender(() => {
-  if (smokeRef.value && camera.value && groupRef.value) {
+  if (smokeRef.value && camera.activeCamera.value && groupRef.value) {
     groupRef.value?.children.forEach((child: Object3D, index: number) => {
       child.rotation.z += smoke[index].rotation
     })
-    smokeRef.value.lookAt(camera.value?.position)
+    smokeRef.value.lookAt(camera.activeCamera.value?.position)
     // TODO: comment this until invalidate is back in the loop callback on v5
     // invalidate()
   }
diff --git a/src/core/staging/SoftShadows.vue b/src/core/staging/SoftShadows.vue

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ onBeforeRender(({ delta /* invalidate */ }) => {`
`101`	`101`
`102`	`102`	`watch(`
`103`	`103`	`() => cameraGroupRef.value,`
`104`		`- value => value?.add(camera.value as Object3D),`
	`104`	`+ value => value?.add(camera.activeCamera.value as Object3D),`
`105`	`105`	`)`
`106`	`106`	`</script>`
`107`	`107`
Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@ const createHelper = () => {`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`const dispose = () => {`
`122`		`- camera?.value?.remove(listener)`
	`122`	`+ camera.activeCamera.value?.remove(listener)`
`123`	`123`
`124`	`124`	`disposeAudio()`
`125`	`125`	`disposeHelper()`