Tresjs · alvarosabu · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024
@@ -1,6 +1,5 @@
 name: Publish Any Commit
 on:
-  pull_request:
   push:
     branches:
       - '**'

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

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vitepress'
 import { resolve } from 'pathe'
+import { defineConfig } from 'vitepress'
 
 export const sharedConfig = defineConfig({
   title: 'TresJS',

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

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

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

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

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

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

@@ -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 {
   /**

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

@@ -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() */

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

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

@@ -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)
   },
 })
@@ -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()
@@ -143,12 +143,9 @@ To avoid errors and unwanted sideeffects, resources created programatically with
   import { dispose } from '@tresjs/core'
   import { useGLTF } from '@tresjs/cientos'
 
-  const { nodes } = await useGLTF(
-    'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
-    {
-      draco: true,
-    },
-  )
+  const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', {
+    draco: true,
+  })
   const model = nodes.Cube
 
   onUnmounted(() => {

@@ -32,11 +32,7 @@ The same pointer events available on the TresJS components are available on the
 
 ```html
 <template>
-  <primitive
-    :object="meshWithMaterial"
-    @click="onClick"
-    @pointermove="onPointerMove"
-  />
+  <primitive :object="meshWithMaterial" @click="onClick" @pointermove="onPointerMove" />
 </template>
 ```
 

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

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

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

@@ -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)
 // ...

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

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

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

@@ -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)
 // ...

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

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

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

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

@@ -25,8 +25,8 @@ Voy a usar [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -152,8 +152,8 @@ Ahora tenemos todos los pasos necesarios para agregar sombras a nuestra escena,
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

@@ -114,8 +114,8 @@ Simplemente funciona. 💯
 
 ```vue {3,12}
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>

@@ -29,8 +29,8 @@ Por último, para ayudarnos con la ubicación, agreguemos un plano simple, rotad
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -122,9 +122,9 @@ Similar a lo que aprendimos en el ejemplo de [Animaciones básicas](/cookbook/ba
 
 ```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)
 // ...