From 471bd0d16fe496a0e5e6a71a62c93093c73ce834 Mon Sep 17 00:00:00 2001 From: Jaime Torrealba Date: Sat, 7 Sep 2024 21:34:02 +0100 Subject: [PATCH 1/6] feat: add UseLoader component --- docs/api/composables.md | 31 +++++++++++++++++-- docs/es/api/composables.md | 29 ++++++++++++++++- .../vue/src/pages/loaders/componentDemo.vue | 21 +++++++++++++ playground/vue/src/router/routes/loaders.ts | 5 +++ src/composables/index.ts | 3 +- src/composables/useLoader/component.vue | 16 ++++++++++ 6 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 playground/vue/src/pages/loaders/componentDemo.vue create mode 100644 src/composables/useLoader/component.vue diff --git a/docs/api/composables.md b/docs/api/composables.md index 2f261ecd6..fbb94a739 100644 --- a/docs/api/composables.md +++ b/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 ``` +### UseLoader as component + +You can also use `UseLoader` (with uppercase) as component like so: + +```vue + + + + + + +``` + +### 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: ``` -## Props +### Props | Prop | type | | ---- | --- | diff --git a/docs/es/api/composables.md b/docs/es/api/composables.md index 37254cb6c..5ea255913 100644 --- a/docs/es/api/composables.md +++ b/docs/es/api/composables.md @@ -93,6 +93,33 @@ Dado que el composable `useLoader` devuelve una promesa, puedes usarlo con `asyn ``` +### UseLoader como component + +Puedes usar `UseLoader` como componente, de la siguiente forma: + +```vue + + + + + + +``` + +### 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: ``` -## Props +### Props | Prop | type | | ---- | --- | diff --git a/playground/vue/src/pages/loaders/componentDemo.vue b/playground/vue/src/pages/loaders/componentDemo.vue new file mode 100644 index 000000000..fe8ffaa00 --- /dev/null +++ b/playground/vue/src/pages/loaders/componentDemo.vue @@ -0,0 +1,21 @@ + + + diff --git a/playground/vue/src/router/routes/loaders.ts b/playground/vue/src/router/routes/loaders.ts index 1af92f4d8..402ef7eee 100644 --- a/playground/vue/src/router/routes/loaders.ts +++ b/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'), + }, ] diff --git a/src/composables/index.ts b/src/composables/index.ts index 40009218d..70f53b268 100644 --- a/src/composables/index.ts +++ b/src/composables/index.ts @@ -1,4 +1,5 @@ import UseTexture from './useTexture/component.vue' +import UseLoader from './useLoader/component.vue' export * from './useCamera/' export * from './useLoader' @@ -12,4 +13,4 @@ export * from './useTexture' export * from './useTresContextProvider' export * from './useTresEventManager' export { onTresReady } from './useTresReady' -export { UseTexture } +export { UseTexture, UseLoader } diff --git a/src/composables/useLoader/component.vue b/src/composables/useLoader/component.vue new file mode 100644 index 000000000..87a06b985 --- /dev/null +++ b/src/composables/useLoader/component.vue @@ -0,0 +1,16 @@ + + + From 2ccd6c4104dd358e1a600a1e688d9a2c119611ab Mon Sep 17 00:00:00 2001 From: Jaime Torrealba Date: Sat, 7 Sep 2024 21:36:50 +0100 Subject: [PATCH 2/6] fix: eslint --- docs/advanced/performance.md | 9 ++++++--- docs/advanced/primitive.md | 6 +++++- playground/vue/src/pages/basic/Primitives.vue | 2 +- .../vue/src/pages/basic/ready/LoopCallbackWatcher.vue | 2 +- .../vue/src/pages/basic/ready/OnTresReadyWatcher.vue | 4 ++-- src/components/TresCanvas.vue | 2 +- src/composables/useRenderer/index.ts | 4 ++-- src/composables/useSeek/useSeek.test.ts | 2 +- src/composables/useTresReady/index.ts | 2 +- src/core/loop.test.ts | 2 +- src/core/nodeOps.test.ts | 2 +- src/core/nodeOps.ts | 6 ++---- src/devtools/plugin.ts | 2 +- src/utils/index.ts | 3 +-- 14 files changed, 26 insertions(+), 22 deletions(-) diff --git a/docs/advanced/performance.md b/docs/advanced/performance.md index befee1d1e..fd88dbe68 100644 --- a/docs/advanced/performance.md +++ b/docs/advanced/performance.md @@ -143,9 +143,12 @@ To avoid errors and unwanted sideeffects, resources created programatically with import { dispose } from '@tresjs/core' import { useGLTF } from '@tresjs/cientos' - const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { - draco: true, - }) + const { nodes } = await useGLTF( + 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', + { + draco: true, + }, + ) const model = nodes.Cube onUnmounted(() => { diff --git a/docs/advanced/primitive.md b/docs/advanced/primitive.md index 6b21f1702..29c2f1002 100644 --- a/docs/advanced/primitive.md +++ b/docs/advanced/primitive.md @@ -32,7 +32,11 @@ The same pointer events available on the TresJS components are available on the ```html ``` diff --git a/playground/vue/src/pages/basic/Primitives.vue b/playground/vue/src/pages/basic/Primitives.vue index 317559499..a9a94b2d6 100644 --- a/playground/vue/src/pages/basic/Primitives.vue +++ b/playground/vue/src/pages/basic/Primitives.vue @@ -9,8 +9,8 @@ import { Mesh, MeshToonMaterial, NoToneMapping, - SphereGeometry, SRGBColorSpace, + SphereGeometry, TorusGeometry, TorusKnotGeometry, } from 'three' diff --git a/playground/vue/src/pages/basic/ready/LoopCallbackWatcher.vue b/playground/vue/src/pages/basic/ready/LoopCallbackWatcher.vue index dbe8e2c1e..2fc8281bd 100644 --- a/playground/vue/src/pages/basic/ready/LoopCallbackWatcher.vue +++ b/playground/vue/src/pages/basic/ready/LoopCallbackWatcher.vue @@ -1,6 +1,6 @@