|
@@ -1,89 +1,89 @@
|
|
|
# Composables
|
|
|
|
|
|
-La API de Composición de Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) te permite crear lógica reutilizable que se puede compartir entre componentes. También te permite crear hooks personalizados que se pueden utilizar en tus componentes.
|
|
|
+Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) pozwala na tworzenie wielokrotnie używalnej logiki, którą można udostępniać między komponentami. Pozwala również na tworzenie niestandardowych haków, które można używać w komponentach.
|
|
|
|
|
|
-**TresJS** aprovecha al máximo esta API para crear un conjunto de funciones composables que se pueden utilizar para crear animaciones, interactuar con la escena y más. También te permite crear escenas más complejas que podrían no ser posibles utilizando solo los Componentes de Vue (Texturas, Cargadores, etc.).
|
|
|
+**TresJS** w pełni korzysta z tego interfejsu API, aby stworzyć zestaw komponowalnych funkcji, które można wykorzystać do tworzenia animacji, interakcji ze sceną i więcej. Pozwala również na tworzenie bardziej skomplikowanych scen, które mogą nie być możliwe tylko przy użyciu komponentów Vue (tekstury, ładowarki, itp.).
|
|
|
|
|
|
-El núcleo de **TresJS** utiliza estos composables internamente, por lo que estarías utilizando la misma API que utiliza el núcleo. Por ejemplo, los componentes que necesitan actualizarse en el bucle de renderizado interno utilizan el composable `useRenderLoop` para registrar un callback que se llamará cada vez que el renderizador actualice la escena.
|
|
|
+Jądro **TresJS** używa tych komponowalnych elementów wewnętrznie, więc korzystasz z tego samego interfejsu API, którego używa jądro. Na przykład, komponenty, które wymagają aktualizacji wewnętrznej pętli renderowania, używają komponowalnego elementu useRenderLoop do zarejestrowania zwrotu, który zostanie wywołany za każdym razem, gdy renderer zaktualizuje scenę
|
|
|
|
|
|
## useRenderLoop
|
|
|
|
|
|
-El composable `useRenderLoop` es el núcleo de las animaciones en **TresJS**. Te permite registrar un callback que se llamará en la frecuencia de actualización nativa. Este es el composable más importante en **TresJS**.
|
|
|
+Komponowalny element `useRenderLoop` stanowi rdzeń animacji w **TresJS**. Pozwala na zarejestrowanie zwrotu, który będzie wywoływany przy naturalnej częstotliwości odświeżania. To najważniejszy komponowalny element w**TresJS**.
|
|
|
|
|
|
```ts
|
|
|
-const { onLoop, resume } = useRenderLoop()
|
|
|
+const { onLoop, resume } = useRenderLoop();
|
|
|
|
|
|
onLoop(({ delta, elapsed, clock, dt }) => {
|
|
|
// I will run at every frame ~60FPS (depending of your monitor)
|
|
|
-})
|
|
|
+});
|
|
|
```
|
|
|
|
|
|
-::: warning
|
|
|
-Ten en cuenta las implicaciones de rendimiento al usar este composable. Se ejecutará en cada fotograma, por lo que si tienes mucha lógica en tu callback, podría afectar el rendimiento de tu aplicación. Especialmente si estás actualizando estados o referencias reactivas.
|
|
|
+::: ostrzeżenie
|
|
|
+Miej na uwadze konsekwencje wydajnościowe przy korzystaniu z tego komponowalnego elementu. Będzie on wykonywany w każdej klatce, więc jeśli masz dużo logiki w swoim zwrocie, może to wpłynąć na wydajność twojej aplikacji. Szczególnie, jeśli aktualizujesz stany lub referencje reaktywne.
|
|
|
:::
|
|
|
|
|
|
-El callback `onLoop` recibe un objeto con las siguientes propiedades basadas en el [reloj de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock):
|
|
|
+Zwrot `onLoop` otrzymuje obiekt z następującymi właściwościami opartymi na [zegarze THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock):
|
|
|
|
|
|
-- `delta`: El tiempo transcurrido entre el fotograma actual y el último fotograma. Este es el tiempo en segundos desde el último fotograma.
|
|
|
-- `elapsed`: El tiempo transcurrido desde el inicio del bucle de renderizado.
|
|
|
+- `delta`: Czas, który upłynął między bieżącą klatką a poprzednią. Jest to czas w sekundach od ostatniej klatki.
|
|
|
+- `elapsed`: Czas, który upłynął od rozpoczęcia pętli renderowania.
|
|
|
|
|
|
-Este composable se basa en `useRafFn` de [vueuse](https://vueuse.org/core/useRafFn/). Gracias a [@wheatjs](https://github.com/orgs/Tresjs/people/wheatjs) por la increíble contribución.
|
|
|
+Ten komponowalny element opiera się na `useRafFn` z [vueuse](https://vueuse.org/core/useRafFn/). Dzięki [@wheatjs](https://github.com/orgs/Tresjs/people/wheatjs) za niesamowity wkład.
|
|
|
|
|
|
-### Antes y después de renderizar
|
|
|
+### Przed i po renderowaniu
|
|
|
|
|
|
-También puedes registrar un callback que se llamará antes y después de que el renderizador actualice la escena. Esto es útil si agregas un perfilador para medir los FPS, por ejemplo.
|
|
|
+Możesz również zarejestrować zwrot, który zostanie wywołany przed i po tym, jak renderownik zaktualizuje scenę. Jest to przydatne na przykład, gdy dodajesz profilator do pomiaru liczby klatek na sekundę (FPS).
|
|
|
|
|
|
```ts
|
|
|
-const { onBeforeLoop, onAfterLoop } = useRenderLoop()
|
|
|
+const { onBeforeLoop, onAfterLoop } = useRenderLoop();
|
|
|
|
|
|
onBeforeLoop(({ delta, elapsed }) => {
|
|
|
// Se ejecutara antes del renderizado de la escena
|
|
|
- fps.begin()
|
|
|
-})
|
|
|
+ fps.begin();
|
|
|
+});
|
|
|
|
|
|
onAfterLoop(({ delta, elapsed }) => {
|
|
|
// Se ejecutara después del renderizado de la escena
|
|
|
- fps.end()
|
|
|
-})
|
|
|
+ fps.end();
|
|
|
+});
|
|
|
```
|
|
|
|
|
|
-### Pausar y reanudar
|
|
|
+### Pauzowanie i wznowienie
|
|
|
|
|
|
-Puedes pausar y reanudar el bucle de renderizado utilizando los métodos `pause` y `resume` expuestos.
|
|
|
+Możesz wstrzymać i wznowić pętlę renderowania, korzystając z udostępnionych metod `pause` i `resume`.
|
|
|
|
|
|
```ts
|
|
|
-const { pause, resume } = useRenderLoop()
|
|
|
+const { pause, resume } = useRenderLoop();
|
|
|
|
|
|
// Pausa el bucle de renderizado
|
|
|
-pause()
|
|
|
+pause();
|
|
|
|
|
|
// Reanuda el bucle de renderizado
|
|
|
-resume()
|
|
|
+resume();
|
|
|
```
|
|
|
|
|
|
-También puedes obtener el estado activo del bucle de renderizado utilizando la propiedad `isActive`.
|
|
|
+Także możesz uzyskać aktualny stan pętli renderowania, korzystając z właściwości `isActive`.
|
|
|
|
|
|
```ts
|
|
|
-const { resume, isActive } = useRenderLoop()
|
|
|
+const { resume, isActive } = useRenderLoop();
|
|
|
|
|
|
-console.log(isActive) // false
|
|
|
+console.log(isActive); // false
|
|
|
|
|
|
-resume()
|
|
|
+resume();
|
|
|
|
|
|
-console.log(isActive) // true
|
|
|
+console.log(isActive); // true
|
|
|
```
|
|
|
|
|
|
## useLoader
|
|
|
|
|
|
-El composable `useLoader` te permite cargar recursos utilizando los [cargadores de THREE.js](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). Retorna una promesa con el recurso cargado.
|
|
|
+Kompozycja `useLoader` umożliwia ładowanie zasobów przy użyciu [ładowaczy THREE.js](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). Zwraca promise z załadowanym zasobem.
|
|
|
|
|
|
```ts
|
|
|
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
|
|
|
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
|
|
|
|
|
|
-const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
|
|
|
+const { scene } = await useLoader(THREE.GLTFLoader, "path/to/asset.gltf");
|
|
|
```
|
|
|
|
|
|
-Dado que el composable `useLoader` devuelve una promesa, puedes usarlo con `async/await` o `then/catch`. Si lo estás utilizando en un componente, asegúrate de envolverlo con un componente `Suspense`. Consulta [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) para obtener más información.
|
|
|
+Ponieważ kompozycja `useLoader` zwraca promise, możesz jej używać z `async/await` lub `then/catch`. . Jeśli używasz jej w komponencie, upewnij się, że otaczasz ją komponentem `Suspense`. Zobacz [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) po więcej informacji.
|
|
|
|
|
|
```vue
|
|
|
<template>
|
|
@@ -95,39 +95,48 @@ Dado que el composable `useLoader` devuelve una promesa, puedes usarlo con `asyn
|
|
|
|
|
|
## 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).
|
|
|
+Kompozycja `useTexture`umożliwia ładowanie tekstur przy użyciu [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader). Zwraca promise z załadowaną texturą lub texturami.
|
|
|
|
|
|
```ts
|
|
|
-const texture = await useTexture(['path/to/texture.png'])
|
|
|
+const texture = await useTexture(["path/to/texture.png"]);
|
|
|
```
|
|
|
|
|
|
-**useTexture** también acepta un objeto con las siguientes propiedades:
|
|
|
+**useTexture** akceptuje również obiekt z następującymi właściwościami:
|
|
|
|
|
|
-- `map`: una textura básica que se aplica a la superficie de un objeto
|
|
|
-- `displacementMap`: una textura que se utiliza para agregar protuberancias o indentaciones a la superficie del objeto
|
|
|
-- `normalMap`: una textura que se utiliza para agregar detalles de superficie y variaciones en el sombreado al objeto
|
|
|
-- `roughnessMap`: una textura que se utiliza para agregar rugosidad o un acabado mate a la superficie del objeto
|
|
|
-- `metalnessMap`: una textura que se utiliza para agregar un efecto metálico a la superficie del objeto
|
|
|
-- `aoMap`: una textura que se utiliza para agregar oclusión ambiental (sombreado en áreas donde la luz es bloqueada por otros objetos) al objeto.
|
|
|
-- `alphaMap`: una textura que se utiliza para agregar transparencia (la parte negra se renderiza como transparente) al objeto. Es necesario establecer :transparent="true" en el material para usar este mapa.
|
|
|
-- `matcap`: esta textura codifica el color y el sombreado del material.
|
|
|
+- `map`: podstawowa tekstura stosowana na powierzchni obiektu
|
|
|
+- `displacementMap`: tekstura używana do dodawania wypukłości lub wgłębień na powierzchni obiektu
|
|
|
+- `normalMap`: tekstura używana do dodawania szczegółów powierzchni i wariacji w cieniowaniu obiektu
|
|
|
+- `roughnessMap`: tekstura używana do dodawania chropowatości lub matowego wykończenia na powierzchni obiektu
|
|
|
+- `metalnessMap`: tekstura używana do dodawania efektu metalicznego na powierzchni obiektu
|
|
|
+- `aoMap`: tekstura używana do dodawania oksluzji otoczenia (cieniowanie w obszarach, gdzie światło jest blokowane przez inne obiekty) do obiektu.
|
|
|
+- `alphaMap`: tekstura używana do dodawania przejrzystości (czarna część renderowana jako przeźroczysta) do obiektu. Konieczne jest ustawienie :transparent="true" w materiale, aby używać tej mapy.
|
|
|
+- `matcap`: ta tekstura koduje kolor i cieniowanie materiału.
|
|
|
|
|
|
-En ese caso, devolverá un objeto con las texturas cargadas.
|
|
|
+W takim przypadku zostanie zwrócony obiekt z załadowanymi teksturami.
|
|
|
|
|
|
```ts
|
|
|
-const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
|
|
|
- map: 'path/to/albedo.png',
|
|
|
- displacementMap: 'path/to/height.png',
|
|
|
- normalMap: 'path/to/normal.png',
|
|
|
- roughnessMap: 'path/to/roughness.png',
|
|
|
- metalnessMap: 'path/to/metalness.png',
|
|
|
- aoMap: 'path/to/ambien-occlusion.png',
|
|
|
- alphaMap: 'path/to/alpha.png',
|
|
|
- matcap: 'path/to/matcap.png',
|
|
|
-})
|
|
|
+const {
|
|
|
+ map,
|
|
|
+ displacementMap,
|
|
|
+ normalMap,
|
|
|
+ roughnessMap,
|
|
|
+ metalnessMap,
|
|
|
+ aoMap,
|
|
|
+ alphaMap,
|
|
|
+ matcap,
|
|
|
+} = await useTexture({
|
|
|
+ map: "path/to/albedo.png",
|
|
|
+ displacementMap: "path/to/height.png",
|
|
|
+ normalMap: "path/to/normal.png",
|
|
|
+ roughnessMap: "path/to/roughness.png",
|
|
|
+ metalnessMap: "path/to/metalness.png",
|
|
|
+ aoMap: "path/to/ambien-occlusion.png",
|
|
|
+ alphaMap: "path/to/alpha.png",
|
|
|
+ matcap: "path/to/matcap.png",
|
|
|
+});
|
|
|
```
|
|
|
|
|
|
-Luego puedes vincular las texturas al material.
|
|
|
+Następnie możesz przypisać tekstury do materiału.
|
|
|
|
|
|
```vue
|
|
|
<template>
|
|
@@ -148,59 +157,59 @@ Luego puedes vincular las texturas al material.
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
-Similar al composable anterior, el composable `useTexture` devuelve una promesa, puedes usarlo con `async/await` o `then/catch`. Si lo estás utilizando en un componente, asegúrate de envolverlo con un componente `Suspense`.
|
|
|
+Podobnie jak poprzednia kompozycja, kompozycja `useTexture` zwraca obietnicę. Możesz jej używać z `async/await` lub `then/catch`. Jeśli używasz jej w komponencie, upewnij się, że otaczasz ją komponentem `Suspense`.
|
|
|
|
|
|
## useSeek
|
|
|
|
|
|
-El composable `useSeek` proporciona utilidades para recorrer y navegar fácilmente a través de escenas y gráficos de objetos complejos de ThreeJS. Exporta 4 funciones que te permiten encontrar objetos secundarios basados en propiedades específicas.
|
|
|
+Kompozycja `useSeek` dostarcza narzędzi do łatwego przeszukiwania i nawigowania przez sceny oraz grafiki obiektów w ThreeJS. Eksportuje 4 funkcje, które umożliwiają znajdowanie obiektów podrzędnych na podstawie określonych właściwości.
|
|
|
|
|
|
```ts
|
|
|
-const { seek, seekByName, seekAll, seekAllByName } = useSeek()
|
|
|
+const { seek, seekByName, seekAll, seekAllByName } = useSeek();
|
|
|
```
|
|
|
|
|
|
-La función `seek` acepta tres parámetros:
|
|
|
+Funkcja `seek` przyjmuje trzy parametry:
|
|
|
|
|
|
-- `parent`: Una escena ThreeJS u Object3D.
|
|
|
-- `property`: La propiedad que se utilizará en la condición de búsqueda.
|
|
|
-- `value`: El valor de la propiedad a coincidir.
|
|
|
+- `parent`: Scena ThreeJS lub Object3D.
|
|
|
+- `property`: Właściwość, która będzie używana w warunku wyszukiwania.
|
|
|
+- `value`: Wartość właściwości do dopasowania.
|
|
|
|
|
|
-La función `seek` y `seekByName` recorren el objeto y devuelven el objeto hijo con la propiedad y valor especificados. Si no se encuentra ningún hijo con la propiedad y valor dados, devuelve null y registra una advertencia.
|
|
|
+Funkcje `seek` i `seekByName` przeszukują obiekt i zwracają obiekt podrzędny z określoną właściwością i wartością. Jeśli nie zostanie znaleziony żaden obiekt podrzędny z podaną właściwością i wartością, zwraca null i rejestruje ostrzeżenie.
|
|
|
|
|
|
```ts
|
|
|
-const carRef = ref(null)
|
|
|
+const carRef = ref(null);
|
|
|
|
|
|
watch(carRef, ({ model }) => {
|
|
|
if (model) {
|
|
|
- const car = model.children[0]
|
|
|
+ const car = model.children[0];
|
|
|
|
|
|
- const body = seek(car, 'name', 'Octane_Octane_Body_0')
|
|
|
- body.color.set(new Color('blue'))
|
|
|
+ const body = seek(car, "name", "Octane_Octane_Body_0");
|
|
|
+ body.color.set(new Color("blue"));
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
```
|
|
|
|
|
|
-De manera similar, las funciones `seekAll` y `seekAllByName` devuelven un array de objetos secundarios cuya propiedad incluye el valor dado. Si no se encuentran coincidencias, devuelven un array vacío y se registra una advertencia.
|
|
|
+Podobnie jak wcześniej, funkcje `seekAll` i `seekAllByName` zwracają tablicę obiektów podrzędnych, których właściwość zawiera podaną wartość. Jeśli nie zostaną znalezione żadne dopasowania, zwracają pustą tablicę i rejestrują ostrzeżenie.
|
|
|
|
|
|
```ts
|
|
|
-const character = ref(null)
|
|
|
+const character = ref(null);
|
|
|
|
|
|
watch(character, ({ model }) => {
|
|
|
if (model) {
|
|
|
- const bones = seekAll(character, type, 'Bone')
|
|
|
+ const bones = seekAll(character, type, "Bone");
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
```
|
|
|
|
|
|
## useTresContext
|
|
|
-Este composable tiene como objetivo proporcionar acceso al modelo de estado que contiene múltiples propiedades útiles.
|
|
|
|
|
|
-```ts
|
|
|
-const { camera, renderer, camera, cameras } = useTresContext()
|
|
|
+Kompozycja ta ma na celu dostarczenie dostępu do modelu stanu, który zawiera wiele przydatnych właściwości.
|
|
|
|
|
|
+```ts
|
|
|
+const { camera, renderer, camera, cameras } = useTresContext();
|
|
|
```
|
|
|
|
|
|
::: warning
|
|
|
-`useTresContext` solo puede ser utilizado dentro de un `TresCanvas`, ya que `TresCanvas` actúa como el proveedor de los datos de contexto. Utiliza [el contexto expuesto por TresCanvas](tres-canvas#propiedades-públicas-expuestas) si necesitas acceder a él en componentes superiores a TresCanvas.
|
|
|
+`useTresContext` może być używane tylko wewnątrz komponentu `TresCanvas`, ponieważ `TresCanvas` działa jako dostawca danych kontekstowych. Użyj [kontekstu udostępnionego przez TresCanvas](tres-canvas#propiedades-públicas-expuestas), jeśli musisz uzyskać do niego dostęp w komponentach wyższego rzędu niż TresCanvas.
|
|
|
:::
|
|
|
|
|
|
```vue
|
|
@@ -213,24 +222,24 @@ const { camera, renderer, camera, cameras } = useTresContext()
|
|
|
// MyModel.vue
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { useTresContext } from '@tresjs/core'
|
|
|
+import { useTresContext } from "@tresjs/core";
|
|
|
|
|
|
-const context = useTresContext()
|
|
|
+const context = useTresContext();
|
|
|
</script>
|
|
|
```
|
|
|
|
|
|
-### Propiedades del contexto
|
|
|
-| Propiedad | Descripción |
|
|
|
-| --- | --- |
|
|
|
-| **camera** | la cámara actualmente activa |
|
|
|
-| **cameras** | las cámaras que existen en la escena |
|
|
|
-| **controls** | los controles de tu escena |
|
|
|
-| **deregisterCamera** | un método para cancelar el registro de una cámara. Esto solo es necesario si creas una cámara manualmente. Las cámaras en la plantilla se registran automáticamente. |
|
|
|
-| **extend** | Extiende el catálogo de componentes. Ver [extending](/advanced/extending) |
|
|
|
-| **raycaster** | el raycaster global utilizado para eventos de puntero |
|
|
|
-| **registerCamera** | un método para registrar una cámara. Esto solo es necesario si creas una cámara manualmente. Las cámaras en la plantilla se registran automáticamente. |
|
|
|
-| **renderer** | el [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) de tu escena |
|
|
|
-| **scene** | la [escena](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
|
|
|
-| **setCameraActive** | un método para establecer una cámara activa |
|
|
|
-| **sizes** | contiene el ancho, alto y relación de aspecto de tu lienzo |
|
|
|
-
|
|
|
+### Właściwości kontekstu
|
|
|
+
|
|
|
+| Właściwość | Opis |
|
|
|
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
+| **camera** | aktualnie aktywna kamera |
|
|
|
+| **cameras** | kamery istniejące w scenie |
|
|
|
+| **controls** | kontrolki Twojej sceny |
|
|
|
+| **deregisterCamera** | metoda do wyrejestrowania kamery. Jest to konieczne tylko wtedy, gdy ręcznie tworzysz kamerę. Kamery w szablonie są rejestrowane automatycznie. |
|
|
|
+| **extend** | Rozszerza katalog komponentów. Zobacz [rozszerzanie](/advanced/extending). |
|
|
|
+| **raycaster** | globalny raycaster używany do zdarzeń wskaźnika |
|
|
|
+| **registerCamera** | metoda do zarejestrowania kamery. Jest to konieczne tylko wtedy, gdy ręcznie tworzysz kamerę. Kamery w szablonie są rejestrowane automatycznie. |
|
|
|
+| **renderer** | el [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) Twojej sceny |
|
|
|
+| **scene** | la [scena](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
|
|
|
+| **setCameraActive** | metoda do ustawiania aktywnej kamery |
|
|
|
+| **sizes** | zawiera szerokość, wysokość i proporcję obrazu Twojego płótna |
|