Merge branch 'next' into 139-raycaster-only-check-for-intersections-when-pointer-moves-or-on-click-events

.gitignore

@@ -23,3 +23,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+.vitepress/dist
+.vitepress/cache

CHANGELOG.md

@@ -1,73 +1,75 @@
+## [2.0.0-alpha.6](https://github.com/Tresjs/tres/compare/2.0.0-alpha.5...2.0.0-alpha.6) (2023-03-30)
 
+### Features
 
-## [2.0.0-alpha.5](https://github.com/Tresjs/tres/compare/2.0.0-alpha.4...2.0.0-alpha.5) (2023-03-28)
+- add alphaMap to useTexture ([f66c363](https://github.com/Tresjs/tres/commit/f66c36394ae188cb380e8d793eb9ec429b5aa925))
+- add matcap to useTexture ([ce374d6](https://github.com/Tresjs/tres/commit/ce374d6c93abf3ab4816c288419c9a30a1caa54e))
+- adding warning when canvas parent height is 0px ([4224103](https://github.com/Tresjs/tres/commit/42241036f01299a969a0c49b2d8a24e77871010e))
+
+### Bug Fixes
+
+- removed key split on buffer geometry attributes ([a29cb2b](https://github.com/Tresjs/tres/commit/a29cb2bb908c3cfdccd81fb71b97f4ebe5c4ef59))
 
+## [2.0.0-alpha.5](https://github.com/Tresjs/tres/compare/2.0.0-alpha.4...2.0.0-alpha.5) (2023-03-28)
 
 ### Features
 
-* useSeek composable ([bd00001](https://github.com/Tresjs/tres/commit/bd00001948f963c955231a4a406889fa2f2a7051))
+- useSeek composable ([bd00001](https://github.com/Tresjs/tres/commit/bd00001948f963c955231a4a406889fa2f2a7051))
 
 ## [2.0.0-alpha.4](https://github.com/Tresjs/tres/compare/2.0.0-alpha.3...2.0.0-alpha.4) (2023-03-27)
 
-
 ### Bug Fixes
 
-* remove unused import ([2fb99e5](https://github.com/Tresjs/tres/commit/2fb99e5a08fb9545b8eef660ec0f9ce5493aceb8))
-* removing resetState and going for more granular approach of disposal ([6f1e38b](https://github.com/Tresjs/tres/commit/6f1e38b3361a08d047b7c094285cfd67145502ad))
-* reset state on unmounted ([dbbaee7](https://github.com/Tresjs/tres/commit/dbbaee748a51166cb1b03fecdc1a086772b4a437))
+- removing resetState and going for more granular approach of disposal ([6f1e38b](https://github.com/Tresjs/tres/commit/6f1e38b3361a08d047b7c094285cfd67145502ad))
+- reset state on unmounted ([dbbaee7](https://github.com/Tresjs/tres/commit/dbbaee748a51166cb1b03fecdc1a086772b4a437))
 
 ## [2.0.0-alpha.3](https://github.com/Tresjs/tres/compare/2.0.0-alpha.2...2.0.0-alpha.3) (2023-03-26)
 
-
 ### Bug Fixes
 
-* ensure parent for nodeOps target when key is a function ([c07d963](https://github.com/Tresjs/tres/commit/c07d963bd50910f9df519db05ed7f1a496ff03cc))
+- ensure parent for nodeOps target when key is a function ([c07d963](https://github.com/Tresjs/tres/commit/c07d963bd50910f9df519db05ed7f1a496ff03cc))
 
 ## [2.0.0-alpha.2](https://github.com/Tresjs/tres/compare/2.0.0-alpha.1...2.0.0-alpha.2) (2023-03-23)
 
-
 ### Features
 
-* buffergeometry setAttribute logic ([beee7b3](https://github.com/Tresjs/tres/commit/beee7b3d564e983e64b51bb4e97c6c357c6de89a))
+- buffergeometry setAttribute logic ([beee7b3](https://github.com/Tresjs/tres/commit/beee7b3d564e983e64b51bb4e97c6c357c6de89a))
 
 ## [2.0.0-alpha.1](https://github.com/Tresjs/tres/compare/2.0.0-alpha.0...2.0.0-alpha.1) (2023-03-22)
 
-
 ### Bug Fixes
 
-* set scene to state ([1ead941](https://github.com/Tresjs/tres/commit/1ead941eda465a6a6a319a9172052285dd4c146d))
+- set scene to state ([1ead941](https://github.com/Tresjs/tres/commit/1ead941eda465a6a6a319a9172052285dd4c146d))
 
 ## [2.0.0-alpha.0](https://github.com/Tresjs/tres/compare/@tresjs/core@1.8.1...2.0.0-alpha.0) (2023-03-22)
 
-
 ### Features
 
-* **cientos:** better typ support useEnvironment ([821b6a6](https://github.com/Tresjs/tres/commit/821b6a6b8eea0d9648e371b7b971461f0cb84d15))
-* **cientos:** correctly typed Text3D ([61efbfb](https://github.com/Tresjs/tres/commit/61efbfbd08c6f1843c6ad8dd7d893cd287018ba0))
-* **cientos:** orbit controls typed ([e38e699](https://github.com/Tresjs/tres/commit/e38e6996d5eb136bb9bf0a828547c2c9403aebd5))
-* **cientos:** shapes types ([aa7361b](https://github.com/Tresjs/tres/commit/aa7361b8059d5582fc03710ccdde56b60243fe9b))
-* **cientos:** typed usePamCameraMouse ([07609be](https://github.com/Tresjs/tres/commit/07609be5c8401fce5ab8cd4aa3d70c1e117160cc))
-* **core:** adding composables to the solution ([9a3f8bb](https://github.com/Tresjs/tres/commit/9a3f8bb7461c253a175107c834f7eb50717602c9))
-* **core:** auto generated tres component types ([7430d2c](https://github.com/Tresjs/tres/commit/7430d2c7583a14a71f591b02ccdbdd5835123595))
-* **core:** cleaning up a little bit ([8bdd825](https://github.com/Tresjs/tres/commit/8bdd825d64617584d058866a176fb13d12aa9cc8))
-* **core:** export useLogger ([4ad1a3e](https://github.com/Tresjs/tres/commit/4ad1a3efa84cd43d35688329749704a549fa7134))
-* **core:** fixing black screen ([f4f198c](https://github.com/Tresjs/tres/commit/f4f198c9d04ab1a7fd22be2099c62e5ab8e2c461))
-* **core:** function props and demos updated ([fa072cd](https://github.com/Tresjs/tres/commit/fa072cddc0fca4c1862a49fa2877d3ef5c96dbd2))
-* **core:** nice warning for camera at [0,0,0] ([71eff1b](https://github.com/Tresjs/tres/commit/71eff1b5d0c6531a062b15790a315dad13a7ea18))
-* **core:** provide inject worked again ([2390ec1](https://github.com/Tresjs/tres/commit/2390ec1a757d17bbf02418f1b45848dbbe694da7))
-* **core:** re-structure and tres custom renderer base ([aad0953](https://github.com/Tresjs/tres/commit/aad0953c2d94004231366e20a82a73389f60c7ad))
-* **core:** tres components typing auto generated ([6736b4c](https://github.com/Tresjs/tres/commit/6736b4c6598cf6ad058fac1882257ca337f0902e))
-* **core:** types for TresCanvas ([42ee984](https://github.com/Tresjs/tres/commit/42ee984249ab528d15c1f2a33f950dc9aafbfa82))
-* **core:** v-if working on custom renderer ([e19da3a](https://github.com/Tresjs/tres/commit/e19da3a52d428e8deb32e414df5cfa49db20cd01))
-* createTres wrapper for mounting options ([d480b36](https://github.com/Tresjs/tres/commit/d480b364d4da76776515e6f9138e8f08f7d51e0f))
-
+- **cientos:** better typ support useEnvironment ([821b6a6](https://github.com/Tresjs/tres/commit/821b6a6b8eea0d9648e371b7b971461f0cb84d15))
+- **cientos:** correctly typed Text3D ([61efbfb](https://github.com/Tresjs/tres/commit/61efbfbd08c6f1843c6ad8dd7d893cd287018ba0))
+- **cientos:** orbit controls typed ([e38e699](https://github.com/Tresjs/tres/commit/e38e6996d5eb136bb9bf0a828547c2c9403aebd5))
+- **cientos:** shapes types ([aa7361b](https://github.com/Tresjs/tres/commit/aa7361b8059d5582fc03710ccdde56b60243fe9b))
+- **cientos:** typed usePamCameraMouse ([07609be](https://github.com/Tresjs/tres/commit/07609be5c8401fce5ab8cd4aa3d70c1e117160cc))
+- **core:** adding composables to the solution ([9a3f8bb](https://github.com/Tresjs/tres/commit/9a3f8bb7461c253a175107c834f7eb50717602c9))
+- **core:** auto generated tres component types ([7430d2c](https://github.com/Tresjs/tres/commit/7430d2c7583a14a71f591b02ccdbdd5835123595))
+- **core:** cleaning up a little bit ([8bdd825](https://github.com/Tresjs/tres/commit/8bdd825d64617584d058866a176fb13d12aa9cc8))
+- **core:** export useLogger ([4ad1a3e](https://github.com/Tresjs/tres/commit/4ad1a3efa84cd43d35688329749704a549fa7134))
+- **core:** fixing black screen ([f4f198c](https://github.com/Tresjs/tres/commit/f4f198c9d04ab1a7fd22be2099c62e5ab8e2c461))
+- **core:** function props and demos updated ([fa072cd](https://github.com/Tresjs/tres/commit/fa072cddc0fca4c1862a49fa2877d3ef5c96dbd2))
+- **core:** nice warning for camera at [0,0,0] ([71eff1b](https://github.com/Tresjs/tres/commit/71eff1b5d0c6531a062b15790a315dad13a7ea18))
+- **core:** provide inject worked again ([2390ec1](https://github.com/Tresjs/tres/commit/2390ec1a757d17bbf02418f1b45848dbbe694da7))
+- **core:** re-structure and tres custom renderer base ([aad0953](https://github.com/Tresjs/tres/commit/aad0953c2d94004231366e20a82a73389f60c7ad))
+- **core:** tres components typing auto generated ([6736b4c](https://github.com/Tresjs/tres/commit/6736b4c6598cf6ad058fac1882257ca337f0902e))
+- **core:** types for TresCanvas ([42ee984](https://github.com/Tresjs/tres/commit/42ee984249ab528d15c1f2a33f950dc9aafbfa82))
+- **core:** v-if working on custom renderer ([e19da3a](https://github.com/Tresjs/tres/commit/e19da3a52d428e8deb32e414df5cfa49db20cd01))
+- createTres wrapper for mounting options ([d480b36](https://github.com/Tresjs/tres/commit/d480b364d4da76776515e6f9138e8f08f7d51e0f))
 
 ### Bug Fixes
 
-* **cientos:** added default props to orbit controls ([68d8673](https://github.com/Tresjs/tres/commit/68d8673f0ce794d3d1e09905ead69e575e6e2f3c))
-* **cientos:** cone props ([5f20368](https://github.com/Tresjs/tres/commit/5f2036859733ec864f1736bb3796a86193e9fb51))
-* **cientos:** remove unused extend ([5d5b487](https://github.com/Tresjs/tres/commit/5d5b4870d9d3452c00cf4a0e4295a911950d07bd))
-* **core:** added handleHMR update ([594ab73](https://github.com/Tresjs/tres/commit/594ab738f60c6d1d4e6a9ac0339bb8a3c0d44eb8))
-* **core:** fixed type issues ([bd4be33](https://github.com/Tresjs/tres/commit/bd4be33ab77372307ef59b0ff3bc8989fb40151f))
-* **core:** nodeOps no op ([9044c99](https://github.com/Tresjs/tres/commit/9044c99878f312c6e4c120e9eeee61ea675754e8))
-* useTexture to show indentation for code snippet ([e983c5d](https://github.com/Tresjs/tres/commit/e983c5d945fe2d72083edf03cf08152fe517cbe9))
+- **cientos:** added default props to orbit controls ([68d8673](https://github.com/Tresjs/tres/commit/68d8673f0ce794d3d1e09905ead69e575e6e2f3c))
+- **cientos:** cone props ([5f20368](https://github.com/Tresjs/tres/commit/5f2036859733ec864f1736bb3796a86193e9fb51))
+- **cientos:** remove unused extend ([5d5b487](https://github.com/Tresjs/tres/commit/5d5b4870d9d3452c00cf4a0e4295a911950d07bd))
+- **core:** added handleHMR update ([594ab73](https://github.com/Tresjs/tres/commit/594ab738f60c6d1d4e6a9ac0339bb8a3c0d44eb8))
+- **core:** fixed type issues ([bd4be33](https://github.com/Tresjs/tres/commit/bd4be33ab77372307ef59b0ff3bc8989fb40151f))
+- **core:** nodeOps no op ([9044c99](https://github.com/Tresjs/tres/commit/9044c99878f312c6e4c120e9eeee61ea675754e8))
+- useTexture to show indentation for code snippet ([e983c5d](https://github.com/Tresjs/tres/commit/e983c5d945fe2d72083edf03cf08152fe517cbe9))

README.md

@@ -9,32 +9,59 @@
 
 Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion. Think of it as a [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) or [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) but without the need of a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html).
 
-## Setup
+## Docs
+
+Checkout the [docs](https://tresjs.org)
+
+## Demos
+
+- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
+
+## Contribution
+
+We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
+
+
+### Setup
 
 ```
 pnpm install --shamefully-hoist
 ```
 
-## Dev
+### Playground
 
-To run the small playground without Histoire use
+To run the small playground
 
 ```
-pnpm run dev
+pnpm run playground
 ```
 
-## Histoire
+### Build lib
 
-All local demos will be inside [Histoire](https://histoire.dev/) stories.
+To build the core as library mode just use
 
 ```
-pnpm run story:dev
+pnpm run build
 ```
 
-## Build lib
+### Docs
 
-To build the core as library mode just use
+To run de docs in dev mode
 
+```bash
+pnpm run docs:dev
 ```
-pnpm run build
+
+To build them
+
+```bash
+pnpm run docs:build
 ```
+
+## License
+
+[MIT](/LICENSE)
+
+## Sponsors
+
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️

docs/.vitepress/cache/deps/_metadata.json

@@ -1,47 +1,47 @@
 {
-  "hash": "ce72b907",
-  "browserHash": "3745f89c",
+  "hash": "8885e0d8",
+  "browserHash": "f5506ae5",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "0a41b7ad",
+      "fileHash": "0e9f3d71",
       "needsInterop": false
     },
     "three": {
       "src": "../../../../node_modules/.pnpm/three@0.150.1/node_modules/three/build/three.module.js",
       "file": "three.js",
-      "fileHash": "51953890",
+      "fileHash": "83b7f56c",
       "needsInterop": false
     },
     "@tresjs/cientos": {
-      "src": "../../../../node_modules/.pnpm/@tresjs+cientos@2.0.0-alpha.1_three@0.150.1/node_modules/@tresjs/cientos/dist/trescientos.js",
+      "src": "../../../../node_modules/.pnpm/@tresjs+cientos@2.0.0-alpha.5_three@0.150.1/node_modules/@tresjs/cientos/dist/trescientos.js",
       "file": "@tresjs_cientos.js",
-      "fileHash": "82b83a88",
+      "fileHash": "8aa5eace",
       "needsInterop": false
     },
     "@stackblitz/sdk": {
       "src": "../../../../node_modules/.pnpm/@stackblitz+sdk@1.8.2/node_modules/@stackblitz/sdk/bundles/sdk.m.js",
       "file": "@stackblitz_sdk.js",
-      "fileHash": "aa68338f",
+      "fileHash": "a975a8b1",
       "needsInterop": false
     },
     "gsap": {
       "src": "../../../../node_modules/.pnpm/gsap@3.11.5/node_modules/gsap/index.js",
       "file": "gsap.js",
-      "fileHash": "e05a3b19",
-      "needsInterop": false
-    },
-    "@alvarosabu/utils": {
-      "src": "../../../../node_modules/.pnpm/@alvarosabu+utils@2.3.0/node_modules/@alvarosabu/utils/dist/as-utils.js",
-      "file": "@alvarosabu_utils.js",
-      "fileHash": "8b7c8609",
+      "fileHash": "4e5151fd",
       "needsInterop": false
     },
     "@vueuse/core": {
       "src": "../../../../node_modules/.pnpm/@vueuse+core@9.13.0/node_modules/@vueuse/core/index.mjs",
       "file": "@vueuse_core.js",
-      "fileHash": "cf062886",
+      "fileHash": "62e3edb1",
+      "needsInterop": false
+    },
+    "@alvarosabu/utils": {
+      "src": "../../../../node_modules/.pnpm/@alvarosabu+utils@2.3.0/node_modules/@alvarosabu/utils/dist/as-utils.js",
+      "file": "@alvarosabu_utils.js",
+      "fileHash": "07b617fe",
       "needsInterop": false
     }
   },

docs/.vitepress/config.ts

@@ -60,61 +60,6 @@ export default defineConfig({
           },
         ],
       },
-      {
-        text: 'Cientos 💛',
-        collapsible: true,
-        items: [
-          { text: 'Introduction', link: '/cientos/' },
-          {
-            text: 'Abstractions',
-            items: [
-              { text: 'Text3D', link: '/cientos/abstractions/text-3d' },
-              { text: 'useAnimations', link: '/cientos/abstractions/use-animations' },
-              { text: 'Environment', link: '/cientos/abstractions/environment' },
-              { text: 'useEnvironment', link: '/cientos/abstractions/use-environment' },
-              { text: 'usePamMouse', link: '/cientos/abstractions/pam-camera-mouse' },
-            ],
-          },
-          {
-            text: 'Controls',
-            items: [
-              { text: 'OrbitControls', link: '/cientos/controls/orbit-controls' },
-              { text: 'TransformControls', link: '/cientos/controls/transform-controls' },
-            ],
-          },
-          {
-            text: 'Loaders',
-            items: [
-              { text: 'useGLTF', link: '/cientos/loaders/use-gltf' },
-              { text: 'GLTFModel', link: '/cientos/loaders/gltf-model' },
-              { text: 'useFBX', link: '/cientos/loaders/use-fbx' },
-              { text: 'FBXModel', link: '/cientos/loaders/fbx-model' },
-            ],
-          },
-          {
-            text: 'Shapes',
-            items: [
-              { text: 'Box', link: '/cientos/shapes/box' },
-              { text: 'Circle', link: '/cientos/shapes/circle' },
-              { text: 'Cone', link: '/cientos/shapes/cone' },
-              { text: 'Dodecahedron', link: '/cientos/shapes/dodecahedron' },
-              { text: 'Icosahedron', link: '/cientos/shapes/icosahedron' },
-              { text: 'Octahedron', link: '/cientos/shapes/octahedron' },
-              { text: 'Plane', link: '/cientos/shapes/plane' },
-              { text: 'Ring', link: '/cientos/shapes/ring' },
-              { text: 'Sphere', link: '/cientos/shapes/sphere' },
-              { text: 'Tetrahedron', link: '/cientos/shapes/tetrahedron' },
-              { text: 'Torus', link: '/cientos/shapes/torus' },
-              { text: 'TorusKnot', link: '/cientos/shapes/torus-knot' },
-              { text: 'Tube', link: '/cientos/shapes/tube' },
-            ],
-          },
-          {
-            text: 'Misc',
-            items: [{ text: 'useTweakpane', link: '/cientos/misc/use-tweakpane' }],
-          },
-        ],
-      },
     ],
     nav: [
       { text: 'Guide', link: '/guide/' },
@@ -149,6 +94,7 @@ export default defineConfig({
     socialLinks: [
       /*  { icon: 'github', link: 'https://github.com/tresjs/tres' }, */
       { icon: 'twitter', link: 'https://twitter.com/alvarosabu' },
+      { icon: 'discord', link: 'https://discord.gg/wXx63MwW'}
     ],
   },
   vite: {

docs/api/composables.md

@@ -109,17 +109,21 @@ const texture = await useTexture(['path/to/texture.png'])
 - `roughnessMap`: a texture that is used to add roughness or a matte finish to the object's surface
 - `metalnessMap`: a texture that is used to add a metallic effect to the object's surface
 - `aoMap`: a texture that is used to add ambient occlusion (shading in areas where light is blocked by other objects) to the object.
+- `alphaMap`: a texture that is used to add alpha (the black part render as transparent) to the object. It's necessary to set :trasparent="true" on the material to use this map
+- `matcap`: this textures encodes the material color and shading.
 
 In that case it will return an object with the loaded textures.
 
 ```ts
-const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap } = await useTexture({
+const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
   map: 'path/to/albedo.png',
   displacementMap: 'path/to/height.png',
   normalMap: 'path/to/normal.png',
   roughnessMap: 'path/to/roughness.png',
   metalnessMap: 'path/to/metalness.png',
   aoMap: 'path/to/ambien-occlusion.png',
+  alphaMap: 'path/to/alpha.png',
+  matcap: 'path/to/matcap.png',
 })
 ```
 
@@ -137,6 +141,7 @@ Then you can bind the textures to the material.
         :roughnessMap="roughnessMap"
         :metalnessMap="metalnessMap"
         :aoMap="aoMap"
+        :alphaMap="alphaMap"
       />
     </TresMesh>
   </TresCanvas>

docs/cientos/abstractions/environment.md

@@ -1,67 +0,0 @@
-# Environment
-
-![Environment](/cientos/environment.png)
-
-Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`,
-
-It uses the composable [useEnvironment](/cientos/abstractions/use-environment) under the hood to load the cubemap.
-
-## Usage
-
-```html
-<Environment
-  :files="[
-    '/px.jpg',
-    '/nx.jpg',
-    '/py.jpg',
-    '/ny.jpg',
-    '/pz.jpg',
-    '/nz.jpg'
-]"
-/>
-```
-
-You can also pass the `.hdr` file directly:
-
-```html
-<Environment files="/sunset.hdr" />
-```
-
-![Environment](/cientos/envmaps.png)
-
-## Texture reference
-
-You can access the model reference by pasing a `ref` to the `<Environment />` prop and then using the method `getTexture()` to get the object.
-
-```vue{4,6,9,14,17}
-<script setup lang="ts">
-import { Environment } from '@tresjs/cientos'
-
-let envMap = null
-
-const environmentTexture = shallowRef()
-
-watch(environmentTexture, ({ getTexture }) => {
-  envMap = getTexture()
-})
-</script>
-
-<template>
-  <Environment ref="environmentTexture" />
-  <TresMesh>
-    <TresSphereGeometry />
-    <TresMeshStandardMaterial :env-map="envMap" />
-  </TresMesh>
-</template>
-```
-
-## Props
-
-| Prop         | Description                                                          | Default                                                                        |
-| :----------- | :------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `files`      | Array of 6 urls to images, one for each side of the CubeTexture.     | `undefined`                                                                    |
-| `path`       | Path to the environment map files.                                   | `undefined`                                                                    |
-| `encoding`   | Encoding of the environment map.                                     | `sRGBEncoding` for an array of files and `LinearEncoding` for a single texture |
-| `background` | If `true`, the environment map will be used as the scene background. | `false`                                                                        |
-| `blur`       | Blur factor between 0 and 1. (only works with three 0.146 and up)    | 0                                                                              |
-| `preset`     | Preset environment map.                                              | `undefined`                                                                    |

docs/cientos/abstractions/pam-camera-mouse.md

@@ -1,31 +0,0 @@
-# PamCameraMouse
-
-![](/cientos/PamCameraMouse.gif)
-
-`<PamCameraMouse />` is a component that allow you to create easily the pam mouse camera effect. The camera will update automatically according to the mouse position, creating a beautiful nice effect
-
-## Usage
-
-You only need import it and use it `<PamCameraMouse />` additionally you can pass two props, disabled and factor. Factor is a number to increase the movement range of the camera
-
-```vue
-<template>
-  <TresCanvas>
-    <PamCameraMouse />
-    <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-      <TresMeshNormalMaterial />
-    </Text3D>
-  </TresCanvas>
-</template>
-```
-
-::: warning
-By the nature of the pam mouse camera effect it creates conflicts if it's used in combination with OrbitControls
-:::
-
-## Props [[1]](#1)
-
-| Prop         | Description                                             | Default |
-| :----------- | :------------------------------------------------------ | ------- |
-| **disabled** | enable or disabled the effect, boolean                  | false   |
-| **factor**   | Number use to increase the range of the camera movement | 5       |

docs/cientos/abstractions/text-3d.md

@@ -1,52 +0,0 @@
-# Text3D
-
-`<Text3D />` is a component that renders a 3D text. It is a wrapper around the [TextGeometry](https://threejs.org/docs/#api/en/geometries/TextGeometry) class.
-
-<StackBlitzEmbed projectId="tresjs-text3d-cientos" />
-
-## Usage
-
-To use the `<Text3D />` component you need to pass the `font` prop with the URL of the font JSON file you want to use. TextGeometry uses `typeface`.json generated fonts, you can generate yours [here](http://gero3.github.io/facetype.js/)
-
-```vue
-<template>
-  <TresCanvas>
-    <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-      <TresMeshNormalMaterial />
-    </Text3D>
-  </TresCanvas>
-</template>
-```
-
-Notice that you need to pass the `<TresMeshNormalMaterial />` component as a child of the `<Text3D />` component. This is because `<Text3D />` is a `Mesh` component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:
-
-```vue
-<template>
-  <TresCanvas>
-    <Text3D font="/fonts/FiraCodeRegular.json">
-      TresJS
-      <TresMeshNormalMaterial />
-    </Text3D>
-  </TresCanvas>
-</template>
-```
-
-## Props [[1]](#1)
-
-| Prop               | Description                                                            | Default |
-| :----------------- | :--------------------------------------------------------------------- | ------- |
-| **font**           | The font data or font name to use for the text.                        |         |
-| **text**           | The text to display.                                                   |         |
-| **size**           | The size of the text.                                                  | 0.5     |
-| **height**         | The height of the text.                                                | 0.2     |
-| **curveSegments**  | The number of curve segments to use when generating the text geometry. | 5       |
-| **bevelEnabled**   | A flag indicating whether beveling should be enabled for the text.     | true    |
-| **bevelThickness** | The thickness of the beveled edge on the text.                         | 0.05    |
-| **bevelSize**      | The size of the beveled edge on the text.                              | 0.02    |
-| **bevelOffset**    | The offset of the beveled edge on the text.                            | 0       |
-| **bevelSegments**  | The number of bevel segments to use when generating the text geometry. | 4       |
-
-## References
-
-<a id="1">[1]</a>
-This table was generated by [ChatGPT](https://chat.openai.com/chat) based on the Vue component props.

docs/cientos/abstractions/use-animations.md

@@ -1,21 +0,0 @@
-# useAnimations
-
-`useAnimation` is a composable that returns a `shallowReactive` with all the models actions based on the animations provided. It is a wrapper around the [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) class.
-
-<StackBlitzEmbed projectId="tresjs-use-animations" />
-
-## Usage
-
-```ts
-import { useAnimations } from '@tresjs/cientos'
-
-const { scene: model, animations } = await useGLTF('/models/ugly-naked-bunny.gltf')
-
-// Animations [ { name: 'Greeting'}, { name: 'Idle' } ]
-
-const { actions, mixer } = useAnimations(animations, model)
-
-let currentAction = actions.Greeting
-
-currentAction.play()
-```

docs/cientos/abstractions/use-environment.md

@@ -1,44 +0,0 @@
-# UseEnvironment <Badge type="warning" text="^1.7.0" />
-
-`useEnvironment` composable that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`.
-
-It uses the [CubeTextureLoader](https://threejs.org/docs/#api/en/loaders/CubeTextureLoader) to load the cubemap
-
-## Usage
-
-```ts
-import { useEnvironment } from '@tresjs/cientos'
-
-const texture = await useEnvironment({
-  files: [
-    '/textures/environmentMaps/0/px.jpg',
-    '/textures/environmentMaps/0/nx.jpg',
-    '/textures/environmentMaps/0/py.jpg',
-    '/textures/environmentMaps/0/ny.jpg',
-    '/textures/environmentMaps/0/pz.jpg',
-    '/textures/environmentMaps/0/nz.jpg',
-  ],
-  path: '',
-  encoding: sRGBEncoding,
-})
-```
-
-Then you can use the `texture` in your scene:
-
-```html{3}
-<TresMesh>
-    <TresSphereGeometry />
-    <TresMeshStandardMaterial :map="texture" />
-</TresMesh>
-```
-
-## Options
-
-| Name           | Type       | Default                                                                        | Description                                                       |
-| :------------- | ---------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
-| **files**      | `Array`    | `undefined`                                                                    | Array of 6 urls to images, one for each side of the CubeTexture.  |
-| **path**       | `boolean`  | `false`                                                                        | Path to the environment map files.                                |
-| **encoding**   | `Encoding` | `sRGBEncoding` for an array of files and `LinearEncoding` for a single texture | Encoding of the environment map.                                  |
-| **background** | `boolean`  | `false`                                                                        | If `true` the texture will be used as the scene background.       |
-| **blur**       | `number`   | `0`                                                                            | Blur factor between 0 and 1. (only works with three 0.146 and up) |
-| **preset**     | `string`   | `undefined`                                                                    | Preset environment map.                                           |

docs/cientos/controls/orbit-controls.md

@@ -1,30 +0,0 @@
-# OrbitControls
-
-[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
-
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/OrbitControls` module.
-
-Here is where the fancy part begins. ✨  
-The `cientos` package provides a component called `<OrbitControls />` that is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
-
-The nicest part? You don't need to extend the catalog or pass any arguments.  
-It just works. 💯
-
-```vue{3}
-<template>
-  <TresCanvas shadows alpha>
-    <OrbitControls />
-
-  </TresCanvas>
-</template>
-```
-
-## Props
-
-| Prop              | Description                                                                                                      | Default     |
-| :---------------- | :--------------------------------------------------------------------------------------------------------------- | ----------- |
-| **makeDefault**   | If `true`, the controls will be set as the default controls for the scene.                                       | `false`     |
-| **camera**        | The camera to control.                                                                                           | `undefined` |
-| **domElement**    | The dom element to listen to.                                                                                    | `undefined` |
-| **target**        | The target to orbit around.                                                                                      | `undefined` |
-| **enableDamping** | If `true`, the controls will use damping (inertia), which can be used to give a sense of weight to the controls. | `false`     |

docs/cientos/controls/transform-controls.md

@@ -1,99 +0,0 @@
-# Transform Controls
-
-The [Transform Controls](https://threejs.org/docs/#examples/en/controls/TransformControls) are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender
-
-<StackBlitzEmbed projectId="tresjs-transform-controls" />
-
-## Usage
-
-To use the Transform Controls, simply add the `TransformControls` component to your scene. You can pass the `templateRef`of the instance you want to control as a prop.
-
-```vue{2,6,8}
-<script setup>
-const boxRef = shallowRef()
-</script>
-<template>
-  <TresCanvas>
-    <OrbitControls make-default />
-      <TransformControls :object="boxRef" />
-      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
-          <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-          <TresMeshToonMaterial color="#4F4F4F" />
-      </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-::: warning
-If you are using other controls ([OrbitControls](/cientos/controls/orbit-controls)) they will interfere with each other when dragging. To avoid this, you can set the `makeDefault` prop to `true` on the **OrbitControls**.
-:::
-
-## Modes
-
-The Transform Controls can be used in three different modes:
-
-### Translate
-
-![Translate](/cientos/transform-controls-translate.png)
-
-The default mode allows you to move the object around the scene.
-
-```html
-<TransformControls mode="translate" :object="sphereRef" />
-```
-
-### Rotate
-
-![Rotate](/cientos/transform-controls-rotate.png)
-
-The rotate mode allows you to rotate the object around the scene.
-
-```html
-<TransformControls mode="rotate" :object="boxRef" />
-```
-
-### Scale
-
-![Scale](/cientos/transform-controls-scale.png)
-
-The scale mode allows you to scale the object around the scene.
-
-```html
-<TransformControls mode="scale" :object="sphereRef" />
-```
-
-## Props
-
-| Prop                | Description                                                                                   | Default     |
-| :------------------ | :-------------------------------------------------------------------------------------------- | ----------- |
-|  **object**         | The instance [Object3D](https://threejs.org/docs/index.html#api/en/core/Object3D) to control. | `null`      |
-| **mode**            | The mode of the controls. Can be `translate`, `rotate` or `scale`.                            | `translate` |
-| **enabled**         | If `true`, the controls will be enabled.                                                      | `true`      |
-| **axis**            | The axis to use for the controls. Can be `X`, `Y`, `Z`, `XY`, `YZ`, `XZ`, `XYZ`.              | `XYZ`       |
-| **space**           | The space to use for the controls. Can be `local` or `world`.                                 | `local`     |
-| **size**            | The size of the controls.                                                                     | `1`         |
-| **translationSnap** | The distance to snap to when translating. (World units)                                       | `null`      |
-| **rotationSnap**    | The angle to snap to when rotating. (Radians)                                                 | `null`      |
-| **scaleSnap**       | The scale to snap to when scaling.                                                            | `null`      |
-| **showX**           | If `true`, the X-axis helper will be shown.                                                   | `true`      |
-| **showY**           | If `true`, the Y-axis helper will be shown.                                                   | `true`      |
-| **showZ**           | If `true`, the Z-axis helper will be shown.                                                   | `true`      |
-
-## Events
-
-| Event            | Description                                                    |
-| :--------------- | :------------------------------------------------------------- |
-| **dragging**     | Fired when the user starts or stops dragging the controls.     |
-| **change**       | Fired when the user changes the controls.                      |
-| **mouseDown**    | Fired when the user clicks on the controls.                    |
-| **mouseUp**      | Fired when the user releases the mouse button on the controls. |
-| **objectChange** | Fired when the user changes the object.                        |
-
-<style scoped>
-img {
-    aspect-ratio: 16/9;
-    object-fit: cover;
-    object-position: top;
-    border-radius: 8px;
-}
-</style>

docs/cientos/index.md

@@ -1,39 +0,0 @@
-# Cientos <Badge text="alpha" type="warning" />
-
-![Cientos banner](/cientos-banner.png)
-
-> Cientos (Spanish word for "hundreds", pronounced `/θjentos/` ) is is a collection of useful ready-to-go helpers and components that are not part of the [core](/guide/index.md) package. The name uses the word uses in spanish to multiply by 100, to refer to the potential reach of the package to hold a amazing abstractions.
-
-The `cientos` package uses [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module under the hood instead of the `three/examples/jsm` module. This means that you don't need to extend the catalogue of components using the `extend` method of the [useCatalogue](/api/composables#useCatalogue) composable, `cientos` does it for you.
-
-It just works. 💯
-
-::: info
-This package is not required to use the core library, but they can make your DX way better, specially for complex scenes.
-:::
-
-## Installation
-
-```bash
-npm install @tresjs/cientos@alpha -D
-```
-
-## Basic Usage
-
-```ts
-import { OrbitControls } from '@tresjs/cientos'
-```
-
-Now you can use the `OrbitControls` component in your scene.
-
-```html
-<template>
-  <TresCanvas shadows alpha>
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-::: warning
-Notice that you don't need to write the prefix `Tres` such as `<TresOrbitControl />` to use the component
-:::

docs/cientos/loaders/fbx-model.md

@@ -1,25 +0,0 @@
-# Using `FBXModel`
-
-The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props.
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, FBXModel } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <Suspense>
-        <FBXModel path="/models/AkuAku.fbx" />
-      </Suspense>
-      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-    </TresCanvas>
-</template>
-```
-
-## Props
-
-| Prop   | Description             | Default     |
-| :----- | :---------------------- | ----------- |
-| `path` | Path to the model file. | `undefined` |

docs/cientos/loaders/gltf-model.md

@@ -1,48 +0,0 @@
-# Using `GLTFModel`
-
-The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props.
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <Suspense>
-        <GLTFModel path="/models/AkuAku.gltf" draco />
-      </Suspense>
-      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-    </TresCanvas>
-</template>
-```
-
-## Model reference
-
-You can access the model reference by pasing a `ref` to the `model` prop and then using the method `getModel()` to get the object.
-
-```vue{3,6}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-
-const modelRef = shallowRef<THREE.Object3D>()
-
-watch(modelRef, ({model}) => {
-  model.traverse((child) => {
-    if (child.isMesh) {
-      child.castShadow = true
-      child.receiveShadow = true
-    }
-  })
-})
-</script>
-```
-
-## Props
-
-| Prop          | Description                                                                                                           | Default     |
-| :------------ | :-------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `path`        | Path to the model file.                                                                                               | `undefined` |
-| `draco`       | Enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. | `false`     |
-| `decoderPath` | Path to a local Draco decoder.                                                                                        | `undefined` |

docs/cientos/loaders/use-fbx.md

@@ -1,21 +0,0 @@
-# useFBX
-
-A composable that allows you to easily load glTF models into your **TresJS** scene.
-
-## Usage
-
-```ts
-import { useFBX } from '@tresjs/cientos'
-
-const model = await useFBX('/models/AkuAku.fbx')
-```
-
-Then is as straightforward as adding the scene to your scene:
-
-```html{3}
-<TresCanvas shadows alpha>
-  <Suspense>
-    <TresMesh v-bind="scene" />
-  </Suspense>
-</TresCanvas>
-```

docs/cientos/loaders/use-gltf.md

@@ -1,36 +0,0 @@
-# useGLTF
-
-A composable that allows you to easily load glTF models into your **TresJS** scene.
-
-## Usage
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { scene } = await useGLTF('/models/AkuAku.gltf')
-```
-
-Then is as straightforward as adding the scene to your scene:
-
-```html{3}
-<TresCanvas shadows alpha>
-  <Suspense>
-    <TresMesh v-bind="scene" />
-  </Suspense>
-</TresCanvas>
-```
-
-An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { scene } = await useGLTF('/models/AkuAku.gltf', { draco: true })
-```
-
-## Options
-
-| Name            | Type      | Default     | Description                          |
-| :-------------- | --------- | ----------- | ------------------------------------ |
-| **draco**       | `boolean` | `false`     | Whether to enable Draco compression. |
-| **decoderPath** | `string`  | `undefined` | Local path to the Draco decoder.     |

docs/cientos/misc/use-tweakpane.md

@@ -1,40 +0,0 @@
-# useTweakPane
-
-[TweakPane](https://cocopon.github.io/tweakpane/) is a JavaScript library for creating a user interface for tweaking values of JavaScript variables. It's a great tool for fine-tuning parameters and monitoring value changes on your three.js applications.
-
-**TresJS** provides a composables called `useTweakPane` that creates a Tweakpane panel to your container so you can add tweaks to it. By default, the panel is created on the top right corner of the canvas and includes a FPS graph monitor to keep and eye on the performance of your scene.
-
-::: info
-You can change the container of the panel by passing the `selector` option to the `useTweakPane` function.
-:::
-
-## Basic usage
-
-```ts
-import { useTweakPane } from '@tresjs/cientos'
-
-const { pane } = useTweakPane()
-
-const experiment = reactive({
-  clearColor: '#000000',
-  alpha: true,
-  shadow: true,
-})
-
-pane.addInput(experiment, 'clearColor', {
-  label: 'Clear Color',
-  colorMode: 'hex',
-})
-
-pane.addInput(experiment, 'alpha')
-```
-
-The result will be something like this:
-
-![](/use-tweakpane.png)
-
-## Options
-
-| Name         | Type     | Default     | Description                                                    |
-| :----------- | -------- | ----------- | -------------------------------------------------------------- |
-| **selector** | `string` | `undefined` | The selector of the container where the panel will be created. |

docs/cientos/shapes/box.md

@@ -1,29 +0,0 @@
-# Box <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/box.png)
-
-The `cientos` package provides a `<Box />` component that serves as a short-cut for a `BoxGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  width: number,
-  height: number,
-  depth: number,
-  widthSegments: number,
-  heightSegments: number,
-  depthSegments: number
-]
-```
-
-Reference: [BoxGeometry](https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry)
-
-## Usage
-
-```html
-<Box :args="[1, 1, 1]" color="orange" />
-
-// Box with a custom material transformations
-<Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="orange" />
-</Box>
-```

docs/cientos/shapes/circle.md

@@ -1,22 +0,0 @@
-# Circle <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/circle.png)
-
-The `cientos` package provides a `<Circle />` component that serves as a short-cut for a `CircleGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, segments: number, thetaStart: number, thetaLength: number]
-```
-
-Reference: [CircleGeometry](https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry)
-
-## Usage
-
-```html
-<Circle :args="[1, 32]" color="lightsalmon" />
-
-// Circle with a custom material transformations
-<Circle ref="circleRef" :args="[1, 32]" :position="[0, 0, 0]">
-  <TresMeshToonMaterial color="lightsalmon" />
-</Circle>
-```

docs/cientos/shapes/cone.md

@@ -1,30 +0,0 @@
-# Cone <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/cone.png)
-
-The `cientos` package provides a `<Cone />` component that serves as a short-cut for a `ConeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  height: number,
-  radialSegments: number,
-  heightSegments: number,
-  openEnded: boolean,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [ConeGeometry](https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry)
-
-## Usage
-
-```html
-<Cone :args="[1, 1, 8]" color="orange" />
-
-// Cone with a custom material transformations
-<Cone ref="coneRef" :args="[1, 1, 8]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="orange" />
-</Cone>
-```

docs/cientos/shapes/dodecahedron.md

@@ -1,22 +0,0 @@
-# Dodecahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/dodecahedron.png)
-
-The `cientos` package provides a `<Dodecahedron />` component that serves as a short-cut for a `DodecahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [DodecahedronGeometry](https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry)
-
-## Usage
-
-```html
-<Dodecahedron :args="[1, 0]" color="deeppink" />
-
-// Dodecahedron with a custom material transformations
-<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="deeppink" />
-</Dodecahedron>
-```

docs/cientos/shapes/icosahedron.md

@@ -1,22 +0,0 @@
-# Icosahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/icosahedron.png)
-
-The `cientos` package provides a `<Icosahedron />` component that serves as a short-cut for a `IcosahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [IcosahedronGeometry](https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry)
-
-## Usage
-
-```html
-<Icosahedron :args="[1, 0]" color="red" />
-
-// Icosahedron with a custom material transformations
-<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="red" />
-</Icosahedron>
-```

docs/cientos/shapes/octahedron.md

@@ -1,22 +0,0 @@
-# Octahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/octahedron.png)
-
-The `cientos` package provides a `<Octahedron />` component that serves as a short-cut for a `OctahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [OctahedronGeometry](https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry)
-
-## Usage
-
-```html
-<Octahedron :args="[1, 0]" color="red" />
-
-// Octahedron with a custom material transformations
-<Octahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="red" />
-</Octahedron>
-```

docs/cientos/shapes/plane.md

@@ -1,26 +0,0 @@
-# Plane <Badge type="warning" text="^1.5.0" />
-
-![](/cientos/plane.png)
-
-The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [width: number, height: number, widthSegments: number, heightSegments: number]
-```
-
-Reference: [PlaneGeometry](https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry)
-
-::: info
-A convenient default rotation is applied to the _x-axis_ of the plane (`-Math.PI / 2`), so that it is facing up (along the Y axis).
-:::
-
-## Usage
-
-```html
-<Plane :args="[1, 1]" color="teal" />
-
-// Plane with a custom material transformations
-<Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="teal" />
-</Plane>
-```

docs/cientos/shapes/ring.md

@@ -1,29 +0,0 @@
-# Ring <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/ring.png)
-
-The `cientos` package provides a `<Ring />` component that serves as a short-cut for a `RingGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  innerRadius: number,
-  outerRadius: number,
-  thetaSegments: number,
-  phiSegments: number,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [RingGeometry](https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry)
-
-## Usage
-
-```html
-<Ring :args="[0.5, 1, 32]" color="purple" />
-
-// Ring with a custom material transformations
-<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="purple" />
-</Ring>
-```

docs/cientos/shapes/sphere.md

@@ -1,30 +0,0 @@
-# Sphere <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/sphere.png)
-
-The `cientos` package provides a `<Sphere />` component that serves as a short-cut for a `SphereGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  widthSegments: number,
-  heightSegments: number,
-  phiStart: number,
-  phiLength: number,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [SphereGeometry](https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry)
-
-## Usage
-
-```html
-<Sphere :args="[1, 1, 1]" color="pink" />
-
-// Sphere with a custom material transformations
-<Sphere ref="planeRef" :args="[1, 1, 1]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="pink" />
-</Sphere>
-```

docs/cientos/shapes/tetrahedron.md

@@ -1,22 +0,0 @@
-# Tetrahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/tetrahedron.png)
-
-The `cientos` package provides a `<Tetrahedron />` component that serves as a short-cut for a `TetrahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [TetrahedronGeometry](https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry)
-
-## Usage
-
-```html
-<Tetrahedron :args="[1, 0]" color="yellow" />
-
-// Tetrahedron with a custom material transformations
-<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="yellow" />
-</Tetrahedron>
-```

docs/cientos/shapes/torus-knot.md

@@ -1,29 +0,0 @@
-# TorusKnot <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/torus-knot.png)
-
-The `cientos` package provides a `<TorusKnot />` component that serves as a short-cut for a `TorusKnotGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  tube: number,
-  tubularSegments: number,
-  radialSegments: number,
-  p: number,
-  q: number
-]
-```
-
-Reference: [TorusKnotGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry)
-
-## Usage
-
-```html
-<TorusKnot :args="[0.6, 0.2, 64, 8]" color="lime" />
-
-// TorusKnot with a custom material transformations
-<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]">
-  <TresMeshToonMaterial color="lime" />
-</TorusKnot>
-```

docs/cientos/shapes/torus.md

@@ -1,28 +0,0 @@
-# Torus <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/torus.png)
-
-The `cientos` package provides a `<Torus />` component that serves as a short-cut for a `TorusGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  tube: number,
-  radialSegments: number,
-  tubularSegments: number,
-  arc: number
-]
-```
-
-Reference: [TorusGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry)
-
-## Usage
-
-```html
-<Torus :args="[2, 0.4, 42, 100]" color="cyan" />
-
-// Torus with a custom material transformations
-<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]">
-  <TresMeshToonMaterial color="cyan" />
-</Torus>
-```

docs/cientos/shapes/tube.md

@@ -1,50 +0,0 @@
-# Tube <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/tube.png)
-
-The `cientos` package provides a `<Tube />` component that serves as a short-cut for a `TubeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-<script>
-export default {
-  setup() {
-    const tubePath = ref(new CubicBezierCurve3(
-          new Vector3(-1, 0, 0),
-          new Vector3(-0.5, -1, 0),
-          new Vector3(0.5, 1, 0),
-          new Vector3(1, 0, 0),
-          ));
-
-    return {
-      tubePath
-    }
-  },
-}
-</script>
-```
-
-```typescript
-type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
-
-args: [
-  path: CurveType,
-  tubularSegments: number,
-  radius: number,
-  radialSegments: number,
-  closed: boolean
-]
-```
-
-Reference: [TubeGeometry](https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry)
-
-## Usage
-
-```html
-// TubeGeometry needs a curve path to be construct
-<Tube :args="[tubePath, 20, 0.2, 8, false]" color="lightblue" />
-
-// Tube with a custom material transformations
-<Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="lightblue" />
-</Tube>
-```

docs/guide/getting-started.md

@@ -53,6 +53,24 @@ import { TresCanvas } from '@tresjs/core'
 This is recommended for performance and bundle size reasons, Three-shaking will work better and you will only import the components that you use.
 :::
 
+## Vite
+
+Since v2 is a custom renderer, we need to let the `vue-compiler` of your app know that the components of Tres are ok to be included to avoid the `[Vue warn]: Failed to resolve component` warning.
+
+You just need to add this to your `vite.config.ts` inside of the vue plugin:
+
+```ts
+export default defineConfig({
+  plugins: [vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+      },
+    },
+  }),
+})
+```
+
 ### Nuxt
 
 Nuxt official module `@tresjs/nuxt` is comming soon, planned for the Q2 of 2023 ;)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -90,7 +90,6 @@
     "vite": "^4.1.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.1.0",
-    "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-inspect": "^0.7.16",
     "vite-plugin-require-transform": "^1.0.9",
     "vite-svg-loader": "^4.0.0",

playground/components.d.ts

@@ -12,9 +12,12 @@ declare module '@vue/runtime-core' {
     AkuAku: typeof import('./src/components/gltf/AkuAku.vue')['default']
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']
+    PortalJourney: typeof import('./src/components/portal-journey/index.vue')['default']
     Responsiveness: typeof import('./src/components/Responsiveness.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ShadersExperiment: typeof import('./src/components/shaders-experiment/index.vue')['default']
+    'ShadersExperiment.vue': typeof import('./src/components/shadersExperiment.vue/index.vue')['default']
     Shapes: typeof import('./src/components/Shapes.vue')['default']
     TestSphere: typeof import('./src/components/TestSphere.vue')['default']
     Text3D: typeof import('./src/components/Text3D.vue')['default']
@@ -23,9 +26,11 @@ declare module '@vue/runtime-core' {
     TheEvents: typeof import('./src/components/TheEvents.vue')['default']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']
     TheExperiment: typeof import('./src/components/gltf/TheExperiment.vue')['default']
+    TheFireFlies: typeof import('./src/components/portal-journey/TheFireFlies.vue')['default']
     TheGizmos: typeof import('./src/components/TheGizmos.vue')['default']
     TheGroups: typeof import('./src/components/TheGroups.vue')['default']
     TheParticles: typeof import('./src/components/TheParticles.vue')['default']
+    ThePortal: typeof import('./src/components/portal-journey/ThePortal.vue')['default']
     TheSmallExperience: typeof import('./src/components/TheSmallExperience.vue')['default']
     VectorSetProps: typeof import('./src/components/VectorSetProps.vue')['default']
   }

playground/package.json

@@ -16,10 +16,11 @@
   "devDependencies": {
     "@tresjs/cientos": "2.0.0-alpha.5",
     "@vitejs/plugin-vue": "^4.1.0",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.2",
     "unplugin-auto-import": "^0.15.2",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.2.0",
+    "vite": "^4.2.1",
+    "vite-plugin-glsl": "^1.1.2",
     "vue-tsc": "^1.2.0"
   }
 }

playground/pnpm-lock.yaml

@@ -4,10 +4,11 @@ specifiers:
   '@tresjs/cientos': 2.0.0-alpha.5
   '@vitejs/plugin-vue': ^4.1.0
   three: ^0.150.1
-  typescript: ^4.9.3
+  typescript: ^5.0.2
   unplugin-auto-import: ^0.15.2
   unplugin-vue-components: ^0.24.1
-  vite: ^4.2.0
+  vite: ^4.2.1
+  vite-plugin-glsl: ^1.1.2
   vue: ^3.2.47
   vue-router: ^4.1.6
   vue-tsc: ^1.2.0
@@ -20,11 +21,12 @@ dependencies:
 devDependencies:
   '@tresjs/cientos': 2.0.0-alpha.5_three@0.150.1+vue@3.2.47
   '@vitejs/plugin-vue': 4.1.0_vite@4.2.1+vue@3.2.47
-  typescript: 4.9.5
+  typescript: 5.0.2
   unplugin-auto-import: 0.15.2
   unplugin-vue-components: 0.24.1_vue@3.2.47
   vite: 4.2.1
-  vue-tsc: 1.2.0_typescript@4.9.5
+  vite-plugin-glsl: 1.1.2_vite@4.2.1
+  vue-tsc: 1.2.0_typescript@5.0.2
 
 packages:
 
@@ -982,9 +984,9 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /typescript/4.9.5:
-    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
-    engines: {node: '>=4.2.0'}
+  /typescript/5.0.2:
+    resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
+    engines: {node: '>=12.20'}
     hasBin: true
     dev: true
 
@@ -1071,6 +1073,18 @@ packages:
       webpack-virtual-modules: 0.5.0
     dev: true
 
+  /vite-plugin-glsl/1.1.2_vite@4.2.1:
+    resolution: {integrity: sha512-zmXsfc1vn2MlYve9t3FAoWuhLyoCkNS1TuQL+TkXZL7tGmBjRErp10eNYxcse5tK9oUC5MyJpNc4ElpQnx8DoA==}
+    engines: {node: '>= 16.15.1', npm: '>= 8.11.0'}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+      vite: 4.2.1
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /vite/4.2.1:
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -1135,7 +1149,7 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc/1.2.0_typescript@4.9.5:
+  /vue-tsc/1.2.0_typescript@5.0.2:
     resolution: {integrity: sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==}
     hasBin: true
     peerDependencies:
@@ -1143,7 +1157,7 @@ packages:
     dependencies:
       '@volar/vue-language-core': 1.2.0
       '@volar/vue-typescript': 1.2.0
-      typescript: 4.9.5
+      typescript: 5.0.2
     dev: true
 
   /vue/3.2.47:

playground/src/components/TheBasic.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { sRGBEncoding, BasicShadowMap, NoToneMapping, Vector3 } from 'three'
+import { sRGBEncoding, BasicShadowMap, NoToneMapping  } from 'three'
 import { reactive, ref } from 'vue'
 import { TresCanvas } from '/@/components/TresCanvas'
-import { OrbitControls, TransformControls } from '@tresjs/cientos'
+import { OrbitControls, TransformControls  } from '@tresjs/cientos'
 import { useRenderLoop } from '/@/'
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
 const state = reactive({
   clearColor: '#201919',
@@ -27,15 +26,16 @@ onLoop(({ elapsed }) => {
 </script>
 <template>
   <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[0,0,0]" />
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000"
+    :look-at="[0,0,0]" />
     <OrbitControls />
     <TresAmbientLight :intensity="0.5" />
 
     <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
       <TresSphereGeometry :args="[2,32,32]"/>
       <TresMeshToonMaterial color="cyan" />
-      <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
     </TresMesh>
+
     <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
     <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
       <TresPlaneGeometry :args="[10, 10, 10, 10]" />

playground/src/components/gltf/TheExperiment.vue

@@ -3,7 +3,6 @@ import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
 import { TresCanvas } from '/@/'
 import { GLTFModel, OrbitControls } from '@tresjs/cientos'
 
-
 const state = reactive({
   clearColor: '#82DBC5',
   shadows: true,
@@ -17,12 +16,11 @@ const state = reactive({
 const akuAkuRef = ref(null)
 
 watchEffect(() => {
-  if(akuAkuRef.value) {
+  if (akuAkuRef.value) {
     const model = akuAkuRef.value.getModel().children[0]
     console.log('akuAkuRef', model)
   }
 })
-
 </script>
 <template>
   <TresCanvas v-bind="state">
@@ -31,7 +29,11 @@ watchEffect(() => {
     <TresAmbientLight :intensity="0.5" />
 
     <Suspense>
-        <GLTFModel ref="akuAkuRef" path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf" draco />
+      <GLTFModel
+        ref="akuAkuRef"
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf"
+        draco
+      />
       <!--   <AkuAku /> -->
     </Suspense>
     <TresAxesHelper />

playground/src/components/portal-journey/TheFireFlies.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useRenderLoop } from '/@/'
+import { AdditiveBlending } from 'three'
+import FirefliesVertex from './shaders/fireflies/vertex.glsl'
+import FirefliesFragment from './shaders/fireflies/fragment.glsl'
+
+const shader = {
+  transparent: true,
+  blending: AdditiveBlending,
+  depthWrite: false,
+
+  vertexShader: FirefliesVertex,
+  fragmentShader: FirefliesFragment,
+  uniforms: {
+    uSize: { value: 100 },
+    uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
+    uTime: { value: 0 },
+  },
+}
+
+const firefliesCount = 60
+const positionArray = new Float32Array(firefliesCount * 3)
+const scaleArray = new Float32Array(firefliesCount)
+
+for (let i = 0; i < firefliesCount; i++) {
+  positionArray[i * 3 + 0] = (Math.random() - 0.5) * 4
+  positionArray[i * 3 + 1] = Math.random() * 4
+  positionArray[i * 3 + 2] = (Math.random() - 0.5) * 4
+  scaleArray[i] = Math.random()
+}
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ elapsed }) => {
+  shader.uniforms.uTime.value = elapsed
+})
+</script>
+<template>
+  <TresPoints>
+    <TresBufferGeometry :position="[positionArray, 3]" :a-scale="[scaleArray, 1]" />
+    <TresShaderMaterial v-bind="shader" />
+  </TresPoints>
+</template>

playground/src/components/portal-journey/ThePortal.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { sRGBEncoding, DoubleSide, MeshBasicMaterial, ShaderMaterial, Color, Mesh } from 'three'
+import { useRenderLoop, useTexture } from '/@/'
+import { useGLTF, useTweakPane } from '@tresjs/cientos'
+
+import PortalVertex from './shaders/portal/vertex.glsl'
+import PortalFragment from './shaders/portal/fragment.glsl'
+
+const experiment = {
+  portalColorStart: '#7030eb',
+  portalColorEnd: '#ddc0ff',
+}
+
+const { pane } = useTweakPane()
+
+const portalCtrls = pane.addFolder({ title: 'Portal' })
+portalCtrls
+  .addInput(experiment, 'portalColorStart', {
+    label: 'color start',
+    min: 0,
+    max: 1,
+    step: 0.01,
+  })
+  .on('change', ({ value }) => {
+    portalLightMaterial.uniforms.uColorStart.value.set(value)
+  })
+portalCtrls
+  .addInput(experiment, 'portalColorEnd', {
+    label: 'color end',
+    min: 0,
+    max: 1,
+    step: 0.01,
+  })
+  .on('change', ({ value }) => {
+    portalLightMaterial.uniforms.uColorEnd.value.set(value)
+  })
+
+const { scene: portal } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/portal.glb',
+  {
+    draco: true,
+  },
+)
+
+const bakedTexture = await useTexture([
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/baked.jpg',
+])
+
+bakedTexture.flipY = false
+bakedTexture.encoding = sRGBEncoding
+
+// Baked material
+const bakedMaterial = new MeshBasicMaterial({
+  map: bakedTexture,
+  side: DoubleSide,
+})
+
+const portalLightMaterial = new ShaderMaterial({
+  uniforms: {
+    uTime: { value: 0 },
+    uColorStart: { value: new Color(experiment.portalColorStart) },
+    uColorEnd: { value: new Color(experiment.portalColorEnd) },
+  },
+  vertexShader: PortalVertex,
+  fragmentShader: PortalFragment,
+  side: DoubleSide,
+})
+
+const portalObj = portal
+const bakedMesh = portalObj.children.find(child => child.name === 'baked')
+;(bakedMesh as Mesh).material = bakedMaterial
+const portalCircle = portalObj.children.find(child => child.name === 'portalCircle')
+;(portalCircle as Mesh).material = portalLightMaterial
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ _delta, elapsed }) => {
+  portalLightMaterial.uniforms.uTime.value = elapsed
+})
+</script>
+<template>
+  <TresMesh v-bind="portal" />
+</template>

playground/src/components/portal-journey/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { TresCanvas } from '/@/'
+import { OrbitControls } from '@tresjs/cientos'
+import ThePortal from './ThePortal.vue'
+import TheFireFlies from './TheFireFlies.vue'
+
+const gl = {
+  clearColor: '#202020',
+  shadows: true,
+  alpha: false,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <TresFog :args="[gl.clearColor, 0.1, 75]" />
+    <Suspense>
+      <ThePortal />
+    </Suspense>
+    <TheFireFlies />
+    <TresAmbientLight :position="[10, 10, 10]" :intensity="1.5" color="#00ff00" />
+  </TresCanvas>
+</template>

playground/src/components/portal-journey/shaders/fireflies/fragment.glsl

@@ -0,0 +1,7 @@
+void main()
+{
+  float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+  float strength = 0.05 / distanceToCenter - 0.1;
+
+  gl_FragColor = vec4(1.0, 1.0, 1.0, strength);
+}

playground/src/components/portal-journey/shaders/fireflies/vertex.glsl

@@ -0,0 +1,16 @@
+uniform float uPixelRatio;
+uniform float uSize;
+uniform float uTime;
+attribute float aScale;
+
+void main()
+{
+    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+    modelPosition.y += sin(uTime + modelPosition.x * 100.0) * aScale * 0.2;
+    vec4 viewPosition = viewMatrix * modelPosition;
+    vec4 projectionPosition = projectionMatrix * viewPosition;
+
+    gl_Position = projectionPosition;
+    gl_PointSize = aScale * uSize * uPixelRatio;
+    gl_PointSize *= (1.0 / - viewPosition.z);
+}

playground/src/components/portal-journey/shaders/portal/fragment.glsl

@@ -0,0 +1,101 @@
+varying vec2 vUv;
+uniform float uTime;
+uniform vec3 uColorStart;
+uniform vec3 uColorEnd;
+
+//	Classic Perlin 3D Noise 
+//	by Stefan Gustavson
+//
+vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+
+float cnoise(vec3 P){
+  vec3 Pi0 = floor(P); // Integer part for indexing
+  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
+  Pi0 = mod(Pi0, 289.0);
+  Pi1 = mod(Pi1, 289.0);
+  vec3 Pf0 = fract(P); // Fractional part for interpolation
+  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+  vec4 iy = vec4(Pi0.yy, Pi1.yy);
+  vec4 iz0 = Pi0.zzzz;
+  vec4 iz1 = Pi1.zzzz;
+
+  vec4 ixy = permute(permute(ix) + iy);
+  vec4 ixy0 = permute(ixy + iz0);
+  vec4 ixy1 = permute(ixy + iz1);
+
+  vec4 gx0 = ixy0 / 7.0;
+  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+  gx0 = fract(gx0);
+  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+  vec4 sz0 = step(gz0, vec4(0.0));
+  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+  gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+  vec4 gx1 = ixy1 / 7.0;
+  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+  gx1 = fract(gx1);
+  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+  vec4 sz1 = step(gz1, vec4(0.0));
+  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+  gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+
+  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+  g000 *= norm0.x;
+  g010 *= norm0.y;
+  g100 *= norm0.z;
+  g110 *= norm0.w;
+  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+  g001 *= norm1.x;
+  g011 *= norm1.y;
+  g101 *= norm1.z;
+  g111 *= norm1.w;
+
+  float n000 = dot(g000, Pf0);
+  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+  float n111 = dot(g111, Pf1);
+
+  vec3 fade_xyz = fade(Pf0);
+  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
+  return 2.2 * n_xyz;
+}
+
+void main() 
+{
+    float speed = 0.1;
+    // Displace the UV coordinates by a noise value
+    vec2 displacedUv = vUv + cnoise(vec3(vUv* 5.0, uTime * speed));
+    // Get the color from the texture
+    float strength = cnoise(vec3(displacedUv * 5.0, uTime * speed * 2.0));
+
+    // Outer Glow
+
+    float outerGlow = distance(vUv, vec2(0.5)) * 5.0 - 1.4;
+    strength += outerGlow;
+
+    strength += step(- 0.2, strength) * 0.8;
+
+    strength = clamp(strength, 0.0, 1.0);
+
+    vec3 color = mix(uColorStart, uColorEnd, strength);
+
+    gl_FragColor = vec4(color, 1.0);
+}

playground/src/components/portal-journey/shaders/portal/vertex.glsl

@@ -0,0 +1,11 @@
+varying vec2 vUv;
+
+void main() 
+{
+    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+    vec4 viewPosition = viewMatrix * modelPosition;
+    vec4 projectionPosition = projectionMatrix * viewPosition;
+
+    gl_Position = projectionPosition;
+    vUv = uv;
+}

playground/src/components/shaders-experiment/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { BasicShadowMap, sRGBEncoding, NoToneMapping, Vector2 } from 'three'
+import { TresCanvas, TresInstance, useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import vertexShader from './shaders/vertex.glsl'
+import fragmentShader from './shaders/fragment.glsl'
+import { ShallowRef } from 'vue'
+
+const gl = {
+  clearColor: '#4f4f4f',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+}
+
+const blobRef: ShallowRef<TresInstance | null> = shallowRef(null)
+
+const uniforms = {
+  uTime: { value: 0 },
+  uAmplitude: { value: new Vector2(0.1, 0.1) },
+  uFrequency: { value: new Vector2(20, 5) },
+}
+
+const { onLoop } = useRenderLoop()
+onLoop(({ elapsed }) => {
+  if (blobRef.value) {
+    blobRef.value.material.uniforms.uTime.value = elapsed
+  }
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <TresMesh ref="blobRef" :position="[0, 4, 0]">
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />
+    </TresMesh>
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshBasicMaterial color="#444" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/components/shaders-experiment/shaders/fragment.glsl

@@ -0,0 +1,6 @@
+precision mediump float;
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
+}

playground/src/components/shaders-experiment/shaders/vertex.glsl

@@ -0,0 +1,15 @@
+uniform vec2 uAmplitude;
+uniform vec2 uFrequency;
+uniform float uTime;
+
+varying vec2 vUv;
+
+void main() {
+    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+    modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x;
+    modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y;
+
+    vec4 viewPosition = viewMatrix * modelPosition;
+    gl_Position = projectionMatrix * viewPosition;
+    vUv = uv;
+}

playground/src/pages/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>
 <template>
-  <!-- <router-link to="/shapes">Shapes</router-link> -->
-  <TheEvents />
+  <router-link to="/shapes">Shapes</router-link>
+  <Suspense>
+    <PortalJourney />
+  </Suspense>
 </template>

playground/src/pages/shapes.vue

@@ -15,7 +15,6 @@ import {
   Dodecahedron,
   Circle,
   Cone,
-  OrbitControls,
 } from '@tresjs/cientos'
 
 const state = reactive({
@@ -86,8 +85,6 @@ const tubePath = new CubicBezierCurve3(
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
 
-    <OrbitControls />
-
     <TresAmbientLight :color="0xffffff" :intensity="1" />
     <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
     <Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>

playground/src/style.css

@@ -8,4 +8,4 @@ body {
 #app {
   height: 100%;
   width: 100%;
-}
+}

playground/vite.config.ts

@@ -3,28 +3,32 @@ import vue from '@vitejs/plugin-vue'
 import { resolve } from 'pathe'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-
+import glsl from 'vite-plugin-glsl'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue({
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+  plugins: [
+    glsl(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+        },
       },
-    },
-  }),
-  AutoImport({
-    dts: true,
-    eslintrc: {
-      enabled: true, // <-- this
-    },
-    imports: ['vue'],
-  }),
-  Components({ /* options */ }),],
+    }),
+    AutoImport({
+      dts: true,
+      eslintrc: {
+        enabled: true, // <-- this
+      },
+      imports: ['vue'],
+    }),
+    Components({
+      /* options */
+    }),
+  ],
   resolve: {
     alias: {
       '/@': resolve(__dirname, '../src'),
-      
     },
     dedupe: ['@tresjs/core', 'three'],
   },

pnpm-lock.yaml

@@ -51,7 +51,7 @@ importers:
       '@release-it/conventional-changelog': 5.1.1_release-it@15.9.1
       '@stackblitz/sdk': 1.8.2
       '@tresjs/cientos': 2.0.0-alpha.5_three@0.150.1
-      '@types/three': 0.149.0
+      '@types/three': 0.150.0
       '@typescript-eslint/eslint-plugin': 5.56.0_cnkxirszkzb4o6ts7gbclno24e
       '@typescript-eslint/parser': 5.56.0_eslint@8.36.0
       '@vitejs/plugin-vue': 4.0.0_vite@4.1.4
@@ -1235,12 +1235,25 @@ packages:
     resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
     dev: true
 
+  /@types/stats.js/0.17.0:
+    resolution: {integrity: sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==}
+    dev: true
+
   /@types/three/0.149.0:
     resolution: {integrity: sha512-fgNBm9LWc65ER/W0cvoXdC0iMy7Ke9e2CONmEr6Jt8sDSY3sw4DgOubZfmdZ747dkPhbQrgRQAWwDEr2S/7IEg==}
     dependencies:
       '@types/webxr': 0.5.1
     dev: true
 
+  /@types/three/0.150.0:
+    resolution: {integrity: sha512-AGhnz/pfV9lajfPMrzRyP/nySpZYfpoXdayGk0Tiwkzc6hsWOCkz/Q696Muxn9HV2EkQJ3u8g/dDt7jcP5Tecg==}
+    dependencies:
+      '@types/stats.js': 0.17.0
+      '@types/webxr': 0.5.1
+      fflate: 0.6.10
+      lil-gui: 0.17.0
+    dev: true
+
   /@types/web-bluetooth/0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
@@ -4504,6 +4517,10 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /lil-gui/0.17.0:
+    resolution: {integrity: sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==}
+    dev: true
+
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true

src/composables/useTexture/index.ts

@@ -79,7 +79,8 @@ export async function useTexture(
       return textures[0]
     }
   } else {
-    const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap } = paths as { [key: string]: string }
+    const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap
+     } = paths as { [key: string]: string }
     return {
       map: map ? await loadTexture(map) : null,
       displacementMap: displacementMap ? await loadTexture(displacementMap) : null,
@@ -87,6 +88,8 @@ export async function useTexture(
       roughnessMap: roughnessMap ? await loadTexture(roughnessMap) : null,
       metalnessMap: metalnessMap ? await loadTexture(metalnessMap) : null,
       aoMap: aoMap ? await loadTexture(aoMap) : null,
+      alphaMap: alphaMap ? await loadTexture(alphaMap) : null,
+      matcap: matcap ? await loadTexture(matcap) : null,
     }
   }
 }

src/core/nodeOps.ts

@@ -119,7 +119,6 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
   },
   patchProp(node, prop, _prevValue, nextValue) {
     if (node) {
-      
       let root = node
       let key = prop
       const camelKey = kebabToCamel(key)
@@ -129,13 +128,12 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
         node.parent = scene as TresObject
       }
 
-      if(root.type === 'BufferGeometry') {
-        const chain = key.split('-')
-        key = chain.pop() as string
+      if (root.type === 'BufferGeometry') {
         root.setAttribute(
-          kebabToCamel(key), 
-          new BufferAttribute(...(nextValue as ConstructorParameters<typeof BufferAttribute>))
+          kebabToCamel(key),
+          new BufferAttribute(...(nextValue as ConstructorParameters<typeof BufferAttribute>)),
         )
+        return
       }
 
       // Traverse pierced props (e.g. foo-bar=value => foo.bar = value)