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']
@@ -13,5 +13,6 @@ declare module 'vue' {
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StarsForTest: typeof import('./src/components/StarsForTest.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": {

playground/src/components/StarsForTest.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import type { Points } from 'three'
+import { Stars } from '@tresjs/cientos'
+import { useLoop } from '@tresjs/core'
+
+const star = shallowRef()
+
+const options = reactive({
+  size: 4,
+  sizeAttenuation: true,
+  count: 50000,
+  depth: 50,
+  radius: 1000,
+})
+
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(() => {
+  (star.value.instance as Points).rotation.y += 0.003
+})
+</script>
+
+<template>
+  <Stars
+    ref="star"
+    :radius="options.radius"
+    :depth="options.depth"
+    :count="options.count"
+    :size="options.size"
+    :size-attenuation="options.sizeAttenuation"
+  />
+</template>

playground/src/pages/abstractions/FBODemo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Fbo, OrbitControls } from '@tresjs/cientos'
+import { Fbo, OrbitControls, Stats } from '@tresjs/cientos'
 import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
@@ -18,7 +18,7 @@ const materialRef = ref(null)
 const torusRef = shallowRef(null)
 const capsuleRef = shallowRef(null)
 
-const { onLoop } = useRenderLoop()
+const { onLoop, resume } = useRenderLoop()
 
 const state = shallowReactive({
   depth: false,
@@ -37,6 +37,7 @@ onMounted(async () => {
     capsuleRef.value.rotation.x = elapsed * 0.471
     capsuleRef.value.rotation.z = elapsed * 0.632
   })
+  resume()
 })
 
 const { 'Depth Buffer': isUseDepthBuffer, 'MSAA Samples': numMsaaSamples } = useControls({
@@ -67,7 +68,7 @@ watch(
     <OrbitControls />
 
     <TresGridHelper :args="[10, 10]" />
-
+    <Stats />
     <Fbo
       ref="fboRef"
       v-bind="state"

playground/src/pages/misc/StatsDemo.vue

@@ -1,35 +1,22 @@
 <script setup lang="ts">
-import { CameraControls, Stars, Stats } from '@tresjs/cientos'
-import { reactive, shallowRef, watch } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import type { Points } from 'three'
+import { CameraControls, Stats } from '@tresjs/cientos'
+import { shallowRef, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
 import { NoToneMapping, SRGBColorSpace } from 'three'
+import TestStars from '../../components/StarsForTest.vue'
 
 const gl = {
   clearColor: '#000',
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
-const options = reactive({
-  size: 4,
-  sizeAttenuation: true,
-  count: 50000,
-  depth: 50,
-  radius: 1000,
-})
 
-const star = shallowRef()
 const statsGLRef = shallowRef()
 
 watch(statsGLRef, (value) => {
   // eslint-disable-next-line no-console
   console.log('jaime ~ watch ~ value:', value.instance)
 })
-const { onBeforeLoop } = useRenderLoop()
-
-onBeforeLoop(() => {
-  (star.value.instance as Points).rotation.y += 0.003
-})
 </script>
 
 <template>
@@ -38,14 +25,7 @@ onBeforeLoop(() => {
   >
     <TresPerspectiveCamera :position="[0, 2, 5]" />
     <Stats ref="statsGLRef" />
-    <Stars
-      ref="star"
-      :radius="options.radius"
-      :depth="options.depth"
-      :count="options.count"
-      :size="options.size"
-      :size-attenuation="options.sizeAttenuation"
-    />
+    <TestStars />
     <CameraControls :distance="500" />
   </TresCanvas>
 </template>

playground/src/pages/misc/StatsGlDemo.vue

@@ -1,35 +1,22 @@
 <script setup lang="ts">
-import { reactive, shallowRef, watch } from 'vue'
-import { CameraControls, Stars, StatsGl } from '@tresjs/cientos'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import type { Points } from 'three'
+import { shallowRef, watch } from 'vue'
+import { CameraControls, StatsGl } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { NoToneMapping, SRGBColorSpace } from 'three'
+import TestStars from '../../components/StarsForTest.vue'
 
 const gl = {
   clearColor: '#000',
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
-const options = reactive({
-  size: 4,
-  sizeAttenuation: true,
-  count: 50000,
-  depth: 50,
-  radius: 1000,
-})
 
-const star = shallowRef()
 const statsRef = shallowRef()
-const { onBeforeLoop } = useRenderLoop()
 
 watch(statsRef, (value) => {
   // eslint-disable-next-line no-console
   console.log('jaime ~ watch ~ value:', value.instance)
 })
-
-onBeforeLoop(() => {
-  (star.value.instance as Points).rotation.y += 0.003
-})
 </script>
 
 <template>
@@ -38,14 +25,7 @@ onBeforeLoop(() => {
   >
     <TresPerspectiveCamera :position="[0, 2, 5]" />
     <StatsGl ref="statsRef" />
-    <Stars
-      ref="star"
-      :radius="options.radius"
-      :depth="options.depth"
-      :count="options.count"
-      :size="options.size"
-      :size-attenuation="options.sizeAttenuation"
-    />
+    <TestStars />
     <CameraControls :distance="500" />
   </TresCanvas>
 </template>