Merge branch 'main' into tonemapping-docs

Tresjs · Sep 6, 2024 · 03a4315 · 03a4315
2 parents 932d0ab + 80f8a2e
commit 03a4315
Show file tree

Hide file tree

Showing 143 changed files with 1,920 additions and 8,882 deletions.
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
@@ -1,6 +1,5 @@
 name: Publish Any Commit
 on:
-  pull_request:
   push:
     branches:
       - '**'

diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
@@ -1,11 +1,11 @@
 import { defineConfig } from 'vitepress'
+import { deConfig } from './de'
 import { enConfig } from './en'
 import { esConfig } from './es'
 import { frConfig } from './fr'
-import { deConfig } from './de'
+import { nlConfig } from './nl'
 import { sharedConfig } from './shared'
 import { zhConfig } from './zh'
-import { nlConfig } from './nl'
 
 export default defineConfig({
   ...sharedConfig,

diff --git a/docs/.vitepress/config/shared.ts b/docs/.vitepress/config/shared.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'vitepress'
 import { resolve } from 'pathe'
+import { defineConfig } from 'vitepress'
 
 export const sharedConfig = defineConfig({
   title: 'TresJS',

diff --git a/docs/.vitepress/theme/TresLayout.vue b/docs/.vitepress/theme/TresLayout.vue
@@ -1,7 +1,7 @@
 <script setup>
 import Theme from 'vitepress/theme'
-import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
 import HomeSponsors from './components/HomeSponsors.vue'
+import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
 
 const { Layout } = Theme
 </script>

diff --git a/docs/.vitepress/theme/components/BlenderCube.vue b/docs/.vitepress/theme/components/BlenderCube.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
+import { useTresContext } from '@tresjs/core'
 
 const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = nodes.Cube

diff --git a/docs/.vitepress/theme/components/Cookbook.vue b/docs/.vitepress/theme/components/Cookbook.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { computed } from 'vue'
 import { useData } from 'vitepress'
+import { computed } from 'vue'
 import { data as recipes } from '../recipes.data.ts'
 
 const { lang } = useData()

diff --git a/docs/.vitepress/theme/components/DonutExample.vue b/docs/.vitepress/theme/components/DonutExample.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
-import { OrbitControls } from '@tresjs/cientos'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
   clearColor: '#82DBC5',

diff --git a/docs/.vitepress/theme/components/FirstScene.vue b/docs/.vitepress/theme/components/FirstScene.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
 
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
   clearColor: '#82DBC5',

diff --git a/docs/.vitepress/theme/components/GraphPane.vue b/docs/.vitepress/theme/components/GraphPane.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useRafFn } from '@vueuse/core'
+import { ref } from 'vue'
 import { useState } from '../composables/state'
 
 const width = 160

diff --git a/docs/.vitepress/theme/components/LocalOrbitControls.vue b/docs/.vitepress/theme/components/LocalOrbitControls.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { Camera } from 'three'
+import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
+import { useEventListener } from '@vueuse/core'
 import { OrbitControls } from 'three-stdlib'
 import { onMounted, onUnmounted, shallowRef, unref } from 'vue'
 import type { TresVector3 } from '@tresjs/core'
-import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
-import { useEventListener } from '@vueuse/core'
+import type { Camera } from 'three'
 
 export interface OrbitControlsProps {
   /**

diff --git a/docs/.vitepress/theme/components/LoveVueThreeJS.vue b/docs/.vitepress/theme/components/LoveVueThreeJS.vue
@@ -2,9 +2,9 @@
 /// <reference types="vite-svg-loader" />
 import { gsap } from 'gsap'
 import { onMounted, shallowRef } from 'vue'
-import Triangle from '../assets/triangle.svg'
 import SecondRow from '../assets/second-row.svg'
 import ThirdRow from '../assets/third-row.svg'
+import Triangle from '../assets/triangle.svg'
 
 const triangleRef = shallowRef()
 const secondRowRef = shallowRef()

diff --git a/docs/.vitepress/theme/components/RenderingLogger.vue b/docs/.vitepress/theme/components/RenderingLogger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { useTresContext } from '@tresjs/core'
 import { onMounted } from 'vue'
 
 /* const { renderingTimes } = useState() */

diff --git a/docs/.vitepress/theme/components/StackBlitzEmbed.vue b/docs/.vitepress/theme/components/StackBlitzEmbed.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { EmbedOptions } from '@stackblitz/sdk'
 import sdk from '@stackblitz/sdk'
 import { ref, watch } from 'vue'
+import type { EmbedOptions } from '@stackblitz/sdk'
 
 const props = withDefaults(
   defineProps<{

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,10 @@
-import type { Theme } from 'vitepress'
 import VPTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
 
-import 'uno.css'
+import TresLayout from './TresLayout.vue'
 import './custom.css'
 
-import TresLayout from './TresLayout.vue'
+import 'uno.css'
 
 /* const plausible = createPlausible({
   init: {

diff --git a/docs/.vitepress/theme/recipes.data.ts b/docs/.vitepress/theme/recipes.data.ts
@@ -22,7 +22,8 @@ export default createContentLoader('/**/cookbook/*.md', {
         thumbnail: frontmatter.thumbnail,
         difficulty: frontmatter.difficulty,
         excerpt: frontmatter.excerpt || frontmatter.description || excerpt,
-      })).filter(recipe => recipe.title)
+      }))
+      .filter(recipe => recipe.title)
       .sort((a, b) => b.title - a.title)
   },
 })
diff --git a/docs/advanced/performance.md b/docs/advanced/performance.md
@@ -78,8 +78,8 @@ import Scene from './Scene.vue'
 
 ```vue [Scene.vue]
 <script setup>
-import { shallowRef, watch } from 'vue'
 import { useTres } from '@tresjs/core'
+import { shallowRef, watch } from 'vue'
 
 const boxRef = shallowRef(null)
 const { invalidate } = useTres()

diff --git a/docs/api/composables.md b/docs/api/composables.md
@@ -91,8 +91,8 @@ import AnimatedBox from './AnimatedBox.vue'
 
 ```vue [AnimatedBox.vue]
 <script setup>
-import { shallowRef } from 'vue'
 import { useLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 
@@ -297,6 +297,38 @@ const texture = await useTexture({ map: 'path/to/texture.png' }, loadingManager)
 
 Similar to above composable, the `useTexture` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component.
 
+### UseTexture as component
+
+You can also use `UseTexture` (with uppercase) as component like so:
+
+```html
+<Suspense>
+  <UseTexture v-slot="{ textures }" map="path/to/texture.png">
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial :map="textures.map" />
+    </TresMesh>
+  </UseTexture>
+</Suspense>
+```
+
+## Props
+
+| Prop | type |
+| ---- | --- |
+| **map?** | `String` |
+| **displacementMap?** | `String` |
+| **normalMap?** | `String` |
+| **roughnessMap?** | `String` |
+| **metalnessMap?** | `String` |
+| **aoMap?** | `String` |
+| **alphaMap?** | `String` |
+| **matcap?** | `String` |
+
+::: warning
+The `UseTexture` component needs to be wrapped in a `Suspense` component in order to work
+:::
+
 ## useSeek
 
 The `useSeek` composable provides utilities to easily traverse and navigate through complex ThreeJS scenes and object children graphs. It exports 4 functions which allow you to find child objects based on specific properties.

diff --git a/docs/cookbook/lights-shadows.md b/docs/cookbook/lights-shadows.md
@@ -24,8 +24,8 @@ I'm going to use [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#a
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -151,8 +151,8 @@ Now we have all the necessary steps to add shadows to our scene, and if we apply
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

diff --git a/docs/cookbook/orbit-controls.md b/docs/cookbook/orbit-controls.md
@@ -114,8 +114,8 @@ It just works. 💯
 
 ```vue {3,12}
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>

diff --git a/docs/cookbook/shaders.md b/docs/cookbook/shaders.md
@@ -21,8 +21,8 @@ Lastly just to help us with the location, let's add a simple plane, rotated in t
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -114,9 +114,9 @@ Similar to what we learn in the [Basic animations](/cookbook/basic-animations) e
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

diff --git a/docs/cookbook/tweakpane.md b/docs/cookbook/tweakpane.md
@@ -32,11 +32,11 @@ In this example, we will create a simple scene with a cube and use Tweakpane to
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-
 import { Pane } from 'tweakpane'
 
+import { ref } from 'vue'
+
 const state = reactive({
   clearColor: '#c0ffee',
   wireframe: false

diff --git a/docs/de/cookbook/lights-shadows.md b/docs/de/cookbook/lights-shadows.md
@@ -24,8 +24,8 @@ Wir verwenden das [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -153,8 +153,8 @@ Jetzt haben wir alle notwendigen Schritte, um Schatten zu unserer Szene hinzuzuf
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

diff --git a/docs/de/cookbook/orbit-controls.md b/docs/de/cookbook/orbit-controls.md
@@ -113,8 +113,8 @@ Es funktioniert einfach. 💯
 
 ```vue {3,12}
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>

diff --git a/docs/de/cookbook/shaders.md b/docs/de/cookbook/shaders.md
@@ -122,9 +122,9 @@ void main() {
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

diff --git a/docs/de/guide/getting-started.md b/docs/de/guide/getting-started.md
@@ -45,8 +45,8 @@ pnpm add @types/three -D
 Du kannst TresJS wie jedes andere Vue-Plugin installieren.
 
 ```ts
-import { createApp } from 'vue'
 import Tres from '@tresjs/core'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 export const app = createApp(App)

diff --git a/docs/de/guide/index.md b/docs/de/guide/index.md
@@ -93,8 +93,8 @@ Das einzige Problem ist, dass die Kombination von Compilern und Renderern in Vue
 
 ```ts
 // Example Vite setup
-import { createApp } from 'vue'
 import { createApp as createLunchboxApp } from 'lunchboxjs'
+import { createApp } from 'vue'
 import App from './App.vue'
 import LunchboxApp from './LunchboxApp.vue'
 

diff --git a/docs/de/guide/troubleshooting.md b/docs/de/guide/troubleshooting.md
@@ -61,9 +61,9 @@ Derzeit gibt es keine native Unterstützung von Vue, um den verwendeten Renderer
 Öffne `vite.config.ts` und füge die folgende Konfiguration zum `@vitejs/plugin-vue` hinzu um die Warnung aus der Konsole zu entfernen:
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [

diff --git a/docs/directives/v-rotate.md b/docs/directives/v-rotate.md
@@ -10,8 +10,8 @@ When you want to simply add rotation to your mesh, you have to use the template
 
 ```vue
 <script setup lang="ts">
-import { shallowRef, watch } from 'vue'
 import { useRenderLoop } from '@tresjs/core'
+import { shallowRef, watch } from 'vue'
 
 const boxRef = shallowRef()
 

diff --git a/docs/es/api/composables.md b/docs/es/api/composables.md
@@ -150,6 +150,38 @@ Luego puedes vincular las texturas al material.
 
 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`.
 
+### UseTexture como componente
+
+Puedes usar `UseTexture` como componente, de la siguiente forma:
+
+```html
+<Suspense>
+  <UseTexture v-slot="{ textures }" map="path/to/texture.png">
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial :map="textures.map" />
+    </TresMesh>
+  </UseTexture>
+</Suspense>
+```
+
+## Props
+
+| Prop | type |
+| ---- | --- |
+| **map?** | `String` |
+| **displacementMap?** | `String` |
+| **normalMap?** | `String` |
+| **roughnessMap?** | `String` |
+| **metalnessMap?** | `String` |
+| **aoMap?** | `String` |
+| **alphaMap?** | `String` |
+| **matcap?** | `String` |
+
+::: warning
+El componente `UseTexture` necesita estar envuelto por un `Suspense` para poder funcionar
+:::
+
 ## 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.