Merge branch 'main' into fix/cannot-assign-readonly-properties-primitives

CHANGELOG.md

@@ -1,5 +1,12 @@
 
 
+## [4.0.0](https://github.com/Tresjs/tres/compare/3.9.0...4.0.0) (2024-05-30)
+
+
+### Features
+
+* release v4 ([#490](https://github.com/Tresjs/tres/issues/490)) ([1ba17ee](https://github.com/Tresjs/tres/commit/1ba17ee43c6954396118bd8298436af3e2a70510)), closes [#479](https://github.com/Tresjs/tres/issues/479) [#488](https://github.com/Tresjs/tres/issues/488) [#491](https://github.com/Tresjs/tres/issues/491) [#497](https://github.com/Tresjs/tres/issues/497) [#499](https://github.com/Tresjs/tres/issues/499) [#498](https://github.com/Tresjs/tres/issues/498) [#522](https://github.com/Tresjs/tres/issues/522) [#514](https://github.com/Tresjs/tres/issues/514) [#579](https://github.com/Tresjs/tres/issues/579) [#602](https://github.com/Tresjs/tres/issues/602) [#601](https://github.com/Tresjs/tres/issues/601) [#608](https://github.com/Tresjs/tres/issues/608) [#614](https://github.com/Tresjs/tres/issues/614) [#529](https://github.com/Tresjs/tres/issues/529)
+
 ## [4.0.0-rc.2](https://github.com/Tresjs/tres/compare/4.0.0-rc.1...4.0.0-rc.2) (2024-05-24)
 
 

docs/.vitepress/config/de.ts

@@ -61,6 +61,7 @@ export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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' },

docs/.vitepress/config/en.ts

@@ -63,6 +63,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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' },
@@ -106,39 +107,42 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       { 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/',
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
 }

docs/.vitepress/config/es.ts

@@ -62,6 +62,7 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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<DefaultTheme.Config> = {
       { 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',

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.
+
+<StackBlitzEmbed project-id="tresjs-advanced-animations" />
+
+## 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!

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.
+
+<StackBlitzEmbed project-id="tresjs-advanced-animations" />
+
+## 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!

docs/directives/v-light-helper.md

@@ -7,6 +7,7 @@ The following lights are supported:
 - PointLight
 - SpotLight
 - HemisphereLight
+- RectAreaLightHelper
 
 ## Usage
 

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`.

docs/guide/index.md

@@ -87,25 +87,8 @@ We also have a showcase lab of examples made with TresJS. Check it out [here](ht
 
 The React ecosystem has an impressive **custom render** solution called [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) that allows you build your scenes declaratively with re-usable, self-contained components that react to state.
 
-In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs), which works with the same concept as R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). I'm also contributing to improve this library so it gets as mature and feature-rich as R3F.
+In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs), which works with the same concept as R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html).
 
-The only issue with this is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information.
+But none of them was actively maintained or had the same level of abstraction as R3F.
 
-```ts
-// Example Vite setup
-import { createApp } from 'vue'
-import { createApp as createLunchboxApp } from 'lunchboxjs'
-import App from './App.vue'
-import LunchboxApp from './LunchboxApp.vue'
-
-// html app
-const app = createApp(App)
-app.mount('#app')
-
-// lunchbox app
-const lunchboxApp = createLunchboxApp(LunchboxApp)
-// assuming there's an element with ID `lunchbox` in your HTML app
-lunchboxApp.mount('#lunchbox')
-```
-
-So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS v2**.
+So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS**.

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "4.0.0-rc.2",
-  "packageManager": "pnpm@8.15.6",
+  "version": "4.0.0",
+  "packageManager": "pnpm@9.1.4",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -69,7 +69,7 @@
   "dependencies": {
     "@alvarosabu/utils": "^3.2.0",
     "@vue/devtools-api": "^6.6.1",
-    "@vueuse/core": "^10.9.0"
+    "@vueuse/core": "^10.10.0"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
@@ -77,8 +77,8 @@
     "@tresjs/cientos": "3.9.0",
     "@tresjs/eslint-config": "^1.1.0",
     "@types/three": "^0.164.1",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-c8": "^0.33.0",
     "@vitest/coverage-v8": "^1.6.0",
@@ -89,7 +89,7 @@
     "esno": "^4.7.0",
     "gsap": "^3.12.5",
     "husky": "^9.0.11",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.0",
     "kolorist": "^1.8.0",
     "ohmyfetch": "^0.4.21",
     "pathe": "^1.1.2",
@@ -101,7 +101,7 @@
     "unocss": "^0.60.3",
     "unplugin": "^1.10.1",
     "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-dts": "3.9.1",
     "vite-plugin-inspect": "^0.8.4",

playground/src/pages/basic/Primitives.vue

@@ -76,6 +76,9 @@ const primitiveRef = ref()
 
 useRenderLoop().onLoop(() => {
   if (primitiveRef.value) {
+    // This doesn't work
+    /* torusKnot.rotation.x += 0.01 */
+    // This does
     primitiveRef.value.rotation.x += 0.01
     primitiveRef.value.rotation.y += 0.01
   }