feat(app): 421 Update components to use useLoop instead of useRenderLoop

package.json

@@ -68,7 +68,7 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
-    "@tresjs/core": "4.0.0-next.1",
+    "@tresjs/core": "4.0.0-rc.1",
     "@tresjs/eslint-config": "^1.0.0",
     "@tweakpane/core": "^1.1.9",
     "@types/node": "^20.12.10",

playground/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']

playground/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/core": "3.9.0",
+    "@tresjs/core": "4.0.0-rc.1",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

src/core/abstractions/AnimatedSprite/component.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onUnmounted, ref, shallowRef, watch } from 'vue'
 import type { TresVector2 } from '@tresjs/core'
-import { normalizeVectorFlexibleParam, useRenderLoop } from '@tresjs/core'
+import { normalizeVectorFlexibleParam, useLoop } from '@tresjs/core'
 import type { Intersection } from 'three'
 import { DoubleSide } from 'three'
 import type { Atlasish } from './Atlas'
@@ -99,7 +99,7 @@ let frameHeldOnLoopEnd = false
 let dirtyFlag = true
 const TEXTURE_PX_TO_WORLD_UNITS = 0.01
 
-useRenderLoop().onLoop(({ delta }) => {
+useLoop().onBeforeRender(({ delta }) => {
   if (!props.paused && !frameHeldOnLoopEnd) {
     cooldown -= delta * props.fps
   }

src/core/abstractions/Levioso.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
+import { useLoop } from '@tresjs/core'
 import { MathUtils } from 'three'
 import { shallowRef } from 'vue'
 
@@ -31,10 +31,10 @@ defineExpose({
   const AMPLITUDE_ROTATION_Z = 1 / 20
   const START_OFFSET = Math.random() * 10000
 
-  const { onLoop } = useRenderLoop()
+  const { onBeforeRender } = useLoop()
   let elapsed = START_OFFSET
 
-  onLoop(({ delta }) => {
+  onBeforeRender(({ delta }) => {
     if (!groupRef.value) { return }
 
     elapsed += delta * props.speed

src/core/abstractions/MouseParallax.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, toRefs, watch } from 'vue'
 import type { Group } from 'three'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useElementSize, useMouse, useWindowSize } from '@vueuse/core'
 import type { UseMouseOptions } from '@vueuse/core'
 
@@ -68,9 +68,9 @@ const cameraGroupRef = ref<Group>()
 const cursorX = computed(() => (x.value / width.value - 0.5) * factor.value)
 const cursorY = computed(() => -(y.value / height.value - 0.5) * factor.value)
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ delta }) => {
+onBeforeRender(({ delta }) => {
   if (
     disabled.value
     || !cameraGroupRef.value

src/core/abstractions/useAnimations.ts

@@ -1,6 +1,6 @@
 import type { AnimationAction, AnimationClip, Object3D, Scene } from 'three'
 import { AnimationMixer } from 'three'
-import { useRenderLoop } from '@tresjs/core'
+import { useLoop } from '@tresjs/core'
 import type { Ref } from 'vue'
 import { ref, shallowReactive } from 'vue'
 
@@ -28,9 +28,9 @@ export function useAnimations<T extends AnimationClip>(
     actions[animation.name] = action
   })
 
-  const { onLoop } = useRenderLoop()
+  const { onBeforeRender } = useLoop()
 
-  onLoop(({ delta }) => {
+  onBeforeRender(({ delta }) => {
     mixer.update(delta)
   })
 

src/core/controls/CameraControls.vue

@@ -19,7 +19,7 @@ import {
   Vector3,
   Vector4,
 } from 'three'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
 import { isOrthographicCamera, isPerspectiveCamera } from '../../utils/types'
 
@@ -416,9 +416,9 @@ function addEventListeners() {
   useEventListener(controlsRef.value as any, 'controlstart', () => emit('start', controlsRef.value))
 }
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ delta }) => {
+onBeforeRender(({ delta }) => {
   if (controlsRef.value?.enabled) { controlsRef.value?.update(delta) }
 })
 

src/core/controls/KeyboardControls.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, toRefs, watchEffect } from 'vue'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useMagicKeys } from '@vueuse/core'
 import { PointerLockControls as PointerLockControlsType } from 'three-stdlib'
 import { Quaternion, Vector3 } from 'three'
@@ -100,9 +100,9 @@ const moveForward = (delta: number, movementSpeed: number) => {
   if (sidewardMove.value || forwardMove.value) { emit('change', controls.value) }
 }
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ delta }) => {
+onBeforeRender(({ delta }) => {
   if (controls.value instanceof PointerLockControlsType && controls.value?.isLocked) {
     moveForward(delta, forwardMove.value)
     controls.value.moveRight(sidewardMove.value)

src/core/controls/OrbitControls.vue

@@ -4,7 +4,7 @@ import { TOUCH } from 'three'
 import { OrbitControls } from 'three-stdlib'
 import { onUnmounted, ref, toRefs, watch } from 'vue'
 import type { TresVector3 } from '@tresjs/core'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
 
 export interface OrbitControlsProps {
@@ -302,9 +302,9 @@ function addEventListeners() {
   useEventListener(controlsRef.value as any, 'end', () => emit('end', controlsRef.value))
 }
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (controlsRef.value && (enableDamping.value || autoRotate.value)) {
     controlsRef.value.update()
   }

src/core/controls/ScrollControls.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, shallowRef, watch } from 'vue'
-import { useLogger, useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLogger, useLoop, useTresContext } from '@tresjs/core'
 import { useScroll, useWindowScroll, useWindowSize } from '@vueuse/core'
 
 export interface ScrollControlsProps {
@@ -184,9 +184,9 @@ watch(
   },
 )
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (camera.value?.position) {
     const delta
       = (progress.value * props.distance - camera.value.position[direction] + initCameraPos) * props.smoothScroll

src/core/materials/holographicMaterial/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import type { TresColor } from '@tresjs/core'
 import { FrontSide } from 'three'
 import type { Side } from 'three'
@@ -44,9 +44,9 @@ extend({ HolographicMaterial })
 
 defineExpose({ root: MeshHolographicMaterialClass, constructor: HolographicMaterial })
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   MeshHolographicMaterialClass.value?.update()
 })
 </script>