diff --git a/docs/.vitepress/config/de.ts b/docs/.vitepress/config/de.ts index 0fb2ad65d..69c42f420 100644 --- a/docs/.vitepress/config/de.ts +++ b/docs/.vitepress/config/de.ts @@ -61,6 +61,7 @@ export const deConfig: LocaleSpecificConfig = { items: [ { text: 'Orbit-Controls', link: '/de/cookbook/orbit-controls' }, { text: 'Einfache Animationen', link: '/de/cookbook/basic-animations' }, + { text: 'Fortgeschrittene Animationen', link: '/de/cookbook/advanced-animations' }, { text: 'Gruppen', link: '/de/cookbook/groups' }, { text: 'Texturen laden', link: '/de/cookbook/load-textures' }, { text: 'Modelle laden', link: '/de/cookbook/load-models' }, diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts index 4f33da8c2..d1122645c 100644 --- a/docs/.vitepress/config/en.ts +++ b/docs/.vitepress/config/en.ts @@ -62,6 +62,7 @@ export const enConfig: LocaleSpecificConfig = { items: [ { text: 'Orbit Controls', link: '/cookbook/orbit-controls' }, { text: 'Basic Animations', link: '/cookbook/basic-animations' }, + { text: 'Advanced Animations', link: '/cookbook/advanced-animations' }, { text: 'Groups', link: '/cookbook/groups' }, { text: 'Load Textures', link: '/cookbook/load-textures' }, { text: 'Load Models', link: '/cookbook/load-models' }, @@ -107,39 +108,42 @@ export const enConfig: LocaleSpecificConfig = { { text: 'API', link: '/api/tres-canvas' }, /* { text: 'API', link: '/api/' }, { text: 'Config', link: '/config/' }, */ - { text: 'Resources', items: [ - { text: 'Team', link: '/team' }, - { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' }, - { - text: 'Playground', - link: 'https://play.tresjs.org/', - }, - { - text: 'Github', - link: 'https://github.com/Tresjs/tres/', - }, - { - text: 'Issues', - link: 'https://github.com/Tresjs/tres/issues', - }, - { - text: 'Ecosystem', - items: [ - { - text: 'Cientos 馃挍', - link: 'https://cientos.tresjs.org/', - }, - { - text: 'Nuxt module', - link: 'https://github.com/Tresjs/nuxt', - }, - { - text: 'TresLeches 馃嵃', - link: 'https://tresleches.tresjs.org/', - }, - ], - }, - ] }, + { + text: 'Resources', + items: [ + { text: 'Team', link: '/team' }, + { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' }, + { + text: 'Playground', + link: 'https://play.tresjs.org/', + }, + { + text: 'Github', + link: 'https://github.com/Tresjs/tres/', + }, + { + text: 'Issues', + link: 'https://github.com/Tresjs/tres/issues', + }, + { + text: 'Ecosystem', + items: [ + { + text: 'Cientos 馃挍', + link: 'https://cientos.tresjs.org/', + }, + { + text: 'Nuxt module', + link: 'https://github.com/Tresjs/nuxt', + }, + { + text: 'TresLeches 馃嵃', + link: 'https://tresleches.tresjs.org/', + }, + ], + }, + ], + }, ], }, } diff --git a/docs/.vitepress/config/es.ts b/docs/.vitepress/config/es.ts index 7abb2cc65..ba7a2c747 100644 --- a/docs/.vitepress/config/es.ts +++ b/docs/.vitepress/config/es.ts @@ -62,6 +62,7 @@ export const esConfig: LocaleSpecificConfig = { items: [ { text: 'Controles de 贸rbita', link: '/es/cookbook/orbit-controls' }, { text: 'Animaciones b谩sicas', link: '/es/cookbook/basic-animations' }, + { text: 'Advanced Animations', link: '/es/cookbook/advanced-animations' }, { text: 'Grupos', link: '/es/cookbook/groups' }, { text: 'Cargar texturas', link: '/es/cookbook/load-textures' }, { text: 'Cargar modelos', link: '/es/cookbook/load-models' }, @@ -107,39 +108,42 @@ export const esConfig: LocaleSpecificConfig = { { text: 'API', link: '/es/api/tres-canvas' }, /* { text: 'API', link: '/es/api/' }, { text: 'Configuraci贸n', link: '/es/config/' }, */ - { text: 'Recursos', items: [ - { text: 'Equipo', link: '/es/team' }, - { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' }, - { - text: 'Playground', - link: 'https://play.tresjs.org/', - }, - { - text: 'Github', - link: 'https://github.com/Tresjs/tres/', - }, - { - text: 'Problemas', - link: 'https://github.com/Tresjs/tres/issues', - }, - { - text: 'Ecosistema', - items: [ - { - text: 'Cientos 馃挍', - link: 'https://cientos.tresjs.org/', - }, - { - text: 'M贸dulo Nuxt', - link: 'https://github.com/Tresjs/nuxt', - }, - { - text: 'TresLeches 馃嵃', - link: 'https://tresleches.tresjs.org/', - }, - ], - }, - ] }, + { + text: 'Recursos', + items: [ + { text: 'Equipo', link: '/es/team' }, + { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' }, + { + text: 'Playground', + link: 'https://play.tresjs.org/', + }, + { + text: 'Github', + link: 'https://github.com/Tresjs/tres/', + }, + { + text: 'Problemas', + link: 'https://github.com/Tresjs/tres/issues', + }, + { + text: 'Ecosistema', + items: [ + { + text: 'Cientos 馃挍', + link: 'https://cientos.tresjs.org/', + }, + { + text: 'M贸dulo Nuxt', + link: 'https://github.com/Tresjs/nuxt', + }, + { + text: 'TresLeches 馃嵃', + link: 'https://tresleches.tresjs.org/', + }, + ], + }, + ], + }, ], search: { provider: 'local', diff --git a/docs/cookbook/advanced-animations.md b/docs/cookbook/advanced-animations.md new file mode 100644 index 000000000..aa53b7b3a --- /dev/null +++ b/docs/cookbook/advanced-animations.md @@ -0,0 +1,35 @@ +--- +title: Advanced Animations +description: How to use GSAP to animate your scene +author: dennissmuda +thumbnail: /recipes/advanced-animations.png +difficulty: 0 +--- + +# Advanced Animations + +In this guide, we are going to use GSAP to animate our scene instead of the `useRenderLoop` composable. + + + +## Use GSAP to trigger animations on 3D Objects + +We don't have to rely on `useRenderLoop` or TresJS to handle our animations. We could also leverage GSAP's `to` function for example: + +```ts +import gsap from 'gsap' + +const objectRef = shallowRef(null) + +watchEffect(() => { + if (objectRef.value) { + gsap.to(objectRef.value.position, { + y: 2, + }) + } +}) +``` + +GSAP is a very popular animation library and you can find a lot of help and resources online, including [these demos on codepen](https://codepen.io/GreenSock). + +Of course there are lots of alternatives out there, and you should feel free to reach for _your_ favorite animation library! diff --git a/docs/de/cookbook/advanced-animations.md b/docs/de/cookbook/advanced-animations.md new file mode 100644 index 000000000..dbeeb0edf --- /dev/null +++ b/docs/de/cookbook/advanced-animations.md @@ -0,0 +1,35 @@ +--- +title: Fortgeschrittene Animationen +description: Wie man mit GSAP eine Szene animiert +author: dennissmuda +thumbnail: /recipes/animations.png +difficulty: 0 +--- + +# Fortgeschrittene Animationen + +In diesem Rezept werden wir GSAP verwenden um unsere Szene zu animieren, statt des `useRenderLoop`-Composables. + + + +## 3D Objekte mit GSAP animieren + +Wir m眉ssen nicht unbedingt `useRenderLoop` oder gar TresJS f眉r unsere Animationen benutzen. Zum Beispiel k枚nnten wir auch GSAP's `to`-Method verwenden: + +```ts +import gsap from 'gsap' + +const objectRef = shallowRef(null) + +watchEffect(() => { + if (objectRef.value) { + gsap.to(objectRef.value.position, { + y: 2, + }) + } +}) +``` + +GSAP ist schon seit vielen Jahren eine sehr beliebte Animations-Library im Web. Es gibt also unz盲hlige Resourcen online wie zum Beispiel [diese Demos auf Codepen](https://codepen.io/GreenSock). + +Du kannst nat眉rlich auch _deine_ Lieblingsbibliothek nutzen, an Animations-Bibliotheken mangelt es im Web nicht! diff --git a/docs/es/cookbook/advanced-animations.md b/docs/es/cookbook/advanced-animations.md new file mode 100644 index 000000000..4502408ac --- /dev/null +++ b/docs/es/cookbook/advanced-animations.md @@ -0,0 +1,11 @@ +--- +title: Animaciones avanzadas +description: C贸mo utilizar GSAP para animar tu escena +author: dennissmuda +thumbnail: /recipes/animations.png +difficulty: 1 +--- + +# Animaciones avanzadas + +En esta gu铆a, vamos a utilizar GSAP para animar nuestra escena en lugar del composable `useRenderLoop`. diff --git a/docs/public/recipes/advanced-animations.png b/docs/public/recipes/advanced-animations.png new file mode 100644 index 000000000..5434fde8b Binary files /dev/null and b/docs/public/recipes/advanced-animations.png differ