Merge branch 'main' into renovate/tresjs-eslint-config-vue-0.x

CHANGELOG.md

@@ -1,5 +1,29 @@
 
 
+## [3.3.0](https://github.com/Tresjs/tres/compare/3.2.3...3.3.0) (2023-10-02)
+
+
+### Features
+
+* context (TresContext) is now exposed from TresCanvas ([#404](https://github.com/Tresjs/tres/issues/404)) ([838d779](https://github.com/Tresjs/tres/commit/838d779e59494cacf61274fe497373983dbe8278))
+
+
+### Bug Fixes
+
+* **core:** made v-if work again ([#409](https://github.com/Tresjs/tres/issues/409)) ([0d00545](https://github.com/Tresjs/tres/commit/0d0054577aaed001c2a56a9e97e0600921ba6a5d))
+
+## [3.3.0-next.0](https://github.com/Tresjs/tres/compare/3.2.3...3.3.0-next.0) (2023-09-29)
+
+
+### Features
+
+* context (TresContext) is now exposed from TresCanvas ([#404](https://github.com/Tresjs/tres/issues/404)) ([838d779](https://github.com/Tresjs/tres/commit/838d779e59494cacf61274fe497373983dbe8278))
+
+
+### Bug Fixes
+
+* made v-if work again ([277e901](https://github.com/Tresjs/tres/commit/277e901f8e41dc72bf755db17c584b3e28086347))
+
 ## [3.2.3](https://github.com/Tresjs/tres/compare/3.2.2...3.2.3) (2023-09-22)
 
 

docs/.vitepress/config.ts

@@ -99,7 +99,7 @@ export default defineConfig({
     ],
     nav: [
       { text: 'Guide', link: '/guide/' },
-      { text: 'API', link: '/api/renderer' },
+      { text: 'API', link: '/api/tres-canvas' },
       /*       { text: 'API', link: '/api/' },
       { text: 'Config', link: '/config/' }, */
       { text: 'Resources',

docs/blog/announcing-cientos-3-4-0.md

@@ -0,0 +1,110 @@
+---
+sidebar: false
+---
+
+# Announcing cientos v3.4.0 🎉
+
+Cientos is here again with a new and exiting release 🎉.
+
+- **Cientos v3.4.0**
+
+<iframe src="https://giphy.com/embed/2XOL4zsm6V0nm" width="480" height="358" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/walking-2XOL4zsm6V0nm">via GIPHY</a></p>
+
+## LensFlare
+
+A new and completely original abstraction has arrived to Cientos ✨ Behold His Majesty `<LensFlare />`.
+
+It's a wrapper of the Three.js [LensFlare](https://threejs.org/docs/#examples/en/objects/Lensflare) addon.
+
+![](/blog/lensflare.gif)
+
+While it could look intimidating at first, this component has a lot of flexibility, so check out all the different options [here](https://cientos.tresjs.org/guide/abstractions/lensflare.html)
+
+We're going to say thanks to [andretchen0](https://github.com/andretchen0) for this incredible contribution.
+
+## Sky
+
+The `Sky` component allows you to create realistic outdoor scenes with the use of sky, which as the name implies creates sky gradients and more with just a few lines of code.
+
+![](/blog/sky.gif)
+
+This is  fancy wrapper of the addon [Sky](https://threejs.org/examples/?q=sky#webgl_shaders_sky).
+
+```vue
+<script setup lang="ts">
+import { Sky } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 100, 2000]" />
+    <Sky />
+  </TresCanvas>
+</template>
+```
+Could it be simpler?
+
+You can find the official docs [here](https://cientos.tresjs.org/guide/staging/sky.html)
+
+Another one of [andretchen0](https://github.com/andretchen0) amazing contributions!
+
+## SVG
+
+![](/blog/svg.gif)
+
+A classical one, the svg loader component has arrived in cientos this release, to bring the versatility of `svg` into a wrapper of the original [loader](https://threejs.org/docs/?q=svg#examples/en/loaders/SVGLoader) with basically one line of code (well two if you count the import 😅).
+
+```html
+<template>
+  <TresCanvas>
+    <Suspense>
+      <SVG src="/favicon.svg" /> // you can pass a path or a inline svg
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+You can find the official docs [here](https://cientos.tresjs.org/guide/loaders/svg.html).
+
+And yes, again big thanks to [andretchen0](https://github.com/andretchen0) 3 in a row!
+
+## Stats-gl
+
+![](/blog/stats-gl.png)
+
+
+Another exciting one is the addition of Stats-gl which is like statsjs but with superpowers, originally developed by [RenaudRohlinger](https://github.com/RenaudRohlinger/stats-gl) is a powerful performance monitoring tool.
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { StatsGl } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <StatsGl /> // as simple as this
+  </TresCanvas>
+</template>
+```
+
+Big thanks to [notarun](https://github.com/notarun) for this contribution.
+
+Official docs [here](https://cientos.tresjs.org/guide/misc/stats-gl.html).
+
+## Fix camera as a param problem in controls
+
+[damiankoper](https://github.com/damiankoper) discovered a bug when you tried to use the camera as a parameter.
+
+Thanks to [damiankoper](https://github.com/damiankoper) for this useful contribution.
+
+## New documentation full of examples
+
+![](/blog/docs-examples.png)
+
+In addition to all these amazing new features, we have been working internally to improve the UX, and now you can visit the [cientos](https://cientos.tresjs.org/) page and navigate through the components and see the inline examples right away.
+
+## Internal organization of code (will be easier to contribute)
+
+Also, we're constantly working on the DX: refactors, cleaning, and internal improvement. So now we have a clear structure, now it is easier than ever to contribute to the cientos package 😁.
+
+Thanks for reading and happy 3D coding  😊.

docs/blog/announcing-cientos-3-5-0.md

@@ -0,0 +1,228 @@
+---
+sidebar: false
+---
+
+# Announcing cientos v3.5.0 🎉
+
+We're excited to share with you a new release of `@tresjs/cientos`  full of exciting new features.
+
+
+## HTML component 🖥️
+
+Let's start with a versatile one, the `HTML` component has finally arrived to **Cientos** and brings with it a huge amount of possibilities! Just look at this:
+
+<video class="w-full overflow-hidden rounded" controls autoplay loop>
+  <source src="/blog/html-occlude.mp4" type="video/mp4">  
+</video>
+
+This component allows you to project HTML content or even Vuejs components into any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object.
+
+You can even use plain CSS or utilities like [tailwindcss](https://tailwindcss.com/) to style 🎨.
+
+```html
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import {  Html } from '@tresjs/cientos'
+
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 8]" />
+    <OrbitControls />
+    <TresMesh :position="[1, 1, 1]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        :distance-factor="4"
+        :position="[0, 0, 0.65]"
+        :scale="[0.75, 0.75, 0.75]"
+      >
+        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
+          I'm a Box 📦
+        </h1>
+      </Html>
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+### `iframe` between threejs objects
+
+Yup.
+
+<video class="w-full overflow-hidden rounded" controls autoplay loop>
+  <source src="/blog/html-laptop.mp4" type="video/mp4">  
+</video>
+
+You can achieve pretty cool results with the `Html` component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage within a 3D model.
+
+
+Please check the official [docs](https://cientos.tresjs.org/guide/misc/html-component.html)
+
+This was provided by [Alvaro Saburido](https://github.com/alvarosabu).
+
+## FBO and useFBO 🪞
+
+The FBO (or Frame Buffer Object) technique allows you to put a render into a texture. We provide this feature as a component or as a composable.
+
+<video class="w-full overflow-hidden rounded" controls autoplay loop>
+  <source src="/blog/fbo.mp4" type="video/mp4">  
+</video>
+
+To learn more about this powerful component please check [this](https://cientos.tresjs.org/guide/abstractions/fbo.html)
+
+Big thanks to [Francesco Michelini](https://github.com/kekkorider)
+
+## Line2 📉
+
+We gave some love to the shape section in this release, bringing to you two new shapes componentes. The first one is `<Line2 />`, which allow you to create easy lines with just a few lines of code.
+
+![](/blog/line2.gif)
+
+For more info please check the [official documentation](https://cientos.tresjs.org/guide/shapes/line2.html). 
+
+This component was done by [andretchen0](https://github.com/andretchen0) big thanks to him.
+
+## CatmullRomCurve 💫
+
+Similar to the previous one, the `<CatmullRomCurve3 />` provides smooth curves with almost no configuration.
+
+![](/blog/CatmullRomCurve3.gif)
+
+You can learn more [here](https://cientos.tresjs.org/guide/shapes/catmullromcurve3.html).
+
+Another component made by [andretchen0](https://github.com/andretchen0) thanks.
+
+## GlobalAudio 🔊
+
+You can now add sound to your scene with just one component. `<GlobalAudio  />` has landed in **TresJs**. Simply import and use the `<GlobalAudio  />` component, give it music path and just like that you'll get sound.
+
+```vue{3,9}
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { GlobalAudio } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 0, 7.5]" />
+    <GlobalAudio :src="exampleAudio" />
+  </TresCanvas>
+</template>
+```
+An abstraction of the three [Audio](https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio) instance.
+
+To learn more check this [here](https://cientos.tresjs.org/guide/abstractions/global-audio.html).
+
+This component was made by [JaimeTorrealba](https://github.com/JaimeTorrealba).
+
+## Directives
+
+A new exiting one, **Cientos** has been experimenting with the original Vue [Directives](https://vuejs.org/guide/reusability/custom-directives.html#introduction). This idea was born in a session between the **TresJs** Core team members, we explored the possibility, and now we're happy to announce that not only is it possible, it's really handy.
+
+So now we have 4 Directives and a new section in cientos for you guys:
+
+### v-log
+
+With v-log you can inspect your instance without the need to use template ref and watch... Just import the directive, and log what you need.
+
+```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  <!-- will print just the material 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+
+Check [here](https://cientos.tresjs.org/guide/directives/v-log.html) for more info.
+
+### v-light-helper
+
+Also for debug purposes, `v-light-helper` aims to add the current helper for the light, this way you don't have to worry about any reference or bloated code, just import and use it with a light, and you'll get the right helper.
+
+```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>
+```
+
+Visit the [official documentation](https://cientos.tresjs.org/guide/directives/v-light-helper.html) to learn more.
+
+
+### v-always-look-at
+
+With the `v-always-look-at` as the name suggest you can force the element to always look at a point (even if this is in movement).
+
+```vue{2,10}
+<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>
+```
+
+Learn more [here](https://cientos.tresjs.org/guide/directives/v-always-look-at.html)
+
+### v-distance-to
+
+![v-distance-to directive tresjs](/blog/v-distance-to.png)
+
+Have you ever tried to measure the distance between objects in threejs? Well now it's easier than ever. Just use the `v-distance-to` and you'll get the exact distance. Example:
+
+```html{7}
+<Sphere
+  ref="sphere1Ref"
+  :position="[-2, slider, 0]"
+  :scale="0.5"
+/>
+<Sphere
+  v-distance-to="sphere1Ref"
+  :position="[2, 0, 0]"
+  :scale="0.5"
+/>
+```
+Learn more about these directives [here](https://cientos.tresjs.org/guide/directives/v-distance-to.html)
+
+You can take a look to the whole [Release](https://github.com/Tresjs/cientos/releases/tag/3.5.0)
+
+Thanks for reading and happy 3D coding  😊
+

docs/examples/orbit-controls.md

@@ -63,7 +63,7 @@ const { state } = useTres()
 </script>
 <template>
   <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
   </TresCanvas>
 </template>
@@ -80,7 +80,7 @@ It just works. 💯
 ```vue
 <template>
   <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
   </TresCanvas>
 </template>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "packageManager": "pnpm@8.3.1",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -17,7 +17,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/tres.js"
+      "import": "./dist/tres.js",
+      "require": "./dist/tres.umd.cjs"
     },
     "./components": {
       "types": "./dist/components/index.d.ts"

playground/src/pages/TheBasic.vue

@@ -28,9 +28,15 @@ function onPointerEnter(ev) {
     ev.object.material.color.set('#DFFF45')
   }
 }
+
+const sphereExists = ref(true)
 </script>
 
 <template>
+  <input
+    v-model="sphereExists"
+    type="checkbox"
+  >
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
@@ -42,15 +48,19 @@ function onPointerEnter(ev) {
     <OrbitControls />
     <TresAmbientLight :intensity="0.5" />
 
-    <TresMesh
-      ref="sphereRef"
-      :position="[0, 4, 0]"
-      cast-shadow
-      @pointer-enter="onPointerEnter"
-    >
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshToonMaterial color="teal" />
-    </TresMesh>
+    <TresGroup>
+      <TresMesh
+        ref="sphereRef"
+        :visible="sphereExists"
+        :user-data="{ debug: true }"
+        :position="[0, 4, 0]"
+        cast-shadow
+        @pointer-enter="onPointerEnter"
+      >
+        <TresSphereGeometry :args="[2, 32, 32]" />
+        <TresMeshToonMaterial color="teal" />
+      </TresMesh>
+    </TresGroup>
 
     <TresDirectionalLight
       :position="[0, 8, 4]"

src/core/nodeOps.ts

@@ -12,7 +12,6 @@ function noop(fn: string): any {
   fn
 }
 
-let fallback: TresObject | null = null
 let scene: TresScene | null = null
 
 const { logError } = useLogger()
@@ -76,20 +75,8 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
   },
   insert(child, parent) {
     if (parent && parent.isScene) scene = parent as unknown as TresScene
-    if (
-      (child?.__vnode?.type === 'TresGroup' || child?.__vnode?.type === 'TresObject3D')
-      && parent === null
-      && !child?.__vnode?.ctx?.asyncResolved
-    ) {
-      fallback = child
-      return
-    }
-    else if (parent === null 
-      && (child?.__vnode?.type.includes('Controls') || child?.__vnode?.type.includes('Helper'))) {
-      fallback = scene as unknown as TresObject
-    }
-
-    if (!parent) parent = fallback as TresObject
+    
+    const parentObject = parent || scene
 
     if (child?.isObject3D) {
       if (child?.isCamera) {
@@ -112,17 +99,17 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
       }
     }
 
-    if (child?.isObject3D && parent?.isObject3D) {
-      parent.add(child)
+    if (child?.isObject3D && parentObject?.isObject3D) {
+      parentObject.add(child)
       child.dispatchEvent({ type: 'added' })
     }
     else if (child?.isFog) {
-      parent.fog = child
+      parentObject.fog = child
     }
     else if (typeof child?.attach === 'string') {
-      child.__previousAttach = child[parent?.attach as string]
-      if (parent) {
-        parent[child.attach] = child
+      child.__previousAttach = child[parentObject?.attach as string]
+      if (parentObject) {
+        parentObject[child.attach] = child
       }
     }
   },