Browse Source

docs/next pages translated

Marcin Dekier 1 year ago
parent
commit
0d09ec35d1

+ 13 - 14
docs/es/examples/load-textures.md

@@ -15,10 +15,10 @@ El composable `useLoader` te permite pasar cualquier tipo de cargador de three.j
 Para obtener una explicación detallada de cómo usar `useLoader`, consulta la documentación de [useLoader](/api/composables#use-loader).
 
 ```ts
-import { useLoader } from '@tresjs/core'
-import { TextureLoader } from 'three'
+import { useLoader } from "@tresjs/core";
+import { TextureLoader } from "three";
 
-const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
+const texture = useLoader(TextureLoader, "/Rock035_2K_Color.jpg");
 ```
 
 Luego puedes pasar la textura a un material:
@@ -43,20 +43,19 @@ Una forma más conveniente de cargar texturas es utilizando el composable `useTe
 Para obtener más información sobre `useTexture`, consulta la documentación de [useTexture](/api/composables#use-texture).
 
 ```ts
-import { useTexture } from '@tresjs/core'
+import { useTexture } from "@tresjs/core";
 
 const pbrTexture = await useTexture({
-  map: '/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap: '/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: '/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: '/textures/black-rock/Rock035_2K_NormalDX.jpg',
-  aoMap: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-  metalnessMap: '/textures/black-rock/myMetalnessTexture.jpg',
-  matcap: '/textures/black-rock/myMatcapTexture.jpg',
-  alphaMap: '/textures/black-rock/myAlphaMapTexture.jpg'
-})
+  map: "/textures/black-rock/Rock035_2K_Displacement.jpg",
+  displacementMap: "/textures/black-rock/Rock035_2K_Displacement.jpg",
+  roughnessMap: "/textures/black-rock/Rock035_2K_Roughness.jpg",
+  normalMap: "/textures/black-rock/Rock035_2K_NormalDX.jpg",
+  aoMap: "/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg",
+  metalnessMap: "/textures/black-rock/myMetalnessTexture.jpg",
+  matcap: "/textures/black-rock/myMatcapTexture.jpg",
+  alphaMap: "/textures/black-rock/myAlphaMapTexture.jpg",
+});
 ```
-Similar to the previous example, we can pass all the textures to a material via props:
 
 Al igual que en el ejemplo anterior, podemos pasar todas las texturas a un material a través de props:
 

+ 35 - 46
docs/pl/advanced/caveats.md

@@ -1,118 +1,107 @@
-# Avisos 😱
+# Ostrzeżenia 😱
 
-Nuestro objetivo es proporcionar una forma sencilla de utilizar ThreeJS en VueJS con la mejor experiencia de desarrollo posible. Sin embargo, hay algunas advertencias de las que debes ser consciente.
+Naszym celem jest dostarczenie prostego sposobu korzystania z ThreeJS w VueJS z najlepszym możliwym doświadczeniem programistycznym. Niemniej jednak istnieją pewne ostrzeżenia, o których powinieneś być świadomy.
 
 ## ~~HMR y ThreeJS~~
 
 :::info
 
-Esto se ha solucionado en **TresJS** v1.7.0 🎉. Ahora puedes utilizar HMR sin tener que recargar la página 🥹.
+To zostało rozwiązane w **TresJS** v1.7.0 🎉. Teraz możesz używać HMR bez konieczności przeładowywania strony 🥹.
 
 :::
 
-La sustitución de módulos en caliente (HMR) es una característica que te permite actualizar tu código sin recargar la página. Esta es una gran característica que hace que el desarrollo sea mucho más rápido. **TresJS** utiliza [Vite](https://vitejs.dev/). Sin embargo, es realmente complicado hacer que funcione correctamente con ThreeJS.
+Hot Module Replacement (HMR) to funkcja, która pozwala na aktualizowanie kodu bez ponownego ładowania strony. To świetna cecha, która znacznie przyspiesza proces developmentu. **TresJS** korzysta z [Vite](https://vitejs.dev/). Jednakże, jest to naprawdę skomplikowane, aby zadziałało poprawnie z ThreeJS.
 
-¿Por qué? Porque Tres construye la escena de forma declarativa. Esto significa que crea la instancia y la añade a la escena cuando se monta el componente. La complejidad radica en saber cuándo quitar la instancia de la escena y cuándo añadirla de nuevo.
+Dlaczego? Ponieważ Tres buduje scenę deklaratywnie. Oznacza to, że tworzy instancję i dodaje ją do sceny podczas montowania komponentu. Złożoność polega na tym, kiedy usunąć instancję ze sceny i kiedy ponownie ją dodać.
 
-Aunque se ha implementado un flujo de eliminación mínimo, no es perfecto. Esto significa que a veces tendrás que recargar la página para ver los cambios correctamente, especialmente cuando estás haciendo referencia a instancias utilizando [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html)
+Chociaż został zaimplementowany minimalny proces usuwania, nie jest on idealny. Oznacza to, że czasami będziesz musiał przeładować stronę, aby zobaczyć zmiany poprawnie, zwłaszcza gdy odwołujesz się do instancji za pomocą [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html)
 
 ```vue
 <script setup lang="ts">
-const boxRef: Ref<TresInstance | null> = ref(null)
+const boxRef: Ref<TresInstance | null> = ref(null);
 
 onLoop(({ _delta, elapsed }) => {
   if (boxRef.value) {
-    boxRef.value.rotation.y += 0.01
-    boxRef.value.rotation.z = elapsed * 0.2
+    boxRef.value.rotation.y += 0.01;
+    boxRef.value.rotation.z = elapsed * 0.2;
   }
-})
+});
 </script>
 
 <template>
-  <TresMesh
-    ref="boxRef"
-    :scale="1"
-    cast-shadow
-  >
+  <TresMesh ref="boxRef" :scale="1" cast-shadow>
     <TresBoxGeometry :args="[1, 1, 1]" />
     <TresMeshStandardMaterial color="teal" />
   </TresMesh>
 </template>
 ```
 
-Si realizas un cambio en el `color` del componente `TresMeshStandardMaterial`, verás que el cambio se aplica pero la rotación ya no funciona. Esto se debe a que la instancia se elimina y se crea de nuevo.
+Jeśli dokonasz zmiany w `color` materiału `TresMeshStandardMaterial`, zauważysz, że zmiana ta zostanie zastosowana, ale rotacja już nie będzie działać. Dzieje się tak, ponieważ instancja jest usuwana i tworzona od nowa.
 
 :::tip
-Entonces, como **regla general**, debes recargar la página cuando no veas los cambios que has realizado.
+Więc, jako **regla general**, powinieneś przeładować stronę, gdy nie widzisz dokonanych zmian.
 :::
 
-Dicho esto, estamos trabajando en una mejor solución para esto 😁. Si tienes alguna idea de cómo resolverlo, por favor avísanos.
+Mówiąc to, pracujemy nad lepszym rozwiązaniem na to 😁. Jeśli masz jakieś pomysły, jak to rozwiązać, daj nam znać.
 
-Puedes seguir la discusión en [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
+Możesz śledzić dyskusję na [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
 
-## Reactividad
+## Reaktywność
 
-Todos amamos la reactividad 💚. Es una de las características más poderosas de VueJS. Sin embargo, debemos tener cuidado al usar ThreeJS.
+Wszyscy kochamy reaktywność 💚. Jest to jedna z najpotężniejszych cech VueJS. Jednak musimy być ostrożni podczas korzystania z ThreeJS.
 
-La reactividad de Vue se basa en [Proxy](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Esto permite que Vue 3 rastree automáticamente los cambios en los objetos de datos y actualice los elementos DOM correspondientes cada vez que los datos cambien.
+Reaktywność Vue opiera się na [Proxy](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Pozwala to Vue 3 śledzić automatycznie zmiany w obiektach danych i aktualizować odpowiednie elementy DOM za każdym razem, gdy dane się zmienią.
 
-Dado que estamos renderizando una escena y actualizándola en cada fotograma (60FPS), eso significa que estamos actualizando la escena 60 veces por segundo. Si el objeto a actualizar es reactivo, Vue intentará actualizar ese objeto tantas veces. Esto no es una buena idea 😅 y será perjudicial para el rendimiento.
+Ponieważ renderujemy scenę i aktualizujemy ją w każdej klatce (60FPS), oznacza to, że aktualizujemy scenę 60 razy na sekundę. Jeśli obiekt do aktualizacji jest reaktywny, Vue spróbuje zaktualizować ten obiekt tyle razy. To nie jest dobry pomysł 😅 i będzie miało negatywny wpływ na wydajność.
 
-Aquí tienes una prueba de rendimiento de la diferencia entre usar un objeto Proxy y un objeto plano.
+Oto test wydajności różnicy między użyciem obiektu Proxy a obiektem płaskim.
 
 <figure>
   <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
   <figcaption>Fig.1 - Ejecuciones por segundo Objeto Plano vs Proxy. </figcaption>
 </figure>
 
-Fuente: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
+Źródło: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
 
-Si te ves obligado a usar reactividad, utiliza [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+Jeśli jesteś zmuszony do użycia reaktywności, użyj [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
 
-A diferencia de `ref()`, el valor interno de un shallow ref se almacena y se expone tal cual, y no se hace reactividad profunda. Solo el acceso a `.value` es reactivo. Fuente [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+W przeciwieństwie do `ref()`, wewnętrzna wartość shallow ref jest przechowywana i ujawniana dokładnie tak, jak jest, i nie zachodzi reaktywność w głąb. Tylko dostęp do `.value` jest reaktywny. Źródło: [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
 
-### Ejemplo
+### Przykład
 
-❌ Incorrecto
+❌ Niepoprawne
 
 ```vue
 <script setup lang="ts">
-const position = reactive({ x: 0, y: 0, z: 0 })
+const position = reactive({ x: 0, y: 0, z: 0 });
 
 onLoop(({ _delta, elapsed }) => {
-  position.x = Math.sin(elapsed * 0.1) * 3
-})
+  position.x = Math.sin(elapsed * 0.1) * 3;
+});
 </script>
 
 <template>
-  <TresMesh
-    :position="position"
-    cast-shadow
-  >
+  <TresMesh :position="position" cast-shadow>
     <TresBoxGeometry :args="[1, 1, 1]" />
     <TresMeshStandardMaterial color="teal" />
   </TresMesh>
 </template>
 ```
 
-✅ Correcto
+✅ Poprawne
 
 ```vue
 <script setup lang="ts">
-const position = { x: 0, y: 0, z: 0 }
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+const position = { x: 0, y: 0, z: 0 };
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null);
 
 onLoop(({ _delta, elapsed }) => {
-  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3
-})
+  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3;
+});
 </script>
 
 <template>
-  <TresMesh
-    ref="boxRef"
-    :position="position"
-    cast-shadow
-  >
+  <TresMesh ref="boxRef" :position="position" cast-shadow>
     <TresBoxGeometry :args="[1, 1, 1]" />
     <TresMeshStandardMaterial color="teal" />
   </TresMesh>

+ 12 - 18
docs/pl/advanced/extending.md

@@ -1,42 +1,36 @@
-# Extender 🔌
+# Rozszerzania 🔌
 
-Tres ofrece la funcionalidad básica, pero es fácil agregar elementos de terceros y extenderlos en su catálogo interno.
+Tres oferuje podstawową funkcjonalność, ale łatwo można dodać elementy zewnętrzne i rozszerzyć je do wewnętrznego katalogu.
 
-La mayoría de las experiencias en 3D utilizan `OrbitControls`, que no forma parte de la biblioteca principal. Puedes agregarlo a tu proyecto importándolo desde el módulo `three/addons/controls/OrbitControls`.
+Większość doświadczeń 3D wykorzystuje `OrbitControls`, który nie jest częścią biblioteki głównej. Możesz dodać go do swojego projektu, importując go z modułu `three/addons/controls/OrbitControls`.
 
 ```js
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { OrbitControls } from "three/addons/controls/OrbitControls";
 ```
 
-## Extender un elemento dinámicamente
+## Dynamiczne rozszerzanie elementu
 
-También puedes agregarlo dinámicamente en tus componentes:
+Możesz również dodawać go dynamicznie w swoich komponentach:
 
 ```vue {2,3,4,7,13,15}
 <script setup lang="ts">
-import { extend } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { extend } from "@tresjs/core";
+import { OrbitControls } from "three/addons/controls/OrbitControls";
+import { TextGeometry } from "three/addons/geometries/TextGeometry";
 
 // Añadimos OrbitControls al catalogo interno
-extend({ TextGeometry, OrbitControls })
+extend({ TextGeometry, OrbitControls });
 </script>
 
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
+  <TresCanvas shadows alpha>
     <TresPerspectiveCamera :position="[5, 5, 5]" />
     <TresOrbitControls
       v-if="state.renderer"
       :args="[state.camera, state.renderer?.domElement]"
     />
     <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
+      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
       <TresMeshMatcapMaterial :matcap="matcapTexture" />
     </TresMesh>
   </TresCanvas>

+ 13 - 13
docs/pl/advanced/primitive.md

@@ -1,42 +1,42 @@
-# Primitives
+# Prymitywy
 
-El componente `<primitive />` es un componente versátil de bajo nivel en TresJS que te permite utilizar directamente cualquier objeto de three.js dentro de tu aplicación Vue sin una abstracción. Actúa como un puente entre el sistema de reactividad de Vue y el grafo de escena de three.js.
+Komponent `<primitive />` to wszechstronny, niskopoziomowy komponent w TresJS, który pozwala bezpośrednio używać dowolnego obiektu three.js w ramach Twojej aplikacji Vue bez abstrakcji. Działa jako most między systemem reaktywności Vue a grafem sceny three.js.
 
-## Usage
+## Użycie
 
 ```html
 <script setup lang="ts">
-  // Importa las clases necesarias de three.js
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+  // Importuj niezbędne klasy z three.js
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from "three";
 
-  // Crea una geometría de caja y un material básico
+  // Utwórz geometrię prostopadłościanu i podstawowy materiał
   const geometry = new BoxGeometry(1, 1, 1);
   const material = new MeshBasicMaterial({ color: 0x00ff00 });
 
-  // Crea un mesh con la geometría y el material
+  // Utwórz mesh z geometrią i materiałem
   const meshWithMaterial = new Mesh(geometry, material);
 </script>
 
 <template>
   <TresCanvas>
     <primitive :object="meshWithMaterial" />
-  </TresCanvas>  
+  </TresCanvas>
 </template>
 ```
 
 ## Props
 
-`object`: Esta propiedad espera un objeto `Object3D` de three.js o cualquiera de sus clases derivadas. Es el objeto principal que el componente `<primitive />` renderizará. En el ejemplo actualizado, se pasa un objeto `Mesh` con su correspondiente `Material` a esta propiedad.
+`object`: Ten prop oczekuje obiektu three.js typu `Object3D` lub dowolnej z jego klas pochodnych. To główny obiekt, który komponent `<primitive />` będzie renderować. W zaktualizowanym przykładzie do tego propa przekazywany jest obiekt `Mesh` z powiązanym `Material`.
 
-## Uso con Modelos
+## Użycie z Modelami
 
-El componente `<primitive />` es especialmente útil para renderizar objetos complejos como modelos cargados desde fuentes externas. El siguiente ejemplo muestra cómo cargar un modelo desde un archivo GLTF y renderizarlo utilizando el componente `<primitive />`.
+Komponent `<primitive />` jest szczególnie przydatny do renderowania skomplikowanych obiektów, takich jak modele wczytywane z zewnętrznych źródeł. Poniższy przykład pokazuje, jak wczytać model z pliku GLTF i renderować go przy użyciu komponentu `<primitive />`.
 
 ```html
 <script lang="ts" setup>
-import { useGLTF } from '@tresjs/cientos'
+  import { useGLTF } from "@tresjs/cientos";
 
-const { nodes } = await useGLTF('/models/AkuAku.gltf')
+  const { nodes } = await useGLTF("/models/AkuAku.gltf");
 </script>
 
 <TresCanvas>

+ 103 - 94
docs/pl/api/composables.md

@@ -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                                                                                   |

+ 9 - 9
docs/pl/api/events.md

@@ -1,6 +1,6 @@
 # Events
 
-**TresJS** los componentes emiten eventos de puntero cuando se interactúa con ellos. Esto es válido para los componentes que representan clases de three.js que derivan de [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (como mallas, grupos, ...).
+Komponenty **TresJS** emitują zdarzenia wskaźnika podczas interakcji z nimi. Dotyczy to komponentów reprezentujących klasy three.js, które dziedziczą po [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (takich jak meshy, grupy,...).
 
 <StackBlitzEmbed project-id="tresjs-events" />
 
@@ -15,13 +15,13 @@
 />
 ```
 
-| Event         | se dispara cuando ...                                                                 | Tipo(s) de parámetro del controlador de eventos                                                                                                                                                                       |
-| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click         | ... los eventos pointerdown y pointerup se disparan en el mismo objeto uno tras otro | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
-| pointer-move  | ... el puntero se mueve sobre el objeto                                               | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
-| pointer-enter | ... el puntero entra en el objeto                                                     | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
-| pointer-leave | ... el puntero sale del objeto                                                        | [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent)                                                                                                                         |
+| Zdarzenia     | Wywoływane, gdy... cuando ...                                                             | Typ(y) parametru obsługi zdarzeń                                                                                                                                                                   |
+| ------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| click         | ... zdarzenia pointerdown i pointerup są wywoływane na tym samym obiekcie jeden po drugim | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-move  | .... wskaźnik porusza się po obiekcie                                                     | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-enter | ... wskaźnik wchodzi do obiektu objeto                                                    | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-leave | ... wskaźnik opuszcza obiekt objeto                                                       | [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent)                                                                                                                         |
 
-La [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) devuelta incluye el [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) que desencadenó el evento. Puedes acceder a él a través de `intersection.object`.
+[Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) którą zwraca, obejmuje [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) który wywołał zdarzenie. Możesz uzyskać do niego dostęp za pomocą `intersection.object`.
 
-De forma predeterminada, los objetos posicionados delante de otros con controladores de eventos no evitan que se disparen esos eventos. Este comportamiento se puede lograr utilizando la propiedad `blocks-pointer-events`.
+Domyślnie obiekty umieszczone przed innymi z obsługą zdarzeń nie powodują zapobiegania wywołaniu tych zdarzeń. To zachowanie można osiągnąć, używając właściwości `blocks-pointer-events`.

+ 37 - 42
docs/pl/api/instances-arguments-and-props.md

@@ -1,16 +1,16 @@
-# Instancias
+# Instancje
 
-La idea principal de **Tres** es un _catálogo autogenerado_ de todos los elementos de ThreeJS. Este catálogo se genera a partir del código fuente de ThreeJS, por lo que siempre está actualizado.
+Główną ideą **Tres** jest _samogenerujący się katalog_ wszystkich elementów ThreeJS. Katalog ten jest generowany na podstawie kodu źródłowego ThreeJS, dzięki czemu zawsze jest aktualny.
 
-Cuando usas ThreeJS, necesitas importar los elementos que deseas utilizar. Por ejemplo, si quieres usar una `PerspectiveCamera`, necesitas importarla desde el paquete `three`:
+Kiedy korzystasz z ThreeJS, musisz importować elementy, które chcesz używać. Na przykład, jeśli chcesz użyć `PerspectiveCamera`, musisz go zaimportować z pakietu `three`:
 
 ```js
-import { PerspectiveCamera } from 'three'
+import { PerspectiveCamera } from "three";
 
-const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+const camera = new PerspectiveCamera(45, width / height, 1, 1000);
 ```
 
-Con **Tres** no necesitas importar nada, esto se debe a que **Tres** genera automáticamente un **Componente Vue basado en el objeto Three que deseas usar en CamelCase con un prefijo Tres**. Por ejemplo, si quieres usar una `PerspectiveCamera`, puedes usar el componente `<TresPerspectiveCamera />`.
+W przypadku **Tres** nie musisz nic importować, ponieważ **Tres** automatycznie generuje **Komponent Vue oparty na obiekcie Three, który chcesz użyć w CamelCase z prefiksem Tres**. Na przykład, jeśli chcesz użyć `PerspectiveCamera`, możesz skorzystać z komponentu `<TresPerspectiveCamera />`.
 
 ```vue
 <template>
@@ -21,48 +21,42 @@ Con **Tres** no necesitas importar nada, esto se debe a que **Tres** genera auto
 </template>
 ```
 
-Esto significa que puedes utilizar la misma [documentación](https://threejs.org/docs/) que usarías al utilizar ThreeJS básico, pero con el poder de Vue.
+Oznacza to, że możesz korzystać z tej samej [dokumentacji](https://threejs.org/docs/), której używałbyś przy korzystaniu z podstawowego ThreeJS, ale z siłą Vue.
 
-## Declarando objetos
+## Deklarowanie obiektów
 
-Si seguimos este argumento, deberías poder definir una instancia de esta manera: ❌
+Jeśli pójdziemy tym tokiem, powinieneś być w stanie zdefiniować instancję w ten sposób: ❌
 
 ```vue
 <template>
   <TresCanvas>
-    <TresPerspectiveCamera
-      visible
-      :position="new THREE.Vector3(1, 2, 3)"
-    />
+    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
     <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
 
-Pero con **Tres** esto no es necesario, puedes definir las propiedades de forma declarativa de la siguiente manera: ✅
+Jednak dzięki **Tres** to nie jest konieczne, możesz zdefiniować właściwości deklaratywnie w następujący sposób: ✅
 
 ```vue
 <template>
   <TresCanvas>
-    <TresPerspectiveCamera
-      visible
-      :position="[1, 2, 3]"
-    />
+    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
     <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
 
-## Argumentos
+## Argumenty
 
-Algunos objetos de ThreeJS tienen argumentos, por ejemplo, el constructor `PerspectiveCamera` tiene los siguientes argumentos:
+Niektóre obiekty w ThreeJS posiadają argumenty, na przykład konstruktor `PerspectiveCamera` ma następujące argumenty:
 
-- `fov` - Campo de visión vertical de la cámara.
-- `aspect` - Relación de aspecto del frustum de la cámara.
-- `near` - Plano cercano del frustum de la cámara.
-- `far` - Plano lejano del frustum de la cámara.
+- `fov` - Pionowy kąt widzenia kamery.
+- `aspect` - Współczynnik proporcji frustum kamery.
+- `near` - Bliski plan frustum kamery.
+- `far` - Daleki plan frustum kamery.
 
-Para pasar estos argumentos al componente `TresPerspectiveCamera`, puedes usar la propiedad `args`:
+Aby przekazać te argumenty do komponentu `TresPerspectiveCamera`, możesz użyć właściwości `args`:
 
 ```vue
 <template>
@@ -73,31 +67,32 @@ Para pasar estos argumentos al componente `TresPerspectiveCamera`, puedes usar l
 </template>
 ```
 
-Esto es lo mismo que hacer esto:
+To samo co zrobienie tego:
 
 ```ts
-const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000);
 ```
 
-## Propiedades
+## Właściwości
 
-También puedes pasar propiedades al componente, por ejemplo, el `TresAmbientLight` tiene una propiedad `intensity`, por lo que puedes pasarla al componente de la siguiente manera:
+Możesz także przekazywać właściwości do komponentu, na przykład `TresAmbientLight` ma właściwość `intensity`, więc możesz ją przekazać do komponentu w następujący sposób:
 
 ```html
 <TresAmbientLight :intensity="0.5" />
 ```
 
-### Establecer
+### Ustawianie
 
-Todas las propiedades cuyo objeto subyacente tiene un método `.set()` tienen un atajo para recibir el valor como un array. Por ejemplo, el `TresPerspectiveCamera` tiene una propiedad `position`, que es un objeto `Vector3`, por lo que puedes pasarlo al componente de esta manera:
+Wszystkie właściwości, których zasadniczy obiekt ma metodę `.set()`, mają skrót do przyjęcia wartości jako tablicy. Na przykład `TresPerspectiveCamera` ma właściwość `position`, która jest obiektem `Vector3`, więc możesz ją przekazać do komponentu w ten sposób:
 
 ```html
 <TresPerspectiveCamera :position="[1, 2, 3]" />
 ```
 
-Para especificar propiedades de transformación como posición, rotación y escala, hay una forma abreviada disponible que te permite indicar directamente el eje que deseas establecer dentro de las propiedades. Una forma abreviada similar también está disponible para la propiedad de color.
+Aby określić właściwości transformacji, takie jak pozycja, rotacja i skala, dostępna jest skrócona forma, która umożliwia bezpośrednie określenie osi, którą chcesz ustawić w ramach właściwości. Podobna forma skrócona jest także dostępna dla właściwości koloru.
+
+<!-- Zmieniłem składnię koloru z Vue na HTML, ponieważ Vue wydaje się być zepsute i nie koloruje zagnieżdżonych komponentów -->
 
-<!-- Cambié la sintaxis de color de Vue a HTML, porque Vue parece estar roto y no colorea los componentes anidados -->
 ```html
 <TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
   <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
@@ -105,8 +100,8 @@ Para especificar propiedades de transformación como posición, rotación y esca
 ```
 
 ::: warning
-Cuando estableces la propiedad de rotación en [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), se utilizará el orden 'XYZ' de forma predeterminada.
-Es importante tener en cuenta que al establecer la propiedad de rotación con la forma abreviada, el orden en el que estableces los ángulos importa. Para obtener más información sobre este tema, consulta [Ángulos de Euler](https://es.wikipedia.org/wiki/%C3%81ngulos_de_Euler)
+Przy ustawianiu właściwości rotacji w [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), używane jest domyślnie ustalone kolejność 'XYZ'.
+Ważne jest, aby pamiętać, że przy ustawianiu właściwości rotacji za pomocą formy skróconej, kolejność, w której ustawiasz kąty, ma znaczenie. Aby uzyskać więcej informacji na ten temat, sprawdź [Kąty Eulera](https://es.wikipedia.org/wiki/%C3%81ngulos_de_Euler)
 :::
 
 ```vue
@@ -114,12 +109,12 @@ Es importante tener en cuenta que al establecer la propiedad de rotación con la
 
 <TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
 
-<!-- Ten en cuenta que el orden de las propiedades de rotación importa y cambiar el orden puede dar lugar a resultados diferentes. -->
+<!-- Należy pamiętać, że kolejność właściwości rotacji ma znaczenie i zmiana kolejności może prowadzić do różnych rezultatów. -->
 ```
 
-### Escalar
+### Skalowanie
 
-Otro atajo que puedes usar es pasar un valor escalar a una propiedad que espera un objeto `Vector3`, usando el mismo valor para el resto del vector:
+Innym skrótem, który można użyć, jest przekazanie wartości skali do właściwości oczekującej obiektu `Vector3`, używając tej samej wartości dla reszty wektora:
 
 ```html
 <TresPerspectiveCamera :position="5" /> ✅
@@ -129,9 +124,9 @@ Otro atajo que puedes usar es pasar un valor escalar a una propiedad que espera
 <TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
 ```
 
-### Colores
+### Kolory
 
-Puedes pasar colores a los componentes usando la propiedad `color`, la cual acepta un string con el nombre del color o un valor hexadecimal:
+Możesz przekazywać kolory do komponentów, używając właściwości color, która akceptuje ciąg znaków z nazwą koloru lub wartość heksadecymalną:
 
 ```html
 <TresAmbientLight color="teal" /> ✅
@@ -141,9 +136,9 @@ Puedes pasar colores a los componentes usando la propiedad `color`, la cual acep
 <TresAmbientLight color="#008080" /> ✅
 ```
 
-### Métodos
+### Metody
 
-Algunas propiedades subyacentes son en realidad métodos, el `TresPerspectiveCamera` tiene un método `lookAt` heredado de [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), por lo que puedes pasarle las coordenadas al componente de esta manera:
+Niektóre właściwości bazowe są w rzeczywistości metodami, `TresPerspectiveCamera` posiada metodę `lookAt` dziedziczoną z [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), więc możesz przekazać do komponentu współrzędne w ten sposób:
 
 ```html
 <TresPerspectiveCamera :look-at="[1, 2, 3]" />

+ 42 - 49
docs/pl/api/tres-canvas.md

@@ -1,6 +1,6 @@
 # TresCanvas
 
-El componente `TresCanvas` es el componente principal de Tres. Es el que crea el `WebGLRenderer` de ThreeJS.
+Komponent `TresCanvas` to główny komponent w Tres. To on tworzy `WebGLRenderer` w ThreeJS.
 
 ```vue{2,5}
 <template>
@@ -11,9 +11,9 @@ El componente `TresCanvas` es el componente principal de Tres. Es el que crea el
 </template>
 ```
 
-## Tamaño del lienzo
+## Rozmiar płótna
 
-El componente `TresCanvas` utilizará el tamaño del elemento padre como tamaño del lienzo. Si deseas utilizar el tamaño de la ventana como tamaño del lienzo, puedes establecer la propiedad `window-size` en `true`.
+Komponent `TresCanvas` będzie używał rozmiaru elementu nadrzędnego jako rozmiaru płótna. Jeśli chcesz użyć rozmiaru okna jako rozmiaru płótna, możesz ustawić właściwość `window-size` na `true`.
 
 ```vue
 <template>
@@ -23,7 +23,7 @@ El componente `TresCanvas` utilizará el tamaño del elemento padre como tamaño
 </template>
 ```
 
-Or you can use CSS to set your canvas size.
+Możesz także użyć CSS, aby ustawić rozmiar swojej kanwy.
 
 ```css
 html,
@@ -41,11 +41,11 @@ body {
 
 ## Presets
 
-Tres viene con algunos presets para el componente `TresCanvas`. Puedes usarlos estableciendo la propiedad `preset`.
+Tres zawiera kilka presetów dla komponentu `TresCanvas`. Możesz ich użyć, ustawiając właściwość `preset`.
 
-### Realista
+### Realistyczny
 
-El preset `realista` facilita la configuración del renderizador para escenas 3D más realistas.
+Preset `realista` ułatwia konfigurację renderera do renderowania bardziej realistycznych scen 3D.
 
 ```vue
 <template>
@@ -55,51 +55,44 @@ El preset `realista` facilita la configuración del renderizador para escenas 3D
 </template>
 ```
 
-It's equivalent to:
+Jest równoważne:
 
 ```ts
-renderer.shadows = true
-renderer.physicallyCorrectLights = true
-renderer.outputColorSpace = SRGBColorSpace
-renderer.toneMapping = ACESFilmicToneMapping
-renderer.toneMappingExposure = 3
-renderer.shadowMap.enabled = true
-renderer.shadowMap.type = PCFSoftShadowMap
+renderer.shadows = true;
+renderer.physicallyCorrectLights = true;
+renderer.outputColorSpace = SRGBColorSpace;
+renderer.toneMapping = ACESFilmicToneMapping;
+renderer.toneMappingExposure = 3;
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = PCFSoftShadowMap;
 ```
 
 ## Props
 
-| Prop | Descripción | Valor por defecto |
-| ---- | ---- | --- |
-| **alpha** | Controla el valor alfa predeterminado. Cuando se establece en true, el valor es 0. De lo contrario, es 1. | false |
-| **antialias** | Indica si se debe realizar el antialiasing. | `true` |
-| **camera** | Una cámara manual que se utilizará por el renderizador. | |
-| **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` |
-| **powerPreference** | Proporciona una sugerencia al agente de usuario que indica qué configuración de GPU es adecuada para este contexto WebGL. Puede ser "high-performance", "low-power" o "default". | `default` |
-| **precision** | Precisión del shader. Puede ser "highp", "mediump" o "lowp". | "highp" si es compatible con el dispositivo |
-| **premultipliedAlpha** | Indica si el renderizador asumirá que los colores tienen [alfa premultiplicado](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` |
-| **preserveDrawingBuffer** | Indica si se deben preservar los búferes hasta que se borren o se sobrescriban manualmente. | `false` |
-| **shadows** | Habilita las sombras en el renderizador. | `false` |
-| **shadowMapType** | Establece el tipo de mapa de sombras. | `PCFSoftShadowMap` |
-| **stencil** | Indica si el búfer de dibujo tiene un [búfer de stencil](https://en.wikipedia.org/wiki/Stencil_buffer) de al menos 8 bits. | `true` |
-| **toneMapping** | Define la exposición de mapeo de tonos utilizada por el renderizador. | `NoToneMapping` |
-| **toneMappingExposure** | Nivel de exposición del mapeo de tonos. | `1` |
-| **useLegacyLights** | Indica si se debe utilizar el modo de iluminación heredado o no. | `true` |
-| **windowSize** | Indica si se debe utilizar el tamaño de la ventana como el tamaño del lienzo o el elemento padre. | `false` |
-
-### Valores predeterminados
-
-Tres intenta ser lo menos opinado posible. Es por eso que no establece casi ningún valor predeterminado para el componente `TresCanvas`. Utiliza los valores predeterminados de [three.js](https://threejs.org/). La única excepción es la propiedad `antialias`, que se establece en `true` de forma predeterminada.
-
-## Propiedades públicas expuestas
-
-| Propiedad | Descripción |
-| ---- | ---- |
-| context | ver [useTresContext](composables#usetrescontext) |
-
+| Prop                             | Opis                                                                                                                                                                                                                                                                                                                                                                      | Domyślna wartość                      |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
+| **alpha**                        | Kontroluje domyślną wartość alfa. Gdy ustawione na true, wartość wynosi 0. W przeciwnym razie 1.                                                                                                                                                                                                                                                                          | false                                 |
+| **antialias**                    | Wskazuje, czy ma być używane wygładzanie krawędzi.                                                                                                                                                                                                                                                                                                                        | `true`                                |
+| **camera**                       | Ręczna kamera, która będzie używana przez render.                                                                                                                                                                                                                                                                                                                         |                                       |
+| **clearColor**                   | Kolor, który render użyje do wyczyszczenia płótna.                                                                                                                                                                                                                                                                                                                        | `#000000`                             |
+| **context**                      | Można to użyć do dołączenia renderera do istniejącego [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext).                                                                                                                                                                                                                         |                                       |
+| **depth**                        | Wskazuje, czy bufor rysunku ma bufor [głębokości](https://en.wikipedia.org/wiki/Z-buffering) co najmniej 16 bitów.                                                                                                                                                                                                                                                        | `true`                                |
+| **disableRender**                | Wyłącza renderowanie w requestAnimationFrame, przydatne dla PostProcessing.                                                                                                                                                                                                                                                                                               | `false`                               |
+| **failIfMajorPerformanceCaveat** | Wskazuje, czy utworzenie renderera zakończy się niepowodzeniem, jeśli zostanie wykryta niska wydajność. Zobacz [specyfikację WebGL](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) dla więcej szczegółów.                                                                                                                                                      | `false`                               |
+| **logarithmicDepthBuffer**       | Wskazuje, czy powinien być używany bufor głębokości logarytmiczny. Może być konieczne użycie tego, jeśli obsługiwane są ogromne różnice skali w jednej scenie. Pamiętaj, że ta konfiguracja używa gl_FragDepth, jeśli jest dostępna, co wyłącza optymalizację [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) i może wpłynąć na wydajność. | `false`                               |
+| **outputColorSpace**             | Definiuje kodowanie kolorów wyjściowych.                                                                                                                                                                                                                                                                                                                                  | `LinearEncoding`                      |
+| **powerPreference**              | Zapewnia sugestię dla agenta użytkownika, wskazującą, która konfiguracja GPU jest odpowiednia dla tego kontekstu WebGL. Może to być "high-performance", "low-power" lub "default".                                                                                                                                                                                        | `default`                             |
+| **precision**                    | Precyzja shadera. Może to być "highp", "mediump" lub "lowp".                                                                                                                                                                                                                                                                                                              | "highp" jeśli urządzenie to obsługuje |
+| **premultipliedAlpha**           | Wskazuje, czy renderer zakłada, że kolory mają [alfa wymnożoną](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha).                                                                                                                                                                                                                         | `true`                                |
+| **preserveDrawingBuffer**        | Wskazuje, czy bufory powinny być zachowane do momentu ręcznego wyczyszczenia lub nadpisania.                                                                                                                                                                                                                                                                              | `false`                               |
+| **shadows**                      | Włącza cienie w renderze.                                                                                                                                                                                                                                                                                                                                                 | `false`                               |
+| **shadowMapType**                | Ustawia typ mapy cieni.                                                                                                                                                                                                                                                                                                                                                   | `PCFSoftShadowMap`                    |
+| **stencil**                      | Wskazuje, czy bufor rysunku ma bufor [stencil](https://en.wikipedia.org/wiki/Stencil_buffer) co najmniej 8 bitów.                                                                                                                                                                                                                                                         | `true`                                |
+| **toneMapping**                  | Definiuje ekspozycję mapowania tonów używaną przez render.                                                                                                                                                                                                                                                                                                                | `NoToneMapping`                       |
+| **toneMappingExposure**          | Ekspozycja mapowania tonów.                                                                                                                                                                                                                                                                                                                                               | `1`                                   |
+| **useLegacyLights**              | Wskazuje, czy należy używać trybu światła dziedziczonego.                                                                                                                                                                                                                                                                                                                 | `true`                                |
+| **windowSize**                   | Wskazuje, czy należy używać rozmiaru okna jako rozmiaru płótna, czy też rodzica elementu.                                                                                                                                                                                                                                                                                 | `false`                               |
+
+### Domyślne wartości
+
+Tres stara się być możliwie mało dogmatyczne. Dlatego nie ustawia prawie żadnych domyślnych wartości dla komponentu `TresCanvas`. Używa

+ 14 - 14
docs/pl/debug/devtools.md

@@ -1,26 +1,26 @@
-# Herramientas de desarrollo
+# Narzędzia deweloperskie
 
-Una de las cosas más difíciles a las que se enfrenta un desarrollador al crear experiencias 3D en el navegador es la depuración. El `canvas` del navegador es una caja negra y es difícil saber qué está sucediendo en su interior. La naturaleza imperativa de [ThreeJS](https://threejs.org/) hace que sea increíblemente difícil depurar, teniendo que depender de `console.log` para ver qué está sucediendo, o de terceros para ajustar y inspeccionar la escena.
+Jednym z najtrudniejszych wyzwań, przed którym stoi programista tworząc doświadczenia 3D w przeglądarce, jest debugowanie. Element `canvas` przeglądarki to czarna skrzynka, trudno jest zrozumieć, co się dzieje w środku. Imperatywny charakter [ThreeJS](https://threejs.org/) sprawia, że jest to niezwykle trudne do debugowania, trzeba polegać na `console.log` aby zobaczyć, co się dzieje, lub używać narzędzi zewnętrznych do dostrojenia i sprawdzenia sceny.
 
-No me hagas empezar con la comprobación del rendimiento de tu escena. 😱
+Niech mnie nie zaczynają od sprawdzania wydajności twojej sceny. 😱
 
-![desarrollador depurando 3D](/debug-3D.png)
+![deweloper debugujący 3D](/debug-3D.png)
 
-Uno de nuestros objetivos con TresJS es ofrecer **la mejor experiencia de desarrollo (DX, por sus siglas en inglés)** al trabajar con escenas 3D en el navegador. Gracias a la naturaleza declarativa del ecosistema y a la variedad de soluciones que ofrece el ecosistema de Vue, como Vue Devtools, Nuxt y Vite, podemos ofrecer mejores herramientas para que los desarrolladores depuren sus escenas.
+Jednym z naszych celów przy tworzeniu TresJS jest zaoferowanie **najlepszego DX (Developer Experience)** przy pracy ze scenami 3D w przeglądarce. Dzięki deklaratywnemu charakterowi ekosystemu, a także różnym rozwiązaniom oferowanym przez ekosystem Vue, takim jak Vue Devtools, Nuxt i Vite, możemy zapewnić lepsze narzędzia dla programistów do debugowania ich scen.
 
-## Presentando las Herramientas de Desarrollo
+## Przedstawiamy narzędzia deweloperskie
 
-A partir de la versión <Badge text="^3.7.0" />, estamos introduciendo las Herramientas de Desarrollo de TresJS, una pestaña de inspector personalizada para las [Herramientas de Desarrollo de Chrome oficiales de Vue](https://devtools.vuejs.org/guide/installation.html) que te permite inspeccionar tus escenas y componentes de TresJS.
+Od wersji <Badge text="^3.7.0" />, wprowadzamy narzędzia deweloperskie TresJS, dostosowaną zakładkę inspektora dla [ Oficjalnych narzędzi deweloperskich Chrome dla Vue](https://devtools.vuejs.org/guide/installation.html), które umożliwiają inspekcję scen i komponentów TresJS.
 
-![Herramientas de Desarrollo de TresJS](/vue-chrome-devtools.png)
+![Narzędzia deweloperskie TresJS](/vue-chrome-devtools.png)
 
-### Características
+### Funkcje
 
-- **Inspector de Escena**: Inspecciona la escena actual y sus componentes utilizando una vista en árbol similar al inspector de componentes de Vue Devtools.
-- **Asignación de Memoria**: Muestra cuánta memoria está utilizando cada componente.
-- **Inspector de Objetos**: Inspecciona las propiedades del objeto seleccionado en la escena, incluidos sus hijos.
-- **Propiedades Editables**: Y sí, puedes editar las propiedades del objeto seleccionado y ver los cambios en tiempo real.
+- **Inspektor Sceny**: Sprawdź bieżącą scenę i jej komponenty, korzystając z widoku drzewa podobnego do inspektora komponentów Vue Devtools.
+- **Przydzielanie Pamięci**: Zobacz, ile pamięci zużywają komponenty.
+- **Inspektor Obiektów**: Sprawdź właściwości wybranego obiektu w scenie, w tym jego dzieci.
+- **Edytowalne właściwości**: I tak, możesz edytować właściwości wybranego obiektu i zobaczyć zmiany w czasie rzeczywistym.
 
 ![](/devtools-scene-inspector.png)
 
-¡Disfruta de las nuevas Herramientas de Desarrollo y dinos qué opinas! 🎉
+Ciesz się nowymi narzędziami deweloperskimi i daj nam znać, co o nich myślisz! 🎉

+ 62 - 0
docs/pl/directives/v-always-look-at.md

@@ -0,0 +1,62 @@
+# v-always-look-at 👀
+
+Dzięki nowej dyrektywie v-always-look-at dostarczonej przez **TresJS**, możesz łatwo zadbać o to, aby [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) zawsze patrzył na określoną pozycję, którą można przekazać jako Vector3 lub tablicę.
+
+## Użycie
+
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]" />
+      <Box
+        v-always-look-at="new Vector3(0, 0, 0)"
+      />
+  </TresCanvas>
+</template>
+```
+
+Nie ważne, gdzie przeniesiesz Box, zawsze patrzy na pozycję [0,0,0].
+
+### Dlaczego nie używać wbudowanej metody look-at?
+
+Możesz zapytać, dlaczego nie używać metody `:look-at` bezpośrednio w komponencie? Dlaczego potrzebuję tego?
+
+Odpowiedź brzmi, że za pomocą metody `:look-at` wskażesz, aby patrzył na tę pozycję tylko raz, gdy instancja jest zamontowana, a następnie, jeśli obiekt się zmieni, to nie zostanie zaktualizowany.
+
+### Możesz patrzeć na inne instancje też!
+
+Inną zaletą jest to, że możesz patrzeć na instancję w ruchu, na przykład z kamerą, tak:
+
+```vue{4,6,20,23}
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+
+const sphereRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+// tutaj aktualizujemy pozycję kuli, a kamera zawsze będzie podążać za obiektem
+onLoop(({ elapsed }) => {
+  if (sphereRef.value) {
+    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
+  }
+})
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]"
+        v-always-look-at="sphereRef"
+      />
+      <Sphere
+        ref="sphereRef"
+        :scale="0.5"
+      />
+  </TresCanvas>
+</template>
+```

+ 36 - 0
docs/pl/directives/v-distance-to.md

@@ -0,0 +1,36 @@
+# v-distance-to
+
+Czy próbowałeś obliczyć odległość między dwoma Object3D?
+
+Dzięki nowej dyrektywie `v-distance-to` jest to łatwiejsze niż kiedykolwiek wcześniej. Wystarczy tylko wskazać obiekt docelowy do wykonania pomiaru, a wynik pojawi się w konsoli.
+
+Dodatkowo zostanie utworzona strzałka wskazująca, które obiekty są mierzone.
+
+```vue{2,8,13}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphere1Ref"
+      :position="[-2, slider, 0]"
+      :scale="0.5"
+    />
+    <Sphere
+      v-distance-to="sphere1Ref"
+      :position="[2, 0, 0]"
+      :scale="0.5"
+    />
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+Użycie `v-distance-to` jest reaktywne, więc doskonale współpracuje z @tres/leches 🍰.
+
+::: Uwagi
+`v-distance-to` nie zmierzy obiektu w ruchu w ramach renderLoop.
+:::

+ 35 - 0
docs/pl/directives/v-light-helper.md

@@ -0,0 +1,35 @@
+# v-light-helper 🔆
+
+Dzięki nowej dyrektywie **TresJS**, dostarczanej przez TresJS, możesz szybko dodać odpowiedniego pomocnika do swoich świateł za pomocą zaledwie jednej linii kodu 😍.
+
+Obsługiwane są następujące światła:
+
+- DirectionalLight
+- PointLight
+- SpotLight
+- HemisphereLight
+
+## Użycie
+
+```vue{2,8,11,14,17}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <TresDirectionalLight
+      v-light-helper
+    />
+    <TresPointLight
+      v-light-helper
+    />
+    <TresSpotLight
+      v-light-helper
+    />
+    <TresHemisphereLight
+      v-light-helper
+    />
+  </TresCanvas>
+</template>
+```

+ 50 - 0
docs/pl/directives/v-log.md

@@ -0,0 +1,50 @@
+# v-log
+
+### Problem
+
+Kiedy musisz zalogować swoją instancję, musisz użyć referencji szablonu, a następnie zalogować je:
+
+```vue
+<script setup lang="ts">
+import { shallowRef, watch } from "vue";
+
+const sphereRef = shallowRef();
+
+watch(sphereRef, (value) => {
+  console.log(value); // Really for a log?!!! 😫
+});
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere ref="sphereRef" :scale="0.5" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+I to jest DUŻO kodu tylko dla prostego loga, prawda?
+
+## Użycie
+
+Dzięki nowej dyrektywie v-log dostarczanej przez **TresJS**, możesz to zrobić, dodając `v-log` do instancji.
+
+```vue{2,10,12}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+      v-log:material  <!-- wyświetli tylko materiał 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+
+Zauważ, że możesz przekazać modyfikator o nazwie właściwości, na przykład `v-log:material` i zostanie bezpośrednio dodana właściwość `material` 😍

+ 30 - 34
docs/pl/examples/basic-animations.md

@@ -1,44 +1,41 @@
-# Basic Animations
+# Podstawowe animacje
 
-Esta guía te ayudará a comenzar con animaciones básicas en TresJS.
+Ten przewodnik pomoże ci rozpocząć pracę z podstawowymi animacjami w TresJS.
 
-Construiremos una escena simple con un cubo. Luego animaremos el cubo para que rote alrededor del eje Y y Z.
+Zbudujemy prostą scenę z sześcianem. Następnie animujemy sześcian, aby obracał się wokół osi Y i Z.
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVF1P2zAU/StW9kAZbVI+hTqKOjo0bRofYrwRHkxy2xoc27KdtlD1v+8mTloHBipSH5rjc889vh9eBLcazHelwmkOQS84MYlmyhIDNleEUzHux4E1cXAaC5YpqS1ZEDOhnMvZDYzIkoy0zMgWRm998yiF6pCKKTVtkhu4AZGC/iOlWkUMLFIeTZRI3Qy90g/MDqWwWnLzls5AWGmKiFgkUhhLHuS8sNL3fLVEzvm2x1kQKar0/aahlqO541ZrQVLglrYJcKoMpGS5TfqnZBELQtiItFyycEp5DtsOJpUDB4ZaWmqZFOEz2ek7NczwPu0FHdXJvpJuuFeyl7FYFs5OItcRrD9+WMgUpxbwi5CTdZFJwoHqTiK51NiwL8d7P86Gh3FQlCSVM0MoVxNKZkzgV8ewF6eAGs1qRxVciV+DNgoSy6YwpBloWp8S0lPSsMI/prvbbZO9Njm8jwOPMJJTPDtAFx5ISz3EdxuwQPcIdsMmPCrR3W63u4ZfWbwAMyEaRshz5cVL90xCObgkJKHGdlwZVpFV7Jmc/wSZgdXP6EyPTXWX4od38VJ5yS6lzii/wCZoRrlvJ6oprjvlp2sPAieR17ugHbhx72RUhY9GCly9cpbi6gA3rldPVxz4u1IcxMHEWmV6UZSkAuNxyNhUhwJsJFQW+fTBfngYdqOUGRsVMLLjoP1G2G3VZ7RdBMof+fIV3MxiZ0CfFBWbeF9xBwchjkOlXINhxooYX3uiYSPdgjdAxcNj9LsDJvPLgM8XPgob19ejD3a7ZYFxs2AeZs3qVjycPg3pJ4RdwEfSSOykkLENRGtqcfmD8Cji7MGXrB8bnElr8LEcsfGriUxkphgHfaWKfW9OZvng/i4xq3NY+UsmkDz9B380c2f5GocF9BTLvW4lriBYd3z+9xLm+H91mMk051Vz3jm8ASN5Xnh0tLNcpGjb45Vuf5ULxsT41pzPLQhTX6ph1D4rKNG7er9Xs+aA+7JwJb9sx/CDKq1vth/urwq+/AdyGHHw" />
 
 ## useRenderLoop
 
-El composable `useRenderLoop` es el núcleo de las animaciones en TresJS. Te permite registrar una función de devolución de llamada que se ejecutará cada vez que el renderizador actualice la escena con la frecuencia de actualización del navegador.
+Kompozycja `useRenderLoop` to rdzeń animacji w TresJS. Pozwala ona zarejestrować funkcję zwrotną, która zostanie wywołana za każdym razem, gdy renderer zaktualizuje scenę z częstotliwością odświeżania przeglądarki.
 
-Para obtener una explicación detallada de cómo funciona, consulta la documentación de [useRenderLoop](/api/composables#userenderloop).
+Aby uzyskać szczegółowe wyjaśnienie, jak to działa, zapoznaj się z dokumentacją [useRenderLoop](/api/composables#userenderloop).
 
 ```ts
-const { onLoop } = useRenderLoop()
+const { onLoop } = useRenderLoop();
 
 onLoop(({ delta, elapsed }) => {
   // Se ejecutará en cada fotograma ~ 60FPS (dependiendo de tu monitor)
-})
+});
 ```
 
-## Obteniendo la referencia al cubo
+## Pobieranie odniesienia do sześcianu
 
-Para animar el cubo, necesitamos obtener una referencia a él. Podemos hacerlo pasando una [Referencia de Plantilla](https://vuejs.org/guide/essentials/template-refs.html) utilizando la propiedad `ref` en el componente `TresMesh`. Esto nos devolverá la instancia de THREE.
+Aby animować sześcian, musimy uzyskać do niego odniesienie. Możemy to zrobić, przekazując [Template Ref](https://vuejs.org/guide/essentials/template-refs.html), używając atrybutu `ref` do komponentu `TresMesh`. Spowoduje to zwrócenie instancji THREE.
 
-Para mejorar el rendimiento, utilizaremos una [Referencia Superficial](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) para almacenar la referencia en lugar de una referencia regular. Puedes ver por qué [aquí](../advanced/caveats.md#reactivity)
+Dla poprawy wydajności będziemy używać [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) aby przechowywać odniesienie zamiast standardowego Ref. Zobacz dlaczego [tutaj](../advanced/caveats.md#reactivity)
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
+import { TresCanvas } from "@tresjs/core";
 
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null);
 </script>
 
 <template>
   <TresCanvas>
-    <TresMesh
-      ref="boxRef"
-      :scale="1"
-    >
+    <TresMesh ref="boxRef" :scale="1">
       <TresBoxGeometry :args="[1, 1, 1]" />
       <TresMeshNormalMaterial />
     </TresMesh>
@@ -46,44 +43,43 @@ const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
 </template>
 ```
 
-## Animando el cubo
+## Animowanie sześcianu
 
-Ahora que tenemos una referencia al cubo, podemos animarlo. Utilizaremos la devolución de llamada `onLoop` para actualizar la rotación del cubo.
+Teraz, gdy mamy odniesienie do sześcianu, możemy go animować. Skorzystamy z funkcji zwrotnej `onLoop`, aby aktualizować rotację sześcianu.
 
 ```ts
 onLoop(({ delta, elapsed }) => {
   if (boxRef.value) {
-    boxRef.value.rotation.y += delta
-    boxRef.value.rotation.z = elapsed * 0.2
+    boxRef.value.rotation.y += delta;
+    boxRef.value.rotation.z = elapsed * 0.2;
   }
-})
+});
 ```
 
-También puedes usar el `delta` del [reloj interno de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) o el `elapsed` para animar el cubo.
+Także możesz użyć `delta` z [wewnętrznego zegara THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) lub `elapsed`, aby animować sześcian.
 
-## ¿Pero por qué no usar la reactividad?
+## Ale dlaczego nie używać reaktywności?
 
-Es posible que te preguntes por qué no estamos usando la reactividad para animar el cubo. La respuesta es simple: rendimiento.
+Być może zastanawiasz się, dlaczego nie korzystamy z reaktywności do animowania sześcianu. Odpowiedź jest prosta: wydajność.
 
 ```vue
-// Esto es una mala idea
+// To jest złys pomysł
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
+import { TresCanvas } from "@tresjs/core";
 
-const boxRotation = reactive([0, 0, 0])
+const boxRotation = reactive([0, 0, 0]);
 
 onLoop(({ delta, elapsed }) => {
-  boxRotation[1] += delta
-  boxRotation[2] = elapsed * 0.2
-})
+  boxRotation[1] += delta;
+  boxRotation[2] = elapsed * 0.2;
+});
 </script>
 ```
 
-Podemos sentirnos tentados a usar la reactividad para animar el cubo. Pero sería una mala idea.
-La razón es que [la reactividad de Vue se basa en Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) y no está diseñada para ser utilizada en un bucle de renderizado que se actualiza 60 o más veces por segundo.
+Możemy być kuszeni do używania reaktywności do animowania sześcianu. Ale to byłby zły pomysł. Powodem jest to, że [reaktywność Vue opiera się na Proxy](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) i nie jest przeznaczona do użycia w pętli renderującej, która aktualizuje się 60 razy lub częściej na sekundę.
 
-La página incrustada a continuación muestra la [prueba de rendimiento de un proxy frente a un objeto regular](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Como puedes ver, el proxy es 5 veces más lento que el objeto regular.
+Zagnieżdżona strona poniżej przedstawia [prueba de rendimiento de un proxy frente a un objeto regular](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Jak widać, proxy jest 5 razy wolniejsze niż zwykły obiekt.
 
 <EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
 
-Puedes leer más sobre esto en la sección de [Caveats](../advanced/caveats.md#reactivity).
+Możesz przeczytać więcej na ten temat w sekcji [Ostrożność](../advanced/caveats.md#reactivity).

+ 3 - 3
docs/pl/examples/groups.md

@@ -1,8 +1,8 @@
-# Grupo
+# Grupa
 
-Un `<TresGroup>` es una instancia de la clase [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) que es casi lo mismo que un [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) pero te permite **agrupar varios objetos en la escena** para que puedan ser manipulados como una unidad única (transformación, rotación, etc).
+`<TresGroup>` to instancja klasy [THREE.Group](https://threejs.org/docs/#api/en/objects/Group), która jest prawie taka sama jak [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D), ale pozwala na **grupowanie wielu obiektów w scenie**, aby mogły być manipulowane jako jednostka (przesuwanie, obracanie itp.).
 
-## Uso
+## Użycie
 
 ```vue{13,22}
 <script setup lang="ts">

+ 47 - 72
docs/pl/examples/lights-shadows.md

@@ -1,57 +1,45 @@
-# Luces y sombras
+# Światło i Cienie
 
-Esta guía te ayudará a comenzar con luces y sombras simples en TresJS.
+Ten przewodnik pomoże Ci rozpocząć pracę z prostym oświetleniem i cieniami w TresJS.
 
-Construiremos una escena simple con tres mallas y un plano, pero solo dos tendrán sombras.
+Zbudujemy prostą scenę z trzema meshami i płaszczyzną, ale tylko dwa z nich będą miały cienie.
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
 
-## Configurando la escena (opcional)
+## Konfiguracja sceny (opcjonalne)
 
-Importamos todos los módulos que necesitamos, para mayor comodidad podemos usar orbit-controls de cientos,
-[ver aquí para saber cómo](/examples/orbit-controls).
+Konfiguracja sceny (opcjonalne)
+Importujemy wszystkie moduły, których potrzebujemy, dla większej wygody możemy użyć orbit-controls z pakietu cientos,
+[zobacz tutaj, aby dowiedzieć się jak](/examples/orbit-controls).
 
-Coloquemos cuatro objetos en nuestra escena, uno será el plano que recibirá sombras, dos de ellos proyectarán sombras y el último no proyectará ninguna sombra en absoluto.
+Umieśćmy cztery obiekty w naszej scenie, jeden z nich będzie płaszczyzną, która odbierze cienie, dwa z nich będą rzutować cienie, a ostatni nie będzie rzutował żadnych cieni w ogóle.
 
-Voy a usar [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Simplemente porque podemos ver fácilmente el "sobreado suave".
+Skorzystam z [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Po prostu dlatego, że łatwo zauważymy "delikatne cieniowanie".
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from "@tresjs/core";
+import { OrbitControls } from "@tresjs/cientos";
 </script>
 
 <template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
+  <TresCanvas clear-color="#111" window-size>
     <OrbitControls />
     <TresPerspectiveCamera :position="[5, 7.5, 7.5]" />
 
-    <TresMesh
-      :position="[-2, 2, 0]"
-      :rotation="[0, Math.PI, 0]"
-    >
+    <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]">
       <TresConeGeometry :args="[1, 1.5, 3]" />
       <TresMeshToonMaterial color="#82DBC5" />
     </TresMesh>
-    <TresMesh
-      :position="[0, 0, 0]"
-    >
+    <TresMesh :position="[0, 0, 0]">
       <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
       <TresMeshToonMaterial color="#4F4F4F" />
     </TresMesh>
-    <TresMesh
-      :position="[2, -2, 0]"
-    >
+    <TresMesh :position="[2, -2, 0]">
       <TresSphereGeometry />
       <TresMeshToonMaterial color="#FBB03B" />
     </TresMesh>
-    <TresMesh
-      :position="[0, -3, 0]"
-      :rotation="[-Math.PI / 2, 0, 0]"
-    >
+    <TresMesh :position="[0, -3, 0]" :rotation="[-Math.PI / 2, 0, 0]">
       <TresPlaneGeometry :args="[10, 10, 10, 10]" />
       <TresMeshStandardMaterial color="#f7f7f7" />
     </TresMesh>
@@ -59,72 +47,63 @@ import { OrbitControls } from '@tresjs/cientos'
 </template>
 ```
 
-## Luces (explicación)
+## Oświetlenie (wyjaśnienie)
 
-Como sabes, cada instancia en [ThreeJs](https://threejs.org/) está disponible en **TresJs**, por lo que todos los tipos de luces también están disponibles, solo necesitamos agregar el prefijo `Tres` para usarlos.
+Jak wiesz, każda instancja w [ThreeJs](https://threejs.org/) jest dostępna w **TresJs**, więc wszystkie rodzaje świateł są również dostępne, wystarczy dodać prefiks `Tres`, aby ich używać.
 
-Pero no todas las luces pueden generar sombras, esta definición proviene directamente de ThreeJs y tiene sentido. Por ejemplo, el propósito de una [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) es iluminar todos los lados de tu escena, por lo que no tiene sentido que genere sombras. En cambio, una [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper) que imita al sol puede y debe generar sombras.
+Ale nie wszystkie światła mogą generować cienie, to określenie pochodzi bezpośrednio z ThreeJs i ma sens. Na przykład, cel [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) to oświetlenie wszystkich stron sceny, więc nie ma sensu, aby generowało cienie. Z drugiej strony, [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper) który imituje słońce, może i powinien generować cienie.
 
-## Sombras (explicación)
+## Cienie (wyjaśnienie)
 
-También existen muchos tipos de sombras, por ejemplo, la "sombra suave" se genera automáticamente cuando un objeto recibe más luz de un lado, pero en resumen, una "sombra predeterminada de ThreeJS" que se dirige hacia otra superficie debe ser proyectada por una malla y otra malla debe recibirla. Como vemos en nuestro ejemplo, el `Plano` está recibiendo una sombra pero no la está proyectando. Ten en cuenta que no todos los materiales pueden proyectar o recibir sombras.
+Istnieje również wiele rodzajów cieni, na przykład "cienie miękkie" generują się automatycznie, gdy obiekt otrzymuje więcej światła z jednej strony, ale ogólnie rzecz biorąc, "domyślny cień ThreeJS", który kieruje się w stronę innej powierzchni, musi być rzutowany przez jedną siatkę, a druga siatka musi go odbierać. Jak widzimy w naszym przykładzie, `Plane` otrzymuje cień, ale go nie rzutuje. Należy pamiętać, że nie wszystkie materiały mogą rzutować lub odbierać cienie.
 
-Internamente, ThreeJS genera automáticamente una nueva malla con un [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial) que se actualiza en cada fotograma, por eso si aplicas animaciones, la sombra también se anima, pero también es por eso que debes usar las sombras con cuidado, ya que pueden ralentizar el rendimiento.
+Wewnętrznie ThreeJS automatycznie generuje nową siatkę z [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial) która jest aktualizowana w każdej klatce, dlatego jeśli zastosujesz animacje, cień również się animuje, ale to również dlatego, dlaczego należy ostrożnie korzystać z cieni, ponieważ mogą one wpływać na wydajność.
 
-::: warning
-El uso excesivo de sombras de esta manera puede afectar el rendimiento. Sin embargo, existen formas de mejorar el rendimiento. Para obtener más información, consulta [este video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
+::: Uwagi
+Zbyt częste korzystanie z cieni w ten sposób może wpływać na wydajność. Jednak istnieją sposoby na poprawę wydajności. Aby uzyskać więcej informacji, zobacz [to video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
 :::
 
-## Habilitando las sombras
+## Włączanie cieni
 
-Podemos dividir esto en tres pasos:
+Możemy podzielić to na trzy kroki:
 
-### Activar las sombras en el renderizador
+### Włączanie cieni w renderowaniu
 
 ```vue
 //...
 
 <template>
-  <TresCanvas
-    clear-color="#111"
-    shadows
-    window-size
-  />
+  <TresCanvas clear-color="#111" shadows window-size />
   //...
 </template>
 ```
-### Configurar la luz para proyectar sombras
 
-Podemos simplemente agregar el booleano `cast-shadow`, Vue lo interpreta como una `prop` con valor `true`.
+### Konfiguracja światła do rzucania cieni
+
+Możemy po prostu dodać boolean `cast-shadow`, Vue interpretuje to jako `prop` o wartości `true`.
 
-_La luz ambiental no genera ningún tipo de sombra aquí_
+_Oświetlenie ambientalne nie generuje tutaj żadnych cieni_
 
 ```vue
 //...
 
 <template>
   <TresAmbientLight :intensity="1" />
-  <TresDirectionalLight
-    cast-shadow
-    :position="[0, 2, 0]"
-    :intensity="1"
-  />
-  
+  <TresDirectionalLight cast-shadow :position="[0, 2, 0]" :intensity="1" />
+
   //...
 </template>
 ```
-### Establecer los objetos para proyectar o recibir sombras
 
-De manera similar al paso anterior, configuramos la malla que queremos que proyecte sombra (nuestra esfera) con la propiedad `cast-shadow`, y configuramos el objeto para recibir sombra (nuestro plano) con la propiedad `receive-shadow`.
+### Ustawianie obiektów do rzucania lub odbierania cieni
+
+Podobnie jak w poprzednim kroku, ustawiamy siatkę, którą chcemy, aby rzuciła cień (nasza sfera) za pomocą właściwości `cast-shadow`, a obiekt, który ma odbierać cień (nasza płaszczyzna) za pomocą właściwości `receive-shadow`.
 
 ```vue
 //...
 
 <template>
-  <TresMesh
-    cast-shadow
-    :position="[2, -2, 0]"
-  >
+  <TresMesh cast-shadow :position="[2, -2, 0]">
     <TresSphereGeometry />
     <TresMeshToonMaterial color="#FBB03B" />
   </TresMesh>
@@ -140,31 +119,27 @@ De manera similar al paso anterior, configuramos la malla que queremos que proye
 </template>
 ```
 
-Ahora tenemos todos los pasos necesarios para agregar sombras a nuestra escena, y si aplicamos lo que aprendimos en [animaciones básicas](/examples/basic-animations), y agregamos movimiento a nuestro cubo, verás que la sombra también se anima 🤩
+eraz mamy wszystkie niezbędne kroki, aby dodać cienie do naszej sceny, a jeśli zastosujemy to, co się nauczyliśmy w [podstawowych animacjach](/examples/basic-animations), i dodamy ruch do naszego sześcianu, zauważysz, że cień również animuje się 🤩
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from "vue";
+import { TresCanvas, useRenderLoop } from "@tresjs/core";
 
-const boxRef = shallowRef()
+const boxRef = shallowRef();
 
-const { onLoop } = useRenderLoop()
+const { onLoop } = useRenderLoop();
 
 onLoop(() => {
   if (boxRef.value) {
-    boxRef.value.rotation.y += 0.01
+    boxRef.value.rotation.y += 0.01;
   }
-})
+});
 </script>
 
 <template>
   //...
-  <TresMesh
-    ref="boxRef"
-    cast-shadow
-    :position="[0, 0, 0]"
-  >
+  <TresMesh ref="boxRef" cast-shadow :position="[0, 0, 0]">
     <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
     <TresMeshToonMaterial color="#4F4F4F" />
   </TresMesh>
@@ -172,4 +147,4 @@ onLoop(() => {
 </template>
 ```
 
-_Nota que intencionalmente no apliqué `cast-shadow` al `Cone` para que no proyecte ninguna sombra_
+_Zauważ, że celowo nie zastosowałem `cast-shadow` do `Cone`, aby nie rzutował żadnych cieni._

+ 44 - 39
docs/pl/examples/load-models.md

@@ -1,33 +1,33 @@
-# Cargar Modelos
+# Wczytywanie Modeli
 
-> Todos los modelos utilizados en esta guía son de [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
+> Wszystkie modele używane w tej instrukcji pochodzą od [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
 
-Los modelos 3D están disponibles en cientos de formatos de archivo, cada uno con diferentes propósitos, características variadas y complejidad variable.
+Modele 3D są dostępne w setkach różnych formatów plików, z różnymi zastosowaniami, różnymi cechami i zmienną złożonością.
 
-Para esta guía, nos vamos a centrar en cargar modelos gLTF (GL Transmission Format), que son el formato más común para modelos 3D en la web.
+W tej instrukcji skupimy się na wczytywaniu modeli w formacie gLTF (GL Transmission Format), który jest najbardziej powszechnym formatem dla modeli 3D w sieci.
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVdtu2zgQ/RVC++AsVpacuu12tc7CidsGu+i2Re0+VX2gpbHMhCIJkrLjBvn3DqmLJfeCFPCDNXNmeOZ+H6w0mEulol0FQRLMTKaZssSArdQ/qWClktqSe+JgCyp21JAHstGyJKO5RdmNiTOpYfR3D/tOr5ldSGG15N+BMxBWmoHFFTUsW25pLvf/UxWS5Yfrq4XkUi8VzSAkb+VKCkCVYqLoPNqtBhilonP0sSj44aoS4tAgovgochG6R1ORSWEsKTi5IPepICTjQLV/LiGj317/+eJq+nIUOo3xlExCrK7ASyhXW5qQDeWmFtQQpLY6KEhOI3EIWVlVYT7acJLT8BzIHuNLhuF69Z4J9LhkX9C64fKQillclwsLNbNQKk4t4H9CZr1y7cZrNL5Ig4Kngdc2+vegjYLMsh0saAma1rpEScMskwJNPj0JCf7++pwGjZJLeTum1ukmXjdpdHHrelj9Trys8DFhan5e0qtWh4pPYJ7oS6YdTSkof8OKrW09ZC6FyKQpWcvxJIRpSNyvCwHVTFh8g9kD6s9becfBT0S5dm3qnxvin6RBA53Fxyy7CsRdCYIwqDtyXFIV3RgpcLR8q6WNwqRBUjefk/UnySnSYGutMkkcZ7lA+xw42+lIgI2FKuM+fD6NnkWTOGfGxk6M6DTwLTNwXM/cr/iuLdD98777Rjx8xe6B3ioqHsO9w86fRpPovPHcCqOSOZu+bzfjj/HrcHP0+OwF8v0DTNlPA45+ZeDR+e3B5+cTn2AcIbiLymF2GxyuAA35LziuDX7mGoHjHEr2CKct1AX/NHoec7buu3QecVU8YE9ag5tvw4qTjsxkqRgH/U65kRl2JuVc7v/zsm4FepstZLffkd+Yu5rye2wW0DtM97GUVBdga/Wr5Vu4w/+dspR5xZvi/ED5AYzkleNYw3B15Ei7h/Ns//UDhotzZV7d+bltghoQtbitvfRTuxW6XqsFn33iPN6XY/GTLB0jm0bTXsKHx+f0vBJORYEbxS2D/qnVsOlOnLtZPRU2zyV+UU8hdJ/Xb1avf3hij8funpgMBB4PTCXwkNDOCxpfELqnzLbuzlwEo7bnNN1HBbPbao1qjd4wpTbCnvHbDx+jBqMxcUmZiL13ExfcbuIKYx8Legv5eO1S8I1gXJOAPHJ4d3B/7xOmfuXX/AZxnx3Jh3U8Pbus0hoJXnpjtMRknjWeomssr2uMGt4HRjvKK4hwex/OvLZ3Wb+5rUqzEq/LDkgi1zd4mbCGnkZzGfqH4OErWPcr8A==" />
 
-Hay varias formas de cargar modelos en TresJS:
+Istnieje kilka sposobów ładowania modeli w TresJS:
 
 ::: warning
-Por favor, ten en cuenta que en los ejemplos anteriores utilizamos el await de nivel superior, asegúrate de envolverlo con un componente [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense). Consulta Suspense para obtener más información.
+Proszę zauważyć, że w powyższych przykładach używamy oczekiwania na najwyższym poziomie (top level await), upewnij się, że owinięto to w komponent [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense). Zobacz Suspense po więcej informacji.
 :::
 
-## Usando `useLoader`
+## Użycie `useLoader`
 
-El composable `useLoader` te permite pasar cualquier tipo de cargador de three.js y una URL para cargar el recurso. Devuelve una `Promise` con el recurso cargado.
+Kompozycja `useLoader` pozwala przekazać dowolny rodzaj ładowacza three.js oraz URL do wczytania zasobu. Zwraca promise `Promise` z wczytanym zasobem.
 
-Para obtener una explicación detallada de cómo usar `useLoader`, consulta la documentación de [useLoader](/api/composables#useloader).
+Dla szczegółowego wyjaśnienia, jak korzystać z `useLoader`, sprawdź dokumentację [useLoader](/api/composables#useloader).
 
 ```ts
-import { useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+import { useLoader } from "@tresjs/core";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
 
-const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
+const { scene } = await useLoader(GLTFLoader, "/models/AkuAku.gltf");
 ```
 
-Luego puedes pasar la escena del modelo a un componente [`primitive`](/advanced/primitive) de TresJS para renderizarlo:
+Następnie możesz przekazać scenę modelu do komponentu [`primitive`](/advanced/primitive) w TresJS, aby go zrenderować:
 
 ```html{2}
 <TresCanvas>
@@ -35,53 +35,58 @@ Luego puedes pasar la escena del modelo a un componente [`primitive`](/advanced/
 </TresCanvas>
 ```
 
-> El componente `<primitive />` no es un componente independiente en el código fuente de Tres. En su lugar, es parte de la funcionalidad principal de Tres. Cuando usas `<primitive>`, se traduce a una llamada a `createElement`, que crea el objeto three.js adecuado según la propiedad "object" proporcionada.
+> Komponent `<primitive />` nie jest oddzielnym komponentem w źródle Tres. Zamiast tego jest częścią głównej funkcji Tres. Gdy używasz `<primitive>`, tłumaczy się to na wywołanie `createElement`, które tworzy odpowiedni obiekt three.js na podstawie dostarczonej właściwości "object".
 
-Observa en el ejemplo anterior que estamos utilizando el componente `Suspense` para envolver el componente `TresCanvas`. Esto se debe a que `useLoader` devuelve una `Promise` y necesitamos esperar a que se resuelva antes de renderizar la escena.
+Zauważ w powyższym przykładzie, że używamy komponentu `Suspense` do owinięcia komponentu `TresCanvas`. Wynika to z tego, że `useLoader` zwraca `Promise` i musimy poczekać, aż zostanie rozwiązana, zanim zrenderujemy scenę.
 
-## Usando `useGLTF`
+## Użycie `useGLTF`
 
-Una forma más conveniente de cargar modelos es utilizando el composable `useGLTF` disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+Bardziej wygodnym sposobem ładowania modeli jest użycie kompozycji `useGLTF` dostępnej w pakiecie [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
 
 ```ts
-import { useGLTF } from '@tresjs/cientos'
+import { useGLTF } from "@tresjs/cientos";
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
+const { scene, nodes, animations, materials } = await useGLTF(
+  "/models/AkuAku.gltf"
+);
 ```
 
-Una ventaja de usar `useGLTF` es que puedes pasar una propiedad `draco` para habilitar la [compresión Draco](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) para el modelo. Esto reducirá el tamaño del modelo y mejorará el rendimiento.
+Zaletą korzystania z `useGLTF` jest możliwość przekazania właściwości `draco` aby włączyć [kompresję Draco](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) dla modelu. Spowoduje to zmniejszenie rozmiaru modelu i poprawi wydajność.
 
 ```ts
-import { useGLTF } from '@tresjs/cientos'
+import { useGLTF } from "@tresjs/cientos";
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+const { scene, nodes, animations, materials } = await useGLTF(
+  "/models/AkuAku.gltf",
+  { draco: true }
+);
 ```
 
-Alternativamente, puedes seleccionar fácilmente objetos dentro del modelo utilizando la propiedad `nodes`.
+Alternatywnie, możesz łatwo wybierać obiekty wewnątrz modelu, korzystając z właściwości `nodes`.
 
 ```vue
 <script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+import { useGLTF } from "@tresjs/cientos";
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+const { scene, nodes, animations, materials } = await useGLTF(
+  "/models/AkuAku.gltf",
+  { draco: true }
+);
 </script>
 
 <template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-  >
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder 
+    <primitive :object="nodes.MyModel" /> // Proszę zauważyć, że tutaj jest
+    "MyModel" just a placeholder
   </TresCanvas>
 </template>
 ```
 
-## Usando `GLTFModel`
+## Użycie `GLTFModel`
 
-El componente `GLTFModel` es un envoltorio alrededor de `useGLTF` que está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+Komponent `GLTFModel` to opakowanie dla `useGLTF` dostępne w pakiecie [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
 
 ```vue{2,9}
 <script setup lang="ts">
@@ -99,19 +104,19 @@ import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 </template>
 ```
 
-Este enfoque en particular es más sencillo pero te brinda menos control sobre el modelo.
+Ten podejście jest bardziej proste, ale oferuje mniej kontroli nad modelem.
 
 ## useFBX
 
-El composable `useFBX` está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+Kompozycja `useFBX` jest dostępna w pakiecie [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
 
 ```ts
-import { useFBX } from '@tresjs/cientos'
+import { useFBX } from "@tresjs/cientos";
 
-const model = await useFBX('/models/AkuAku.fbx')
+const model = await useFBX("/models/AkuAku.fbx");
 ```
 
-Entonces, es tan sencillo como agregar la escena a tu escena:
+W takim razie, to tak proste jak dodanie sceny do twojej sceny:
 
 ```html{2}
 <TresCanvas shadows alpha>
@@ -121,7 +126,7 @@ Entonces, es tan sencillo como agregar la escena a tu escena:
 
 ## FBXModel
 
-El componente `FBXModel` es un envoltorio alrededor de `useFBX` que está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Su uso es similar al de `GLTFModel`:
+Komponent `FBXModel` to opakowanie dla `useFBX` dostępne w pakiecie [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Jego użycie jest podobne do `GLTFModel`:
 
 ```vue{2,9}
 <script setup lang="ts">

+ 26 - 27
docs/pl/examples/load-textures.md

@@ -1,27 +1,27 @@
-# Cargar Texturas
+# Ładowanie tekstur
 
-> Todas las texturas utilizadas en este ejemplo son de [ambientcg](https://ambientcg.com/).
+> Wszystkie tekstury używane w tym przykładzie pochodzą z [ambientcg](https://ambientcg.com/).
 
-Las texturas tridimensionales (3D) son imágenes que contienen múltiples capas de datos, lo que les permite representar volumen o simular estructuras tridimensionales. Estas texturas se utilizan comúnmente en gráficos 3D y efectos visuales para mejorar el realismo y la complejidad de escenas y objetos.
+Tekstury trójwymiarowe (3D) to obrazy zawierające wiele warstw danych, co pozwala im reprezentować objętość lub symulować struktury trójwymiarowe. Te tekstury są powszechnie stosowane w grafice 3D i efektach wizualnych, aby poprawić realizm i złożoność scen i obiektów.
 
 <SandboxDemo url="https://play.tresjs.org/#eNq9Vm1PGzkQ/itW7gNBJbvhVVWOVBToVb2DgoBvTVU5u5PE4LUt25uQi3K/5X7L/bIb27tZB1qUfqAgRcnj8TPPjMfjWbTuNJj3SiXTElq91rHJNFOWGLClIpyKcX/QsmbQejcQrFBSW3IHj7bUkJ9SzslIy4JsJWkMOqqt31f2C+JcnFExpYYsqx0nFrF7k2ZSr9te6SGzZ1JYLfl3zBkIK43b4f6P0yAXxeEPC4Xi1AL+IuS4cep+EpJxoLqTSS41hvTb273z07PDQSssmgnN5ayypFxNaPg6YwLxjmF/QwCUnIHuKA0j0CAyQKoJG086CvRI6oIi5DidsZeBQtYjSmvY6bsGbRRklk3hjBagK6+E9JQ0zDIpkP/L7g7Z2yGHX2uxuDySU1w5WOlHiHomRHcjUGDMCHWTGBx5bLfb7dZgLQpl3ZbII0xIYoWtnXhkmz4z9lGdM+1ikoLyC8yNXY+m66M5wGhIjwmL25md48IeAhk1thPOovJznDbniMBxGh1ya6cVyqZTUJXcGymwgBdu16BawLrtEY84LK45t4BHZ60yvTTNcoH7c+BsqhMBNhWqSGPzk/3kMOmmOTM2dTBaD1o7z4hDdf4Md9iB9EcxfQWve7EzoA+Kik20r2xPDhI8/Iq5BpOCuT0x90TDRrzO7gQZD9+i3jdgijgNeO9LAxvnNzI/2e36BON1g8ekWM9uZYd1gTX4E8Rhw0vUaNjJoWAbkNamLviD5CjlbBhTOsblQCyxJq3JpBix8ZOKzGShGAd9pdxNWK9MvFdy9qfHrC5hpS+bQPbwHfzePAbJ11gsoKeY7uYoqR6DDcsfbj/j1Y0WC5mXvDqcHyzegJG8dBqD2WkpcpQd2Xm1n/wFY2J8Zz48+ltcBbUm1M4VePRL3SFWtRaArz5x3t4fx9kLWWoi20/2o4Q/fXs2e8YWBJv46oGpnqxoFSuoIt5x328AD1tfSKl++IYNBB68sUQNdbWT9AmdUWYjsrYPBxtWj2zVBafpLBkzOymHaKeRBPNpEywY3/zQAzUYiEkLygQ2QM9j0iGn2UNHy+whvcGP7v7ht72/vp0zg/0xg8JR3Kvxls8t3v8Veom+Q0p/oQAty/FEgDGv7P2m9tO4Fu5d5q/s97N38vGicUuLoeviV1nGS3c5XtP7+ye+ahXL7agsjZrgzHKDRd93pd8WJefxursQpiyw3KWo6ry/XvntYD4QwaDdXhDskpaS5TbpvwsXNU3JJxybcFDQpSDUEpiCnuONwfmG/PPfv0fdP65vSTsHHBxybB9EjshclpoUUjAr9bYjYSPSXslNppSXsF33gSd4oqWlrlckc/KmH/SgytAcnN4XZsRqXrkEM3EZwRaxInfTickodwMezk7xZLI2GeH2W7/nI8gCLEbawy5lqrENZyz/4YadZm6K3N5aKnKq80uUpBnljYn7m3aG+MQgV9NRmjEu/MUXu1ML7iY4TDV2q5HTV5Zz+2ySWv4PY68KvA==" />
 
-Hay dos formas de cargar texturas 3D en TresJS:
+Istnieją dwie metody ładowania tekstur 3D w TresJS:
 
-## Usando `useLoader`
+## Korzystając z `useLoader`
 
-El composable `useLoader` te permite pasar cualquier tipo de cargador de three.js y una URL para cargar el recurso. Retorna una `Promise` con el recurso cargado.
+Kompozycja `useLoader` pozwala przekazać dowolny rodzaj ładowacza three.js oraz adres URL do zasobu do wczytania. Zwraca obiekt `Promise` z wczytanym zasobem.
 
-Para obtener una explicación detallada de cómo usar `useLoader`, consulta la documentación de [useLoader](/api/composables#use-loader).
+Aby uzyskać szczegółowe wyjaśnienie korzystania z `useLoader`, sprawdź dokumentację[useLoader](/api/composables#use-loader).
 
 ```ts
-import { useLoader } from '@tresjs/core'
-import { TextureLoader } from 'three'
+import { useLoader } from "@tresjs/core";
+import { TextureLoader } from "three";
 
-const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
+const texture = useLoader(TextureLoader, "/Rock035_2K_Color.jpg");
 ```
 
-Luego puedes pasar la textura a un material:
+Następnie możesz przekazać teksturę do materiału:
 
 ```html
 <Suspense>
@@ -34,31 +34,30 @@ Luego puedes pasar la textura a un material:
 </Suspense>
 ```
 
-Observa en el ejemplo anterior que estamos utilizando el componente `Suspense` para envolver el componente `TresCanvas`. Esto se debe a que `useLoader` devuelve una `Promise` y necesitamos esperar a que se resuelva antes de renderizar la escena.
+Zauważ w powyższym przykładzie, że używamy komponentu `Suspense` aby otoczyć komponent `TresCanvas`. Dzieje się tak, ponieważ `useLoader` zwraca obiekt `Promise`, i musimy poczekać, aż zostanie rozwiązany, zanim zrenderujemy scenę.
 
-## Usando `useTexture`
+## Korzystanie z `useTexture`
 
-Una forma más conveniente de cargar texturas es utilizando el composable `useTexture`. Acepta tanto un array de URLs como un objeto único con los caminos de las texturas mapeadas.
+ardziej wygodnym sposobem ładowania tekstur jest używanie kompozycji `useTexture`. Akceptuje zarówno tablicę adresów URL, jak i pojedynczy obiekt z ścieżkami odnośników do tekstur.
 
-Para obtener más información sobre `useTexture`, consulta la documentación de [useTexture](/api/composables#use-texture).
+Aby uzyskać więcej informacji na temat `useTexture`, sprawdź dokumentację [useTexture](/api/composables#use-texture).
 
 ```ts
-import { useTexture } from '@tresjs/core'
+import { useTexture } from "@tresjs/core";
 
 const pbrTexture = await useTexture({
-  map: '/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap: '/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: '/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: '/textures/black-rock/Rock035_2K_NormalDX.jpg',
-  aoMap: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-  metalnessMap: '/textures/black-rock/myMetalnessTexture.jpg',
-  matcap: '/textures/black-rock/myMatcapTexture.jpg',
-  alphaMap: '/textures/black-rock/myAlphaMapTexture.jpg'
-})
+  map: "/textures/black-rock/Rock035_2K_Displacement.jpg",
+  displacementMap: "/textures/black-rock/Rock035_2K_Displacement.jpg",
+  roughnessMap: "/textures/black-rock/Rock035_2K_Roughness.jpg",
+  normalMap: "/textures/black-rock/Rock035_2K_NormalDX.jpg",
+  aoMap: "/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg",
+  metalnessMap: "/textures/black-rock/myMetalnessTexture.jpg",
+  matcap: "/textures/black-rock/myMatcapTexture.jpg",
+  alphaMap: "/textures/black-rock/myAlphaMapTexture.jpg",
+});
 ```
-Similar to the previous example, we can pass all the textures to a material via props:
 
-Al igual que en el ejemplo anterior, podemos pasar todas las texturas a un material a través de props:
+Podobnie jak w poprzednim przykładzie, możemy przekazać wszystkie tekstury do materiału za pomocą propsów:
 
 ```html
 <Suspense>

+ 30 - 40
docs/pl/examples/orbit-controls.md

@@ -2,41 +2,38 @@
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVU1z2zYQ/Ss78nR0KEVSlp1JWaejWk7TdmInY+kW5gCRMAkbBDAAKFnj0X/PAhAlyvlydBJ23z7svl0snwYLTc3fSsWrlg6ywYUpNFMWDLWtAk5E9SYfWJMP/soFa5TUFp7gkhhWzGtSyvU1URHMb99dziSXeq5IQSO4kQspKLoUExVs4U7LBoa21pQO/+zxuKtnRKyI2YOmFm33JimkPsZ+0EtmZ1JYLbmJYEEf7eTq6zBGhZXGRSZJiIFiFwTLDWAUFSVmlYtcoMNYqDi8gadcABScEu3ryGB48vr06nJ2Poycx/haTQZWt9RbCFc1yeCOcBMMAYI1LzaKZs8lcgjZWtViCZ1O2XPdHMgehMuOdUT3Fsu6SEKHsB94sLRRnFiKJ4CLnp6r0ZKJEntXcd87wJ/3f6TaKFpYtqIz0lBNIFPSMMukQPSnswgmEfzxOR9A0oUdSX8wz1skEibcHfh9U7ojHDOnEYwjSJH5ALAYgL4ZZ8UD3AzhSpOq77/DS9FfW6tMliSarOOK2bpdtoZq11fsdlzIJnGVYfuJwbk1SUOYSFysSf5hmsxkSW9p1XKi43sjBdbWXbHPfafONTX1jdQN4deoqmaE7+tFRBIK7ARIningGa6YdupKQfh7VtX2KxFOIzhz8mbMpY+uDTrG8SmaCmLsKAzSQWZH+k6z8l/KFdU7O6ay7zUaLpLeIODR2A13f2vbcJybpSw3YcQboismMkhxkgAUKd1b6I41dQlnME7T37xhzUpb78/bXJzgKAain2ABlqR4qLRsRTkqwpM6SVN3D9LgDPsEB9EgvO9RQ5RvDW4gT5/vHLh4snChs/WXg3McJqMoBcaXlLOVjgW1iVBN0odPJ/F5nCYlMzZxZkTnA//ijojD+vgV7hCB9K/69Dvz8S12TcmDIuIlue+x07M4jcc75s4YN8zF9Lndcn0Jr8NNkfH8Neb7OzVNXwb8BuDLerG+Pfh0nHqBcenQx7g5VneHw8nWtPwF4hDwI2oEjkrasBeQdlBX/Fn8KuFs2ad0jDiaW5xJa3C13LHq2UTinlGMU/1Budd8PJmEc7n+39v2nwgfU9Pi4Rv2e/MYUv6Iw0L1CuU+tBLfKLXB/XZ+gyun52xk2fJdc77jvKVG8tblGGCX+AYx7R7OZ/uff2D4/Bfmrfsqmq6oo0Qtfs289VO3BfezFgyfvXAe79sx+4FKh8om8WQv+PYLbBTQQA==" />
 
-[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) es un controlador de cámara que te permite orbitar alrededor de un objetivo. Es una excelente manera de explorar tu escena.
+[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) to kontroler kamery, który umożliwia obracanie się wokół celu. To doskonały sposób na eksplorację swojej sceny.
 
-Sin embargo, no forma parte del núcleo de ThreeJS. Por lo tanto, para usarlo, necesitarías importarlo desde el módulo `three/addons/controls/OrbitControls`.
+Jednakże, nie jest to część rdzenia ThreeJS. Aby go używać, musisz go zaimportować z modułu `three/addons/controls/OrbitControls`.
 
-Esto crea un problema porque **TresJS** crea automáticamente un catálogo del núcleo de Three para que puedas usarlos como componentes.
+Powstaje problem, ponieważ **TresJS** automatycznie tworzy katalog rdzenia Three, abyś mógł używać ich jako komponentów.
 
-Afortunadamente, **TresJS** proporciona una forma de ampliar el catálogo de componentes. Puedes hacerlo utilizando el método `extend` de la biblioteca principal.
+Na szczęście, **TresJS** dostarcza sposób na rozszerzanie katalogu komponentów. Możesz to zrobić, korzystając z metody `extend` z biblioteki rdzenia.
 
-Para obtener más información sobre cómo ampliar tu catálogo de TresJS, consulta la sección de [extensión](/advanced/extending.md).
+Aby uzyskać więcej informacji na temat rozszerzania katalogu TresJS, zajrzyj do sekcji [extending](/advanced/extending.md).
 
-## Uso de OrbitControls
+## Użycie OrbitControls
 
-Para usar `OrbitControls`, debes importarlo desde el módulo `three/addons/controls/OrbitControls`.
+Aby używać `OrbitControls`, musisz go zaimportować z modułu `three/addons/controls/OrbitControls`.
 
 ```js
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { OrbitControls } from "three/addons/controls/OrbitControls";
 ```
 
-Luego, necesitas ampliar el catálogo de componentes utilizando el método `extend`.
+Następnie musisz rozszerzyć katalog komponentów, korzystając z metody `extend`.
 
 ```js
-import { extend } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { extend } from "@tresjs/core";
+import { OrbitControls } from "three/addons/controls/OrbitControls";
 
-extend({ OrbitControls })
+extend({ OrbitControls });
 ```
 
-Ahora puedes usar el componente `TresOrbitControls` en tu escena.
+Teraz możesz używać komponentu `TresOrbitControls` w swojej scenie.
 
 ```vue
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
+  <TresCanvas shadows alpha>
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <TresOrbitControls
       v-if="state.renderer"
@@ -46,34 +43,30 @@ Ahora puedes usar el componente `TresOrbitControls` en tu escena.
 </template>
 ```
 
-Dado que [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) necesita una referencia a la cámara y al renderizador, debes pasarlos como argumentos.
-
-Puedes usar el composable [useTres](/api/composables#usetres) para obtener la cámara y el renderizador.
+Ponieważ [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) wymaga odniesienia do kamery i renderera, musisz przekazać je jako argumenty.
 
+Możesz skorzystać z komponentu [useTres](/api/composables#usetres) aby uzyskać dostęp do kamery i renderera.
 
 ```ts
-import { useTres } from '@tresjs/core'
+import { useTres } from "@tresjs/core";
 
-const { state } = useTres()
+const { state } = useTres();
 ```
 
-Entonces, el código final sería algo como esto:
+Ostateczny kod wyglądałby mniej więcej tak:
 
 ```vue
 <script setup lang="ts">
-import { extend, useTres } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { extend, useTres } from "@tresjs/core";
+import { OrbitControls } from "three/addons/controls/OrbitControls";
 
-extend({ OrbitControls })
+extend({ OrbitControls });
 
-const { state } = useTres()
+const { state } = useTres();
 </script>
 
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
+  <TresCanvas shadows alpha>
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <TresOrbitControls
       v-if="state.renderer"
@@ -83,20 +76,17 @@ const { state } = useTres()
 </template>
 ```
 
-## OrbitControls de `cientos`
+## OrbitControls z `cientos`
 
-Aquí es donde comienza la parte interesante. ✨  
-El paquete `cientos` proporciona un componente llamado `<OrbitControls />` que es un envoltorio de los `OrbitControls` del módulo [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
+To jest moment, w którym zaczyna się część interesująca. ✨
+Pakiet `cientos` dostarcza komponentu o nazwie `<OrbitControls />` który jest opakowaniem dla `OrbitControls` z modułu [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
 
-¿Lo mejor? No necesitas ampliar el catálogo ni pasar ningún argumento.  
-Simplemente funciona. 💯
+Najlepsze w tym wszystkim? Nie musisz rozszerzać katalogu ani przekazywać żadnych argumentów.
+Po prostu działa. 💯
 
 ```vue
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
+  <TresCanvas shadows alpha>
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
   </TresCanvas>

+ 50 - 58
docs/pl/examples/shaders.md

@@ -1,35 +1,32 @@
-# Shaders
+# Shadery
 
-Esta guía te ayudará a comenzar con los shaders en TresJS.
+To przewodnik pomoże Ci rozpocząć pracę ze shaderami w TresJS.
 
-Construiremos una escena simple con un blob. Luego alo animaremos para distorsionarlo suavemente.
+Zbudujemy prostą scenę z blobem. Następnie animujemy bloba, aby delikatnie go zniekształcić.
 
 ::: warning
-_Es necesario tener conocimientos básicos sobre cómo funcionan los shaders_
+_Wymagana jest podstawowa wiedza na temat działania shaderów_
 :::
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVltv2zYU/iuE91BntSU7cYrBS4q0QTt0WNcgyfZSFxsjH9tMJVIjKdle4P++j9TFVJMU3oMDndvH71x4mIferSbzJs+jsqDetHdmEi1yywzZImcpl8vzWc+aWe/1TIosV9qyB2ZWPE3V+poWbMcWWmXsBaJf/By4ONRLLktuBqwwdE1yTvo3pfI24sLC5d7EidLd0E/6TthLJa1WqXnsLkhaZToRf1JilT5ufe1KE72YyZlMlDSW3aXqzpE9D5j3ZZGmR0BpnAopFkpnBl4PM8lYcSsymgK95GmBjxHbDbz+TZanwhbz0Chp3bDoj6LxgOHPURPwXtM/Bclk+0zA8WjATivv3Z5PSdrS5mbFUThw+nsma4awJMcBDeTQtbTnBZZFqjhydDn5nEuut0Iuq4jyj7JSKjFnGReyf1TVgDn7hGVqTumVMsIKJcHFyx+51WLDfvQu/by2Dtg4GrmyuuBOXLRlL9EAgHfVDmJPGeKwonnk9G2S0eZJzI3DTJT5BnPbxdw+g+kKFKRZCloHWTqxTbKDX1NZpn8F7rlW92gohH1lAsA6BqWGb+HqjV6jqU27F5ovM4x22PBcUyKMg89oLoosr9qI2EPbB4rvAXypUuUwfavQoIGLibZuTE/bjlV8KjYPTMn6toJteH/71Z2pzP3+A0NdLB8wSnluaM52R+z8dX28WLB+ffciP/ctr442yrglLXgaNXcw8t2qrCBQY7tQkNw5BmdxtaiwliBYQk8BAomxs/3uYUlKXA8Tlz722A/j8XjWc0tgrtaG8TRfcbYWEtLQiH+rcAB0N1DcqB3uFWmTuzaXdMkz0pxNm9HHAZ/HuPrV7wsOmi5UCe3k1H1zHwfRUZhK8MI31oT388J4NBpB6pz3kcyKaVrAXNfM+YdHopkTNBLn1XF15E2+Ik2/kMrI6i3O10vj/I8H7MT/HMPmrCbGDx/m17eDTcMdhNhQ9LQ7MwuHrsK5NB2FsfkMU4ybHH0fu1lPtbK8yXIIUqvo6gOLGcgj58cJX+G1eiLfMZz3vyeSdoe95UYkbd7tvEwmk+fYNmI1aFCcxcEU9ga96nUaZjyP7o2SeFv97M9qA8qA56ACnvXCx9AZZr2VtbmZxnEyl4jHJROljiTZWOZZHLpfnESn0SieC2Njp4b3rOcfng5w9Wz+H+wqAvCvQvha3T3Frol/zVH+A/Bb34tJhPGvkRtllAkXE2K7x/wQXOd3AcTTn8D3JZksLAP+P8EaO7i+gfvFGEsSiFgTtImybnVrP2wUjf10OHAV8D1oOA7nlIkDQBtXl/wkehWn4i6EbNYmZtIarPeFWH4zkYnKcpGS/pS769adTP//0q9eZ3VBLb9kRcnXJ/T3ZlNRvsKwkC5R7n0rcSfJVuZ3N7/TBt+tES9skdbNecZ4TUalheNYub0t5By0Az/P9oO/YHgeb827jSXpXtDHRO02J6/93GyDdtYqxRdfOO/v23H5nSrtMzuJTtqC7/4DVvHLxg==" />
 
-## Configurando la escena (opcional)
+## Konfiguracja sceny (opcjonalnie)
 
-Importamos todos los módulos que necesitamos. Para mayor comodidad, podemos usar los orbit-controls de cientos.
-[Consulta aquí para ver cómo](/examples/orbit-controls).
+Importujemy wszystkie moduły, których potrzebujemy, dla wygody możemy użyć orbit-controls z cientos,
+[zobacz tutaj, aby dowiedzieć się jak](/examples/orbit-controls).
 
-Ahora, coloquemos nuestra cámara en la posición `[11,11,11]`.
+Teraz umieśćmy naszą kamerę w pozycji `[11,11,11]`.
 
-Por último, para ayudarnos con la ubicación, agreguemos un plano simple, rotado en el eje X, con una medida de `[10, 10]` unidades.
+Na koniec, aby ułatwić nam orientację, dodajmy prostą płaszczyznę, obróconą wzdłuż osi X, o rozmiarze `[10, 10]`.
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from "@tresjs/core";
+import { OrbitControls } from "@tresjs/cientos";
 </script>
 
 <template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
+  <TresCanvas clear-color="#111" window-size>
     <OrbitControls />
     <TresPerspectiveCamera :position="[11, 11, 11]" />
 
@@ -43,9 +40,9 @@ import { OrbitControls } from '@tresjs/cientos'
 
 ## ShaderMaterial
 
-Como sabes, cada instancia en [ThreeJs](https://threejs.org/) está disponible en **TresJs**, por lo que también podemos usar el `ShaderMaterial`, solo necesitamos agregar el prefijo `Tres` para utilizarlo.
+Jak wiesz, każda instancja w [ThreeJs](https://threejs.org/) jest dostępna w **TresJs**, więc również `ShaderMaterial`, musimy tylko dodać przedrostek `Tres`, aby go użyć.
 
-Para nuestro blob, podríamos usar una simple `SphereGeometry` agregando algunos `widthSegments` y `heightSegments` para crear un efecto suave, y colocar nuestro blob 4 unidades en el eje Y positivo.
+Dla naszego bloba moglibyśmy użyć prostego `SphereGeometry` dodając kilka `widthSegments` i `heightSegments` aby stworzyć efekt gładkości, i umieścić naszego bloba 4 jednostki w osi Y dodatniej.
 
 ```vue
 <TresMesh :position="[0, 4, 0]">
@@ -54,23 +51,23 @@ Para nuestro blob, podríamos usar una simple `SphereGeometry` agregando algunos
 </TresMesh>
 ```
 
-El `ShaderMaterial` acepta propiedades especiales, como `uniforms`, `vertexShader` y `fragmentShader`, por lo que podemos crearlo en nuestra sección de script y hacer la conexión con nuestra instancia.
+`ShaderMaterial` przyjmuje specjalne właściwości, takie jak `uniforms`, `vertexShader` i `fragmentShader`, więc możemy go utworzyć w naszym skrypcie i dokonać powiązania z naszą instancją.
 
-Para este ejemplo, nuestros uniforms se ven así:
+Dla tego przykładu nasze uniforms wyglądają tak:
 
 ```ts
-import { Vector2 } from 'three'
+import { Vector2 } from "three";
 
 //...
 const uniforms = {
   uTime: { value: 0 },
   uAmplitude: { value: new Vector2(0.1, 0.1) },
   uFrequency: { value: new Vector2(20, 5) },
-}
+};
 //..
 ```
 
-Nuestro fragment shader se ve así:
+Nasz fragment shader wygląda tak:
 
 ```ts
 //...
@@ -81,11 +78,11 @@ varying vec2 vUv;
 void main() {
     gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
 }
-`
+`;
 //..
 ```
 
-Y finalmente nuestro `vertexShader`:
+A na koniec nasz `vertexShader`:
 
 ```ts
 const vertexShader = `
@@ -104,66 +101,61 @@ void main() {
     gl_Position = projectionMatrix * viewPosition;
     vUv = uv;
 }
-`
+`;
 //..
 ```
 
-## Animando el blob
+## Animowanie bloba
 
-Similar a lo que aprendimos en el ejemplo de [Animaciones básicas](/examples/basic-animations), comenzamos haciendo referencia a nuestro blob utilizando [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
+Podobnie jak w przypadku przykładu [Podstawowe animacje](/examples/basic-animations), zaczynamy od odwołania się do naszego bloba, używając [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { shallowRef } from "vue";
+import { TresCanvas } from "@tresjs/core";
+import { OrbitControls } from "@tresjs/cientos";
 
-const blobRef = shallowRef(null)
+const blobRef = shallowRef(null);
 //...
 </script>
 
 <template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
+  <TresCanvas clear-color="#111" window-size>
     <OrbitControls />
     <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <TresMesh
-      ref="blobRef"
-      :position="[0, 4, 0]"
-    >
+    <TresMesh ref="blobRef" :position="[0, 4, 0]">
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresShaderMaterial />
     </TresMesh>
   </TresCanvas>
 </template>
 ```
-Una vez que hayamos hecho eso, podemos usar el callback `onLoop` para animar nuestro `uTime`.
-
- ```ts
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
- 
- //...
- const { onLoop } = useRenderLoop()
- 
+
+Gdy już to mamy, możemy użyć funkcji `onLoop`, aby animować nasz `uTime`.
+
+```ts
+import { TresCanvas, useRenderLoop } from "@tresjs/core";
+
+//...
+const { onLoop } = useRenderLoop();
+
 onLoop(({ elapsed }) => {
-   if (blobRef.value) {
-     blobRef.value.material.uniforms.uTime.value = elapsed
-   }
-})
- //...
+  if (blobRef.value) {
+    blobRef.value.material.uniforms.uTime.value = elapsed;
+  }
+});
+//...
 ```
 
-Y eso es todo, tenemos nuestro shader básico funcionando sin problemas.
+I to wszystko, mamy nasz podstawowy shader działający płynnie.
 
-## Usando GLSL vite-plugin (opcional)
+## Korzystanie z wtyczki GLSL vite (opcjonalnie)
 
-_Este paso es completamente opcional y está fuera del alcance del equipo de **TresJs**_
+_Ten krok jest całkowicie opcjonalny i wychodzi poza zakres zespołu **TresJs**_
 
-Definir nuestro shader en línea no siempre es la mejor idea, pero si estás utilizando [vite](https://vitejs.dev/), puedes colocar tus archivos `GLSL` en un archivo diferente utilizando el [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) (consulta el enlace para obtener la documentación oficial).
+Definiowanie naszego shadera w jednym pliku nie zawsze jest najlepszym pomysłem, ale jeśli używasz [vite](https://vitejs.dev/), możesz umieścić swoje pliki `GLSL` w innym pliku, używając jedynie [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) (sprawdź link do oficjalnej dokumentacji).
 
-Y podrías tener una estructura similar a esta:
+A mogłbyś mieć strukturę podobną do tej:
 
 ```
 ├── src/
@@ -171,4 +163,4 @@ Y podrías tener una estructura similar a esta:
 │   ├── shaders/
 │       ├── vertexShader.glsl
 │       ├── fragmentShader.glsl
-```
+```

+ 56 - 69
docs/pl/examples/text-3d.md

@@ -1,72 +1,66 @@
 # Texto3D
 
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) es una de las formas en las que podemos agregar texto en 3D a nuestra escena.
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) to jedna z metod, dzięki której możemy dodać tekst w 3D do naszej sceny.
 
 <SandboxDemo url="https://play.tresjs.org/#eNqdVlFv2zYQ/iuEgsEbZkuOnXSd5gxe7G5YsbRF7LcqD7RES0wokiApO0Hg/74jKduUkWbp8hCYdx+/O3684+k5Wiqi/5Ay3jQkSqOJzhWVBmliGokY5uVVFhmdRb9nnNZSKIOe0TXWNF9UuBDbGyz7aHH71/VMMKEWEuekjz6JpeAEXJLyEu3QWoka9UylCOn9FvDY0DPMN1gfQFMDtnud5EJ1sZ/VipqZ4EYJ9gKcEm6EDnYsyaNpQXFiF/aAvYxnPBdcG1QydIWeM45QzghWLv0U9c7ej+bXs8te33q0O6JOkVENcRbMZIVTtMZMe4OHwFGXT5Kkp8pYhGiMbCDzvTzpqVwWZI56pV35wL2DU00SfzFwDbAwpJYMGwIrhCaBjJvBivICrqxk7soQ/Dn/F6K0JLmhGzLDNVEYpVJoaqjggP466o/6v95lEUr2m7p6H8yLBmi49pE9uxX64E9OAC74nCobWnDM/qFlZbqxh3006qMLGz2l3MBmap7AcR6PwJRjbQZe5TbKJDkeGAyTJFADlto8MfuzMjUD8VaiePL3XGNVUp6iIciJkMRF4dT2y4rYxFJ0Phz+4AxbWpjqsN5l/AzuwxP9BxahFc4fSiUaXgxyX1dnw6GNAzRwkS7BqB/5Sh3UWMb3WnDoPkeftQ5outQHtLawMawjiypjpE6TJC847C8IoxsVc2ISLuskhE/H8WU8TAqqTWLNgM4iV3YdYt9C38PtdwD9u5C+NXejmC3BDxLzt+R+wE4v4mF83jLvjXFN7Z6Q2z4sb+G1uCkwXr6HfH8mug5lgOeh0eTN+gbw6fnQCQydRx7juqtui4MKVqT4DmK/4TVqAA4KUtM3kO6h9vAX8buE0VVIaRmhNHdQk0bD87im5UlF5qKWlBH1Wdqu7VYmZkxsPzrb4Z10eyqSP7xgv9ePPuUvUCxEbUDu41VCjxLj3R8Wn+BpCZy1KBrWXs43nLdEC9bYHD3sGnoQ0g5wLtu/XYNB+y/1h0f34rSH6iRq4El31q/7x+5Qa95w54RzeHcds1dUOp5sHI8Dwfej6XT2hvMW6sHCGkVenpPhSAXceP7N+biffjU2OcyslvQK4S2mJojzoztyb19UCm/jkpqqWQFEAQVoZmIoCvcUAz/WkLROakw5PMeOwq5sEJ38Ekte2ol699Prk6ydJuP5Xm/UnRSD8z6CaTGEUXFEKLK2nyiw75asQ8ca0gTP/zqD3auTP6nCM1FAVZUNw8r1RBjhMASR+5T5uDiu3dy7Ibq6cSLAf6IoZij1okBenSsIJ6/7WhnPu6Mt2v0LMkc7LA=="/>
 
-Sin embargo, no forma parte del núcleo de ThreeJS. Por lo tanto, para usarlo, tendrías que importarlo desde el módulo `three/addons/controls/TextGeometry`.
+ednak nie jest to część rdzenia ThreeJS. Aby go użyć, musisz zaimportować go z modułu `three/addons/controls/TextGeometry`.
 
-Esto crea un problema porque **TresJS** crea automáticamente un catálogo del núcleo de Three para que puedas usarlos como componentes.
+To tworzy problem, ponieważ **TresJS** automatycznie tworzy katalog rdzenia Three, abyś mógł używać ich jako komponentów.
 
-Afortunadamente, **TresJS** proporciona una forma de ampliar el catálogo de componentes. Puedes hacerlo utilizando el método `extend` de la biblioteca principal.
+Na szczęście **TresJS** zapewnia sposób rozszerzania katalogu komponentów. Możesz to zrobić, używając metody `extend` z głównej biblioteki.
 
-Para obtener más información sobre cómo ampliar tu catálogo de TresJS, consulta la sección de [extending](/advanced/extending.md).
+Aby uzyskać więcej informacji na temat rozszerzania katalogu w TresJS, sprawdź sekcję [extending](/advanced/extending.md).
 
-## Usando TextGeometry
+## Użycie TextGeometry
 
-Para usar `TextGeometry`, debes importarlo desde el módulo `three/addons/geometries/TextGeometry`.
+Aby używać `TextGeometry`, musisz go zaimportować z modułu `three/addons/geometries/TextGeometry`.
 
 ```js
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { TextGeometry } from "three/addons/geometries/TextGeometry";
 ```
 
-Luego, debes ampliar el catálogo de componentes utilizando el método `extend`.
+Następnie musisz rozszerzyć katalog komponentów za pomocą metody `extend`.
 
 ```js
-import { extend } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { extend } from "@tresjs/core";
+import { TextGeometry } from "three/addons/geometries/TextGeometry";
 
-extend({ TextGeometry })
+extend({ TextGeometry });
 ```
 
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) necesita solo un argumento requerido, la fuente. Puedes ver un ejemplo a continuación.
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) wymaga tylko jednego wymaganego argumentu, czyli źródła. Przykład użycia możesz zobaczyć poniżej.
 
 ```js
-const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+const fontPath =
+  "https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json";
 
-const loader = new FontLoader()
+const loader = new FontLoader();
 
 const font = await new Promise((resolve, reject) => {
   try {
     loader.load(fontPath, (font) => {
-      resolve(font)
-    })
+      resolve(font);
+    });
+  } catch (error) {
+    reject(console.error("cientos", error));
   }
-  catch (error) {
-    reject(console.error('cientos', error))
-  }
-})
+});
 ```
 
-Ahora puedes usar el componente `TresTextGeometry` dentro de un TresMesh en tu escena.
+Teraz możesz użyć komponentu `TresTextGeometry` wewnątrz TresMesh w swojej scenie.
 
 ```vue
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
+  <TresCanvas shadows alpha>
     <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
+      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
     </TresMesh>
   </TresCanvas>
 </template>
 ```
 
-luego, como en el ejemplo, puedes pasar un objeto con las configuraciones deseadas.
+Następnie, podobnie jak w przykładzie, możesz przekazać obiekt z pożądanymi konfiguracjami.
 
 ```ts
 const fontOptions = {
@@ -78,10 +72,10 @@ const fontOptions = {
   bevelSize: 0.02,
   bevelOffset: 0,
   bevelSegments: 4,
-}
+};
 ```
 
-También podemos pasar una matcapTexture para agregar detalles finales, utilizando TresMeshNormalMaterial dentro de TresMesh.
+Możemy również przekazać teksturę matcapTexture, aby dodać drobne detale, używając TresMeshNormalMaterial wewnątrz TresMesh.
 
 ```ts
 const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
@@ -92,18 +86,19 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
   </TresMesh>
 ```
 
-Entonces, el código final sería algo como esto:
+W takim razie, końcowy kod wyglądałby mniej więcej tak:
 
 ```vue
 <script setup lang="ts">
-import { extend } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-import { FontLoader } from 'three/addons/loaders/FontLoader'
-import { useTexture } from '/@/composables'
+import { extend } from "@tresjs/core";
+import { TextGeometry } from "three/addons/geometries/TextGeometry";
+import { FontLoader } from "three/addons/loaders/FontLoader";
+import { useTexture } from "/@/composables";
 
-extend({ TextGeometry })
+extend({ TextGeometry });
 
-const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+const fontPath =
+  "https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json";
 
 const fontOptions = {
   size: 0.5,
@@ -114,67 +109,59 @@ const fontOptions = {
   bevelSize: 0.02,
   bevelOffset: 0,
   bevelSegments: 4,
-}
+};
 
-const loader = new FontLoader()
+const loader = new FontLoader();
 
 const font = await new Promise((resolve, reject) => {
   try {
     loader.load(fontPath, (font) => {
-      resolve(font)
-    })
-  }
-  catch (error) {
-    reject(console.error('cientos', error))
+      resolve(font);
+    });
+  } catch (error) {
+    reject(console.error("cientos", error));
   }
-})
+});
 
-const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+const matcapTexture = await useTexture([
+  "https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png",
+]);
 </script>
 
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
+  <TresCanvas shadows alpha>
     <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
+      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
       <TresMeshNormalMaterial :matcap="matcapTexture" />
     </TresMesh>
   </TresCanvas>
 </template>
 ```
 
-Sé que parece mucho trabajo, pero tengo buenas noticias, hay una forma mucho más sencilla.
+Rozumiem, że może wydawać się to dużo pracy, ale mam dobre wieści, istnieje znacznie prostsze rozwiązanie.
 
-## TextGeometry de `cientos`
+## TextGeometry z `cientos`
 
-El paquete `cientos` proporciona un componente llamado `<Text3D />` que es un envoltorio de `TextGeometry` del módulo [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
+Pakiet `cientos` dostarcza komponentu o nazwie `<Text3D />` który jest opakowaniem dla `TextGeometry` z modułu [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
 
-¿Lo mejor? No necesitas extender el catálogo, solo pasa el argumento de la fuente.
-Simplemente funciona. 💯 (si no se proporciona un texto, el texto será TresJS)
+Co najlepsze? Nie musisz rozszerzać katalogu, po prostu przekaż argument dla źródła.
+Po prostu działa. 💯 (jeśli nie podano tekstu, tekst będzie TresJS)
 
 ```vue
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
+  <TresCanvas shadows alpha>
     <Text3D :font="fontPath" />
   </TresCanvas>
 </template>
 ```
 
-Podemos pasar las opciones como props
+Możemy przekazać opcje jako propsy
 
 ```html
 <Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
 ```
 
-en caso de que no se proporcionen las opciones, los valores predeterminados son:
+w przypadku braku dostarczenia opcji, wartości domyślne to:
 
 ```js
 size: 0.5,
@@ -187,7 +174,7 @@ bevelOffset: 0,
 bevelSegments: 4,
 ```
 
-De forma predeterminada, el texto en ThreeJS comienza en la posición inicial de la malla, por lo que si es [0,0,0], el texto comenzará allí, pero podemos centrarlo simplemente pasando la bandera "center".
+Domyślnie tekst w ThreeJS zaczyna się w pozycji początkowej meshu, więc jeśli jest to [0,0,0], tekst zacznie się tam, ale możemy go wyśrodkować, po prostu przekazując flagę "center".
 
 ```vue
 <Text3D :font="fontPath" :text="my 3d text" center />

+ 72 - 72
docs/pl/guide/migration-guide.md

@@ -1,6 +1,6 @@
-# Guía de Migración
+# Przewodnik Migracyjny
 
-Esta guía tiene como objetivo ayudarte a migrar de la versión 1 a las versiones más recientes de TresJS 🤩✨.
+Ten przewodnik ma na celu pomoc w migracji z wersji 1 do najnowszych wersji TresJS 🤩✨.
 
 ::: code-group
 
@@ -18,27 +18,27 @@ yarn upgrade @tresjs/core
 
 :::
 
-## Novedades
+## Nowości
 
 ### Vue Custom Renderer
 
-**TresJS** es ahora un [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 que se encuentra dentro de un componente envolvente `TresCanvas` que se encarga de crear el `WebGLRenderer` y la `Scene` por ti, y crear una **nueva instancia de la aplicación Vue** para renderizar la escena.
+**TresJS** to teraz [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 znajdujący się wewnątrz otaczającego go komponentu `TresCanvas`, który zajmuje się tworzeniem `WebGLRenderer` i `Scene` za ciebie oraz tworzy **nową instancję aplikacji Vue** do renderowania sceny.
 
-### Soporte de TypeScript e Intellisense 🦾
+### Obsługa TypeScript i Intellisense 🦾
 
 ![TresJS Intellisense](/v2-intellisense.gif)
 
-Esta fue probablemente la característica más **solicitada para TresJS**. Ahora los componentes de Tres funcionan con Volar y proporcionan intellisense de tipos.
+To była prawdopodobnie najczęściej **żądana funkcja w TresJS**. Teraz komponenty Tres współpracują z Volar i zapewniają intellisense typów.
 
-**TresJS** ahora genera declaraciones de tipos en tiempo de compilación para todos los componentes basados en el catálogo de ThreeJS. Esto significa que puedes usar todos los componentes de ThreeJS y obtener intellisense de tipos para ellos.
+**TresJS** generuje teraz deklaracje typów w czasie kompilacji dla wszystkich komponentów opartych na katalogu ThreeJS. Oznacza to, że możesz używać wszystkich komponentów ThreeJS i otrzymać intellisense typów dla nich.
 
-### El plugin de Tres es opcional 👍
+### Plugin Tres jest opcjonalny 👍
 
-El `TresPlugin` ahora es opcional. Puedes usar TresJS sin él importando los componentes directamente desde `tresjs/core`:
+Plugin `TresPlugin` jest teraz opcjonalny. Możesz używać TresJS bez niego, importując komponenty bezpośrednio z `tresjs/core`:
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
+import { TresCanvas } from "@tresjs/core";
 </script>
 
 <template>
@@ -50,25 +50,22 @@ import { TresCanvas } from '@tresjs/core'
       :near="cameraNear"
       :far="cameraFar"
     />
-    <TresMesh
-      :geometry="geometry"
-      :material="material"
-    />
+    <TresMesh :geometry="geometry" :material="material" />
   </TresCanvas>
 </template>
 ```
 
 ::: info
-Esto es recomendado por razones de rendimiento y tamaño del paquete, el tree-shaking funcionará mejor y solo importarás los componentes que uses.
+To jest zalecane ze względów wydajności i rozmiaru paczki; tree-shaking będzie działał lepiej, a importujesz tylko te komponenty, których używasz.
 :::
 
-### TresScene ya no es necesario
+### TresScene już nie jest potrzebny
 
-The `<TresScene />` component is now deprecated since the scene is now created by the `<TresCanvas />`.
+Komponent `<TresScene />` jest teraz przestarzały, ponieważ scena jest teraz tworzona przez `<TresCanvas />`.
 
-In the beginning, I thought that it would be a good idea to have a separate component for the scene in terms of verbosity and keep it as similar to plain ThreeJS, but it turned out that it was not really useful.
+Na początku myślałem, że będzie to dobry pomysł, aby mieć osobny komponent dla sceny z uwagi na zwięzłość i zachowanie podobieństwa do czystego ThreeJS, ale okazało się, że to nie było naprawdę przydatne.
 
-You can now create a scene like this:
+Teraz możesz utworzyć scenę tak jak poniżej:
 
 ```vue
 <template>
@@ -80,62 +77,62 @@ You can now create a scene like this:
       :near="cameraNear"
       :far="cameraFar"
     />
-    <TresMesh
-      :geometry="geometry"
-      :material="material"
-    />
+    <TresMesh :geometry="geometry" :material="material" />
   </TresCanvas>
 </template>
 ```
 
-Para migrar tu código, simplemente puedes eliminar el componente `<TresScene />` y mover los hijos al componente `<TresCanvas />`.
+Aby zaktualizować swój kod, po prostu usuń komponent `<TresScene />` i przenieś dzieci do komponentu `<TresCanvas />`.
 
-### `useCatalog` ahora está obsoleto
+### `useCatalog` jest teraz przestarzałe
 
-La función `useCatalog` ahora está obsoleta. Ahora puedes importar el catálogo directamente desde `@tresjs/core`.
+Funkcja `useCatalog` jest teraz przestarzała. Teraz możesz importować katalog bezpośrednio z `@tresjs/core`.
 
-Puedes leer más al respecto aquí: [Extending](/advanced/extending.md)
+Możesz przeczytać więcej na ten temat tutaj: [Rozszerzanie](/advanced/extending.md)
 
-Cambia esto:
+Zmień to:
 
 ```ts {2,5,7}
-import { useCatalog } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { useCatalog } from "@tresjs/core";
+import { TextGeometry } from "three/addons/geometries/TextGeometry";
 
-const { extend } = useCatalog()
+const { extend } = useCatalog();
 
-extend({ TextGeometry })
+extend({ TextGeometry });
 ```
 
-Por esto:
+Na to:
 
 ```ts {2,6}
 // Correcto ✅
-import { extend } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { extend } from "@tresjs/core";
+import { TextGeometry } from "three/addons/geometries/TextGeometry";
 
-extend({ TextGeometry })
+extend({ TextGeometry });
 ```
 
-### El valor de referencia del modelo `getModel` ahora está obsoleto
+### Wartość odniesienia modelu `getModel` jest teraz przestarzała
 
-La función `getModel` ahora está obsoleta. Ahora puedes usar directamente la propiedad `model`.
+Funkcja `getModel` jest teraz przestarzała. Teraz możesz używać bezpośrednio właściwości `model`.
 
-Cambia esto:
+Zmień to:
 
 ```vue {7,9-12}
 // Incorrecto ❌
 <script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+import { useGLTF } from "@tresjs/cientos";
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+const { scene, nodes, animations, materials } = await useGLTF(
+  "/models/AkuAku.gltf",
+  { draco: true }
+);
 
-const modelRef = ref()
+const modelRef = ref();
 
 watch(modelRef, ({ getModel }) => {
-  const model = getModel()
-  model.position.set(0, 0, 0)
-})
+  const model = getModel();
+  model.position.set(0, 0, 0);
+});
 </script>
 
 <template>
@@ -143,21 +140,24 @@ watch(modelRef, ({ getModel }) => {
 </template>
 ```
 
-To this:
+Na to:
 
 ```vue {7,9-12}
-// Correcto
+// Poprawne
 <script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+import { useGLTF } from "@tresjs/cientos";
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+const { scene, nodes, animations, materials } = await useGLTF(
+  "/models/AkuAku.gltf",
+  { draco: true }
+);
 
-const modelRef = ref()
+const modelRef = ref();
 
 watch(modelRef, (model) => {
-  // Do something with the model
-  model.position.set(0, 0, 0)
-})
+  // Zrób coś z modelem
+  model.position.set(0, 0, 0);
+});
 </script>
 
 <template>
@@ -165,14 +165,14 @@ watch(modelRef, (model) => {
 </template>
 ```
 
-### Las cámaras deben estar antes de cualquier control 🎥
+### Kamery powinny być umieszczone przed jakimkolwiek kontrolerem 🎥
 
-El componente `TresOrbitControls` debe estar después de la cámara en el árbol. Esto se debe a que los controles necesitan conocer la cámara para funcionar.
+Komponent `TresOrbitControls` powinien znajdować się po kamery w drzewie komponentów. Wynika to z tego, że kontrolery muszą znać kamerę, aby działać.
 
-Cambia esto:
+Zmień to:
 
 ```vue {3,5}
-// Incorrecto
+// Niepoprawne
 <template>
   <TresCanvas>
     <TresOrbitControls />
@@ -181,10 +181,10 @@ Cambia esto:
 </template>
 ```
 
-Por esto:
+Na to:
 
 ```vue {3,5}
-// Correcto
+// Poprawne
 <template>
   <TresCanvas>
     <TresPerspectiveCamera />
@@ -193,34 +193,34 @@ Por esto:
 </template>
 ```
 
-## UseTres ahora es useTresContext <Badge type="warning" text="^3.0.0" />
+## UseTres teraz to useTresContext <Badge type="warning" text="^3.0.0" />
 
-Para la versión 3, reestructuramos toda la lógica de estado para que sea más flexible y fácil de usar para los autores de complementos y paquetes del ecosistema. En lugar de usar una tienda como en la versión 2, ahora usamos un proveedor de contexto basado en `provide/inject`.
+Dla wersji 3, przeorganizowaliśmy całą logikę stanu, aby była bardziej elastyczna i przyjazna dla autorów dodatków i pakietów ekosystemu. Zamiast korzystać ze sklepu, jak w wersji 2, teraz używamy dostawcy kontekstu opartego na `provide/inject`.
 
-La función `useTres` ahora es un alias de la función `useTresContext` para evitar romper demos y experimentos existentes, pero considera usar `useTresContext` a partir de ahora.
+Funkcja `useTres` teraz jest aliasem funkcji `useTresContext`, aby uniknąć psucia istniejących demo i eksperymentów, ale rozważ korzystanie z `useTresContext` od teraz.
 
-En lugar de obtener un objeto reactivo grande, ahora obtendrás directamente las referencias `scene` y `renderer`, entre otras propiedades.
+Zamiast uzyskiwać duży obiekt reaktywny, teraz bezpośrednio uzyskasz odniesienia do `scene` i `renderer`, między innymi właściwości.
 
-Cambia esto:
+Zmień to:
 
 ```ts {2}
 // Incorrecto ❌
-import { useTres } from '@tresjs/core'
+import { useTres } from "@tresjs/core";
 
-const { state, setState } = useTres()
+const { state, setState } = useTres();
 
-console.log(state.scene)
+console.log(state.scene);
 ```
 
-Por esto:
+Na to:
 
 ```ts {2}
 // Correcto ✅
-import { useTresContext } from '@tresjs/core'
+import { useTresContext } from "@tresjs/core";
 
-const { scene, renderer } = useTresContext()
+const { scene, renderer } = useTresContext();
 
-console.log(scene.value)
+console.log(scene.value);
 ```
 
-Para obtener información más detallada sobre el nuevo sistema de proveedor de contexto, puedes leer la sección [API DOCS](/api/composables.md).
+Aby uzyskać bardziej szczegółowe informacje na temat nowego systemu dostawcy kontekstu, możesz przeczytać sekcję [API DOCS](/api/composables.md).

+ 21 - 21
docs/pl/guide/nuxt.md

@@ -4,55 +4,55 @@
 
 <a href="https://www.npmjs.com/package/@tresjs/nuxt"><img src="https://img.shields.io/npm/v/@tresjs/nuxt/latest?color=%2382DBCA" alt="npm package"></a>
 
-¡Aquí está el módulo oficial de Nuxt para TresJS! 🎉.
+Oficjalny moduł Nuxt dla TresJS jest już dostępny! 🎉.
 
-El repositorio está [aquí](https://github.com/Tresjs/nuxt)
+Repozytorium znajduje się [tutaj](https://github.com/Tresjs/nuxt)
 
-## Instalación
+## Instalacja
 
 ::: code-group
 
 ```bash [pnpm]
-pnpm add three @tresjs/nuxt 
+pnpm add three @tresjs/nuxt
 ```
 
 ```bash [npm]
-npm install three @tresjs/nuxt 
+npm install three @tresjs/nuxt
 ```
 
 ```bash [yarn]
-yarn add three @tresjs/nuxt 
+yarn add three @tresjs/nuxt
 ```
 
 :::
 
-## Características
+## Zalety
 
-- 🤓 Importación automática de componentes y composables del [ecosistema de TresJS](https://github.com/orgs/Tresjs/repositories)
-- `TresCanvas` esta disponible solo en el cliente, no es necesario agregar `.client` al nombre del componente o `<ClientOnly />`
-- Configura automáticamente el compilador de Vue para admitir componentes de TresJS, consulta [por qué](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
-- Toda la magia de DX que viene con Nuxt ✨
+- 🤓 Automatyczne importowanie komponentów i komponowalnych elementów z [ekosystemu TresJS](https://github.com/orgs/Tresjs/repositories)
+- `TresCanvas` jest dostępny tylko po stronie klienta, nie trzeba dodawać .client do nazwy komponentu ani `<ClientOnly />`
+- Automatyczna konfiguracja kompilatora Vue w celu obsługi komponentów TresJS, zobacz [dlaczego](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
+- Cała magia związana z DX, która jest dostępna w Nuxt ✨
 
-## Uso
+## Użycie
 
-Agrega `@tresjs/nuxt` a la sección `modules` de `nuxt.config.ts`
+Dodaj `@tresjs/nuxt` do sekcji `modules` w pliku `nuxt.config.ts`
 
 ```js
 export default defineNuxtConfig({
-  modules: ['@tresjs/nuxt'],
-})
+  modules: ["@tresjs/nuxt"],
+});
 ```
 
-¡Eso es todo! Ahora puedes usar `@tresjs/nuxt` en tu aplicación Nuxt ✨
+To wszystko! Teraz możesz korzystać z `@tresjs/nuxt` w swojej aplikacji Nuxt ✨
 
-Si deseas utilizar cualquier paquete del ecosistema de TresJS, puedes instalar los paquetes que desees utilizar y serán importados automáticamente por el módulo 🧙🏼‍♂️.
+Jeśli chcesz używać pakietów z ekosystemu TresJS, możesz zainstalować wybrane pakiety, a moduł automatycznie je zaimportuje 🧙🏼‍♂️.
 
-| Package                     | Version                                                                                            |
-| --------------------------- | :------------------------------------------------------------------------------------------------- |
-| [Cientos](https://github.com/Tresjs/cientos) | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00) |
+| Package                                                      | Version                                                                                                            |
+| ------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------- |
+| [Cientos](https://github.com/Tresjs/cientos)                 | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00)              |
 | [Post-processing](https://github.com/Tresjs/post-processing) | ![post-processing version](https://img.shields.io/npm/v/@tresjs/post-processing/latest.svg?label=%20&color=ff69b4) |
 
 ```bash
 # Usando pnpm
 pnpm add @tresjs/cientos @tresjs/post-processing
-```
+```

+ 27 - 27
docs/pl/guide/troubleshooting.md

@@ -1,28 +1,28 @@
-# La divertida guía de problemas comunes y cómo solucionarlos
+# Zabawny przewodnik po często spotykanych problemach i jak je rozwiązywać
 
-![Solución de problemas](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
+![Rozwiązywanie problemów](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
 
-Bienvenido a la guía de solución de problemas de **TresJS v2**. ¡Donde 3D significa _"Dificultades Deslumbrantemente Deliciosas"_! Sabemos que el 3D puede ser tan complejo como una bola de lana enredada 🧶 o tan impredecible como un gato en un teclado 🐈 ⌨️, ¡pero no temas!
+Witaj w przewodniku po rozwiązywaniu problemów z **TresJS v2**. Gdzie 3D oznacza _"Dumne, Rozkoszne Trudności"_! Wiemy, że 3D może być równie skomplikowane jak spleciona kłębówka wełny 🧶 albo nieprzewidywalne jak kot na klawiaturze 🐈 ⌨️, ale nie bój się!
 
-Esta guía está destinada a ayudarte a resolver los problemas más comunes que puedes encontrar al usar TresJS v2.
+Ten przewodnik ma na celu pomóc ci rozwiązać najczęstsze problemy, z jakimi możesz się spotkać podczas korzystania z TresJS v2.
 
-## ¡No puedo ver mi escena 3D 😭!
+## Nie widzę mojej sceny 3D 😭!
 
-Has seguido la [guía de inicio](/guide/getting-started.md) pero aún no puedes ver tu escena renderizada.
+Postępowałeś zgodnie z [przewodnikiem rozpoczęcia](/guide/getting-started.md), ale nadal nie widzisz renderowanej sceny.
 
-Estas son las razones más comunes por las que es posible que no puedas ver tu escena:
+Oto najczęstsze powody, dla których możesz nie widzieć swojej sceny:
 
-### Verifica la altura de tu lienzo 📏
+### Sprawdź wysokość twojego płótna 📏
 
-Otro problema común es que el componente `TresCanvas` crea por defecto un elemento `canvas` que toma el `width` y `height` del elemento padre. Si el elemento padre no tiene altura, el lienzo tampoco la tendrá.
+Innym częstym problemem jest to, że komponent `TresCanvas` domyślnie tworzy element `canvas`, który przyjmuje `width` i `height` od elementu nadrzędnego. Jeśli element nadrzędny nie ma wysokości, to kanwa również jej nie będzie miała.
 
-![No se encontró altura](/canvas-height.png)
+![Brak wysokości](/canvas-height.png)
 
-También verás este error en la consola:
+Zobaczysz także ten błąd w konsoli:
 
-![Advertencia de altura del lienzo](/canvas-height-warning.png)
+![Ostrzeżenie o wysokości płótna](/canvas-height-warning.png)
 
-Una forma sencilla de solucionar esto es establecer la altura del elemento padre en `100%`:
+Łatwym sposobem na rozwiązanie tego problemu jest ustawienie wysokości elementu nadrzędnego na `100%`:
 
 ```css
 html,
@@ -39,7 +39,7 @@ body {
 }
 ```
 
-O también puedes establecer la propiedad `window-size` del componente `TresCanvas`:
+O także możesz ustawić właściwość `window-size` komponentu `TresCanvas`:
 
 ```vue
 <TresCanvas window-size>
@@ -48,22 +48,22 @@ O también puedes establecer la propiedad `window-size` del componente `TresCanv
 </TresCanvas>
 ```
 
-## Error al resolver el componente: TresComponent...
+## Błąd rozwiązania komponentu: TresComponent...
 
 ![](/failed-to-resolve-component.png)
 
-Dado que **TresJS v2** utiliza un Renderizador Personalizado de Vue dentro de la instancia principal de la aplicación Vue, el renderizador principal de Vue que actúa como padre no reconocerá los componentes dentro del componente `TresCanvas`. Aunque no afecta la representación, mostrará una advertencia en la consola.
+Ponieważ **TresJS v2** używa niestandardowego renderera Vue w głównej instancji aplikacji Vue, główny renderer Vue, który działa jako rodzic, nie rozpozna komponentów wewnątrz komponentu `TresCanvas`. Chociaż nie wpływa to na renderowanie, spowoduje wyświetlenie ostrzeżenia w konsoli.
 
 ![](/failed-to-resolve-component.png)
 
-En este momento, no hay soporte nativo de Vue para definir el renderizador utilizado en la etiqueta `<template />`, pero hay una solución rápida para eliminar las advertencias.
+Obecnie Vue nie obsługuje natywnie definiowania renderera używanego w znaczniku `<template />`, ale istnieje szybkie rozwiązanie pozwalające usunąć ostrzeżenia.
 
-Ve a tu archivo `vite.config.ts` y agrega la siguiente configuración al `@vitejs/plugin-vue`:
+Przejdź do swojego pliku `vite.config.ts` i dodaj poniższą konfigurację do `@vitejs/plugin-vue`:
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { templateCompilerOptions } from '@tresjs/core'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { templateCompilerOptions } from "@tresjs/core";
 
 export default defineConfig({
   plugins: [
@@ -72,17 +72,17 @@ export default defineConfig({
       ...templateCompilerOptions,
     }),
   ],
-})
+});
 ```
 
-Esto eliminará la advertencia de la consola.
+To usunie ostrzeżenie z konsoli.
 
-# ¡Ayúdanos a hacer que TresJS sea purr-fecto! 😼
+# Pomóż nam uczynić TresJS Purr-fecto! 😼
 
-Sabemos que incluso los mejores gatos dormilones ocasionalmente cometen errores, ¡y necesitamos tu ayuda para hacer que TresJS sea aún mejor! Si encuentras un error, por favor abre un ticket en [el repositorio](https://github.com/Tresjs/playground) y **por favor proporciona un enlace de reproducción**.
+Wiemy, że nawet najlepsze koty śpiące czasami popełniają błędy, i potrzebujemy twojej pomocy, aby uczynić TresJS jeszcze lepszym! Jeśli znajdziesz błąd, proszę otwórz zgłoszenie na [repozytorium](https://github.com/Tresjs/playground) i **proszę dostarcz link do reprodukcji**.
 
 ::: warning
-Los tickets sin un enlace de reproducción serán cerrados.
+Zgłoszenia bez linku do reprodukcji zostaną zamknięte.
 :::
 
-Nuestro equipo de amantes de los gatos programadores se pondrá en acción para eliminar esos molestos errores y mejorar TresJS para todos. ¡Juntos, hagamos que TresJS sea el maullido del renderizado 3D en Vue!
+Nasz zespół programistów-kochających-koty wyruszy do działania, aby pozbyć się tych dokuczliwych błędów i ulepszyć TresJS dla wszystkich. Razem sprawmy, aby TresJS było miauczeniem w renderowaniu 3D w Vue!

+ 1 - 0
package.json

@@ -54,6 +54,7 @@
     "release": "release-it",
     "coverage": "vitest run --coverage",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
+    "lint:fix": "eslint --ext \".ts,.js,.vue\" --fix --ignore-path .gitignore --ignore-path .eslintignore",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",