Merge branch 'main' into chore/vitest-config

.github/workflows/sponsorkit.yml

@@ -29,9 +29,11 @@ jobs:
           SPONSORKIT_GITHUB_LOGIN: alvarosabu
 
       - name: Commit
-        uses: EndBug/add-and-commit@v5
+        uses: EndBug/add-and-commit@v9
         with:
-          message: "chore: update sponsors.svg"
-          add: "sponsorkit/sponsors.*"
+          author_name: GitHub Actions
+          author_email: 41898282+github-actions[bot]@users.noreply.github.com
+          message: 'chore: update sponsors.svg '
+          add: "sponsors.*"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

docs/api/composables.md

@@ -221,7 +221,7 @@ The `useLoader` composable allows you to load assets using the [THREE.js loaders
 ```ts
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 
-const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
+const { scene } = await useLoader(GLTFLoader, 'path/to/asset.gltf')
 ```
 
 Since the `useLoader` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component. See [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more information.
@@ -234,6 +234,33 @@ Since the `useLoader` composable returns a promise, you can use it with `async/a
 </template>
 ```
 
+### UseLoader as component
+
+You can also use `UseLoader` (with uppercase) as component like so:
+
+```vue
+<script setup lang="ts">
+import { UseLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+</script>
+
+<Suspense>
+  <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
+      <primitive :object="data.scene" />
+</Suspense>
+```
+
+### Props
+
+| Prop | type |
+| ---- | --- |
+| **loader** | `THREE.Loader` |
+| **url** | `String` |
+
+::: warning
+The `UseLoader` component needs to be wrapped in a `Suspense` component in order to work
+:::
+
 ## useTexture
 
 The `useTexture` composable allows you to load textures using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader). It returns a promise with the loaded texture(s).
@@ -312,7 +339,7 @@ You can also use `UseTexture` (with uppercase) as component like so:
 </Suspense>
 ```
 
-## Props
+### Props
 
 | Prop | type |
 | ---- | --- |

docs/api/tres-canvas.md

@@ -78,7 +78,6 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
 | **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` |
 | **renderMode** | Render mode, can be `always`, `on-demand` or `manual`. See [Performance](../advanced/performance)  | `always` |
-| **disableRender** | Disable render on requestAnimationFrame, useful for PostProcessing | `false` |
 | **failIfMajorPerformanceCaveat** | Whether the renderer creation will fail upon low performance is detected. See [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
 | **logarithmicDepthBuffer** | Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) optimization and can cause a decrease in performance. | `false` |
 | **outputColorSpace** | Defines the output encoding | `LinearEncoding` |

docs/de/api/tres-canvas.md

@@ -77,7 +77,6 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **clearColor** | Die Farbe, die der Renderer verwendet, um die Leinwand zu löschen. | `#000000` |
 | **context** | Kann verwendet werden, um den Renderer an einen vorhandenen [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) anzuhängen. | |
 | **depth** | Gibt an, ob der Zeichenpuffer einen [Tiefenpuffer](https://en.wikipedia.org/wiki/Z-buffering) von mindestens 16 Bit hat. | `true` |
-| **disableRender** | Deaktiviert das Rendering in requestAnimationFrame, nützlich für PostProcessing. | `false` |
 | **failIfMajorPerformanceCaveat** | Gibt an, ob die Erstellung des Renderers fehlschlagen soll, wenn eine geringe Performance festgestellt wird. Siehe die [WebGL-Spezifikation](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) für weitere Details. | `false` |
 | **logarithmicDepthBuffer** | Gibt an, ob ein logarithmischer Tiefenpuffer verwendet werden soll. Dies kann notwendig sein, wenn in einer einzigen Szene enorme Skalendifferenzen gehandhabt werden müssen. Beachte, dass diese Einstellung gl_FragDepth verwendet, wenn verfügbar, was die Optimierung [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) deaktiviert und zu einer Performancesverminderung führen kann. | `false` |
 | **outputColorSpace** | Definiert die Ausgabekodierung. | `LinearEncoding` |

docs/es/api/composables.md

@@ -93,6 +93,33 @@ Dado que el composable `useLoader` devuelve una promesa, puedes usarlo con `asyn
 </template>
 ```
 
+### UseLoader como componente
+
+Puedes usar `UseLoader` como componente, de la siguiente forma:
+
+```vue
+<script setup lang="ts">
+import { UseLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+</script>
+
+<Suspense>
+  <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
+      <primitive :object="data.scene" />
+</Suspense>
+```
+
+### Props
+
+| Prop | type |
+| ---- | --- |
+| **loader** | `THREE.Loader` |
+| **url** | `String` |
+
+::: warning
+El componente `UseLoader` necesita estar envuelto por un `Suspense` para poder funcionar
+:::
+
 ## useTexture
 
 El composable `useTexture` te permite cargar texturas utilizando el [cargador de texturas de THREE.js](https://threejs.org/docs/#api/en/loaders/TextureLoader). Retorna una promesa con la(s) textura(s) cargada(s).
@@ -165,7 +192,7 @@ Puedes usar `UseTexture` como componente, de la siguiente forma:
 </Suspense>
 ```
 
-## Props
+### Props
 
 | Prop | type |
 | ---- | --- |

docs/es/api/tres-canvas.md

@@ -77,7 +77,6 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **clearColor** | El color que el renderizador utilizará para borrar el lienzo. | `#000000` |
 | **context** | Esto se puede usar para adjuntar el renderizador a un [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) existente. | |
 | **depth** | Indica si el búfer de dibujo tiene un [búfer de profundidad](https://en.wikipedia.org/wiki/Z-buffering) de al menos 16 bits. | `true` |
-| **disableRender** | Desactiva el renderizado en requestAnimationFrame, útil para PostProcessing. | `false` |
 | **failIfMajorPerformanceCaveat** | Indica si la creación del renderizador fallará si se detecta un bajo rendimiento. Consulta la [especificación de WebGL](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) para más detalles. | `false` |
 | **logarithmicDepthBuffer** | Indica si se debe utilizar un búfer de profundidad logarítmico. Puede ser necesario utilizar esto si se manejan diferencias enormes de escala en una sola escena. Ten en cuenta que esta configuración utiliza gl_FragDepth si está disponible, lo cual deshabilita la optimización [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) y puede causar una disminución en el rendimiento. | `false` |
 | **outputColorSpace** | Define la codificación de salida. | `LinearEncoding` |

docs/fr/api/tres-canvas.md

@@ -77,7 +77,6 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **clearColor** | La couleur que le moteur de rendu utilisera pour effacer le canevas. | `#000000` |
 | **context** | Ceci peut être utilisé pour attacher le moteur de rendu à un [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) existente. | |
 | **depth** | Indique si le tampon de dessin a une [profondeur du tampon](https://en.wikipedia.org/wiki/Z-buffering) de au moins 16 bits. | `true` |
-| **disableRender** | Désactive le rendu sur requestAnimationFrame, utile pour le post-traitement. | `false` |
 | **failIfMajorPerformanceCaveat** | Indique si la création du moteur de rendu échouera si de mauvaises performances sont détectées. Voir la [spécification WebGL](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) para más detalles. | `false` |
 | **logarithmicDepthBuffer** | Indique s’il faut utiliser un tampon de profondeur logarithmique. Il peut être nécessaire de l'utiliser s'il s'agit de différences d'échelle énormes dans une seule scène. Notez que ce paramètre utilise gl_FragDepth s'il est disponible, ce qui désactive l'optimisation [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) et peut entraîner une baisse des performances. | `false` |
 | **outputColorSpace** | Définit l'encodage de sortie. | `LinearEncoding` |

docs/nl/api/tres-canvas.md

@@ -77,7 +77,6 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **clearColor** | De kleur die de renderer gebruikt om het canvas leeg te maken. | `#000000` |
 | **context** | Dit kan worden gebruikt om de renderer aan een bestaand [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) te koppelen | |
 | **depth** | Of de drawing buffer een [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) heeft van tenminste 16 bits. | `true` |
-| **disableRender** | Blokkeer render op requestAnimationFrame, handig voor PostProcessing | `false` |
 | **failIfMajorPerformanceCaveat** | Er wordt gedetecteerd of het maken van de renderer zal mislukken bij lage prestaties. Zie [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
 | **logarithmicDepthBuffer** | Of de logarithmic depth buffer gebruikt moet worden. Het kan zijn dat dit noodzakelijk is als je te maken hebt met flinke verschillen in scale in een enkele scene. Merk op dat deze setting gebruik maakt van gl_FragDepth wanneer deze beschikbaar is en deze schakelt [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) uit en kan een verlies in prestaties veroorzaken. | `false` |
 | **outputColorSpace** | Definieert de uitvoercodering | `LinearEncoding` |

docs/zh/api/tres-canvas.md

@@ -77,7 +77,6 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **clearColor** | 清除画布后渲染器显示颜色。 | `#000000` |
 | **context** | 将渲染器附加到现有的 [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
 | **depth** | 绘图缓冲区是否至少具有16位的[深度缓冲区](https://en.wikipedia.org/wiki/Z-buffering) 。| `true` |
-| **disableRender** | 禁用 `requestAnimationFrame` 上的渲染，这对于后期处理非常有用。 | `false` |
 | **failIfMajorPerformanceCaveat** | 在性能较低时，是否检测渲染器创建失败。详细信息请参阅[WebGL](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2)规范。 | `false` |
 | **logarithmicDepthBuffer** | 是否使用深度缓冲区。如果在单个场景中处理巨大的比例差异，可能需要使用此选项。请注意，如果使用，此设置将使用gl_FragDepth，这将禁用[Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test)优化，可能会导致性能下降。 | `false` |
 | **outputColorSpace** | 定义输出编码 | `LinearEncoding` |

playground/vue/src/pages/loaders/componentDemo.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, UseLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+
+const url = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb'
+</script>
+
+<template>
+  <TresCanvas window-size clear-color="#333">
+    <TresPerspectiveCamera :position="[0, 3, 7]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Suspense>
+      <UseLoader v-slot="{ data }" :loader="GLTFLoader" :url="url">
+        <primitive :object="data.scene" />
+      </useloader>
+    </Suspense>
+    <TresDirectionalLight :position="[0, 10, 0]" :intensity="1" />
+    <TresAmbientLight :intensity="0.5" />
+  </TresCanvas>
+</template>

playground/vue/src/router/routes/loaders.ts

@@ -9,4 +9,9 @@ export const loaderRoutes = [
     name: 'FBX Loader',
     component: () => import('../../pages/loaders/fbx-loader/index.vue'),
   },
+  {
+    path: '/loader/component',
+    name: 'Loader Component',
+    component: () => import('../../pages/loaders/componentDemo.vue'),
+  },
 ]