feat: removed playground

apps/playground/.gitignore

@@ -1,20 +0,0 @@
-# build output
-dist/
-.output/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store

apps/playground/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

apps/playground/.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

apps/playground/README.md

@@ -1,50 +0,0 @@
-# Welcome to [Astro](https://astro.build)
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
-
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                | Action                                             |
-| :--------------------- | :------------------------------------------------- |
-| `npm install`          | Installs dependencies                              |
-| `npm run dev`          | Starts local dev server at `localhost:3000`        |
-| `npm run build`        | Build your production site to `./dist/`            |
-| `npm run preview`      | Preview your build locally, before deploying       |
-| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
-| `npm run astro --help` | Get help using the Astro CLI                       |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

apps/playground/astro.config.mjs

@@ -1,69 +0,0 @@
-import { defineConfig } from 'astro/config'
-import glsl from 'vite-plugin-glsl'
-import UnoCSS from 'unocss/astro'
-import {
-  presetAttributify,
-  presetIcons,
-  presetTypography,
-  presetUno,
-  presetWebFonts,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
-import presetDaisy from 'unocss-preset-daisy'
-// https://astro.build/config
-import vue from '@astrojs/vue'
-
-// https://astro.build/config
-import mdx from '@astrojs/mdx'
-import svgLoader from 'vite-svg-loader'
-
-// https://astro.build/config
-export default defineConfig({
-  vite: {
-    ssr: {
-      noExternal: ['@kidonng/daisyui'],
-    },
-    plugins: [glsl(), svgLoader()],
-  },
-  integrations: [
-    vue({
-      appEntrypoint: '/src/pages/_app',
-    }),
-    UnoCSS({
-      presets: [
-        presetUno(),
-        presetAttributify(),
-        presetIcons({
-          scale: 1.2,
-          warn: true,
-          extraProperties: {
-            display: 'inline-block',
-            'vertical-align': 'middle',
-            // ...
-          },
-        }),
-        presetTypography({
-          cssExtend: {
-            blockquote: {
-              padding: '1rem',
-              'border-left': `8px solid #888 !important`,
-              background: '#e8e8e8',
-            },
-          },
-        }),
-        presetWebFonts({
-          fonts: {
-            sans: 'DM Sans',
-            serif: 'DM Serif Display',
-            mono: 'DM Mono',
-          },
-        }),
-        presetDaisy(),
-      ],
-      transformers: [transformerDirectives(), transformerVariantGroup()],
-      safelist: 'prose prose-sm m-auto text-left'.split(' '),
-    }),
-    mdx(),
-  ],
-})

apps/playground/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "@tresjs/playground",
-  "description": "Playground for TresJS and R3F",
-  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
-  "type": "module",
-  "version": "1.0.0",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "3d",
-    "threejs",
-    "three",
-    "threejs-vue"
-  ],
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/mdx": "^0.16.0",
-    "@astrojs/vue": "^2.0.1",
-    "astro": "^2.0.6",
-    "astro-seo": "^0.7.0",
-    "vue": "^3.2.47"
-  },
-  "devDependencies": {
-    "@iconify-json/carbon": "^1.1.14",
-    "@iconify-json/logos": "^1.1.22",
-    "@kidonng/daisyui": "^2.31.0",
-    "@tresjs/cientos": "workspace:^1.6.0",
-    "@tresjs/core": "workspace:^1.6.3",
-    "three": "^0.149.0",
-    "unocss": "^0.49.4",
-    "unocss-preset-daisy": "^1.2.0",
-    "vite-plugin-glsl": "^1.1.2"
-  }
-}

apps/playground/public/logo-dark.svg

@@ -1,5 +0,0 @@
-<svg width="44" height="10" viewBox="0 0 44 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.14255 1.42916C5.53095 0.781817 6.46913 0.781816 6.85753 1.42915L11.0913 8.4855C11.4913 9.15203 11.0111 10 10.2338 10H1.76623C0.988935 10 0.508822 9.15203 0.908736 8.4855L5.14255 1.42916Z" fill="#82DBC5"/>
-<rect x="19" y="1" width="9" height="9" rx="1" fill="#f2f2f2"/>
-<circle cx="39.5" cy="5.5" r="4.5" fill="#EFAC35"/>
-</svg>

apps/playground/public/logo.svg

@@ -1,5 +0,0 @@
-<svg width="44" height="10" viewBox="0 0 44 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.14255 1.42916C5.53095 0.781817 6.46913 0.781816 6.85753 1.42915L11.0913 8.4855C11.4913 9.15203 11.0111 10 10.2338 10H1.76623C0.988935 10 0.508822 9.15203 0.908736 8.4855L5.14255 1.42916Z" fill="#82DBC5"/>
-<rect x="19" y="1" width="9" height="9" rx="1" fill="#4F4F4F"/>
-<circle cx="39.5" cy="5.5" r="4.5" fill="#EFAC35"/>
-</svg>

apps/playground/src/assets/second-row.svg

@@ -1,128 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="107" height="1293" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e06443884b22">
-    <g id="square">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644388c4e0">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e06443897ed5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e0644389ad4a">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e0644389ad4a" d="M100 1204a4 4 0 0 0-4.001-4H11.001A4 4 0 0 0 7 1204v85a4 4 0 0 0 4.001 4h84.998a4 4 0 0 0 4.001-4v-85Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="lightning">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438a6859">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438a6859" d="m59.794 1050.84-26.61 48.82a1.49 1.49 0 0 0 .045 1.51c.142.23.342.42.582.55.24.13.511.2.786.2h12.316c.233 0 .464.05.675.14.212.1.4.24.55.41.305.34.435.81.351 1.26l-6.771 37.46c-.049.27-.022.55.078.8.099.26.269.49.49.66.455.36 1.062.45 1.601.24.346-.14.634-.39.812-.7l29.11-51.73c.382-.69.175-1.55-.477-1.99l-.64-.46a1.725 1.725 0 0 0-.96-.29l-13.198.27c-.235 0-.47-.05-.684-.14a1.46 1.46 0 0 1-.558-.41 1.488 1.488 0 0 1-.357-1.27l6.222-34.04c.048-.26.025-.53-.067-.79-.093-.25-.25-.47-.455-.65l-.356-.3a1.86 1.86 0 0 0-.634-.34 1.764 1.764 0 0 0-.723-.03c-.24.05-.467.14-.662.29a1.55 1.55 0 0 0-.466.53Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="wheel">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438a685b">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438aa039">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438b75df">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438b75df" d="m5.774 941.685 9.784.482a38.556 38.556 0 0 1 4.863-14.948 38.22 38.22 0 0 1 10.41-11.717l-5.345-8.278c-1.289-2.311-.621-5.247 1.766-6.594 2.385-1.3 5.201-.53 6.538 1.78l4.438 8.76a38.38 38.38 0 0 1 30.545 0l4.439-8.76c1.335-2.31 4.151-3.08 6.538-1.78 2.386 1.347 3.054 4.283 1.766 6.594l-5.345 8.278a38.204 38.204 0 0 1 10.409 11.717 38.54 38.54 0 0 1 4.863 14.948l9.783-.482c1.266 0 2.48.507 3.376 1.41a4.842 4.842 0 0 1 0 6.807 4.754 4.754 0 0 1-3.376 1.41l-9.783-.482a38.522 38.522 0 0 1-4.863 14.948 38.267 38.267 0 0 1-10.409 11.721l5.345 8.27c1.288 2.311.62 5.251-1.766 6.601-2.387 1.3-5.203.53-6.538-1.78l-4.439-8.761a38.41 38.41 0 0 1-15.273 3.17 38.409 38.409 0 0 1-15.272-3.17l-4.438 8.761c-1.337 2.31-4.153 3.08-6.538 1.78-2.387-1.35-3.055-4.29-1.766-6.601l5.345-8.27a38.259 38.259 0 0 1-10.41-11.721 38.54 38.54 0 0 1-4.863-14.948l-9.784.482a4.752 4.752 0 0 1-3.375-1.41 4.84 4.84 0 0 1 0-6.807 4.752 4.752 0 0 1 3.375-1.41Zm33.742 1.685c.622-2.936 2.196-5.535 4.44-7.509l-7.923-12.225a28.895 28.895 0 0 0-10.929 19.012l14.412.722ZM53.5 932.059c1.528 0 2.96.241 4.296.674l6.586-12.947A28.138 28.138 0 0 0 53.5 917.62c-3.866 0-7.541.77-10.881 2.166l6.586 12.947a13.86 13.86 0 0 1 4.295-.674Zm13.984 11.311 14.413-.722a28.891 28.891 0 0 0-10.929-19.012l-7.922 12.225c2.243 1.974 3.818 4.573 4.438 7.509Zm0 6.257c-.62 2.936-2.195 5.535-4.438 7.509l7.922 12.225a28.891 28.891 0 0 0 10.929-19.012l-14.413-.722ZM53.5 960.938a14.39 14.39 0 0 1-4.342-.674l-6.539 12.944a28.06 28.06 0 0 0 10.881 2.17c3.866 0 7.541-.77 10.882-2.17l-6.539-12.944a14.386 14.386 0 0 1-4.343.674Zm-13.984-11.311-14.412.722c1.05 7.701 5.058 14.487 10.929 19.012l7.923-12.225c-2.244-1.974-3.818-4.573-4.44-7.509Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="umbrella">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac38">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac39">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac3a">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438c0cc1">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438c0cc1" d="M86.379 766.938A46.14 46.14 0 0 0 58.08 753.54a1.686 1.686 0 0 1-1.429-1.167 3.28 3.28 0 0 0-6.302 0 1.68 1.68 0 0 1-1.429 1.167C25.166 755.891 7.049 775.848 7 799.72a3.4 3.4 0 0 0 1.504 2.879 3.317 3.317 0 0 0 4.166-.431c4.201-4.202 11.01-4.208 15.218-.013a3.312 3.312 0 0 0 4.692.031 12.99 12.99 0 0 1 16.916-1.218c.429.323.682.83.683 1.368v30.603c0 1.786-1.371 3.322-3.154 3.414a3.305 3.305 0 0 1-1.321-.203 3.31 3.31 0 0 1-1.899-1.805 3.33 3.33 0 0 1-.269-1.31 3.324 3.324 0 0 0-3.382-3.321c-1.868.033-3.3 1.683-3.259 3.549A9.978 9.978 0 0 0 46.728 843c5.581.07 10.093-4.553 10.093-10.133v-30.531c0-.538.253-1.045.684-1.368a12.991 12.991 0 0 1 16.897 1.2 3.323 3.323 0 0 0 4.695 0c4.208-4.204 11.025-4.204 15.233 0a3.322 3.322 0 0 0 4.056.5 3.41 3.41 0 0 0 1.614-2.95 46.207 46.207 0 0 0-13.621-32.78Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="zombie">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f12">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f13">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438cadb5">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438cadb5" d="M53.5 693c25.681 0 46.5-20.819 46.5-46.5S79.181 600 53.5 600 7 620.819 7 646.5 27.819 693 53.5 693Zm8.618-24.344a4 4 0 0 1-4 4h-9.235a4 4 0 0 1-4-4v-6.185h.035a8.618 8.618 0 0 1 17.164 0h.036v6.185Zm3.006-26.657a4.5 4.5 0 0 1 4.501-4.5h9.599a4.5 4.5 0 1 1 0 9.001h-9.599a4.5 4.5 0 0 1-4.501-4.501Zm-32.259 8.57a8.428 8.428 0 1 0 0-16.857 8.428 8.428 0 0 0 0 16.857Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="cross">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13d">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13e">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce140">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438ce140" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb1">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb2">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb3">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb3" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb4">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb5">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb6">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475e">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475f">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d475f" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d4760">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3d">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3e">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac3e" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac40">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac41">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="skull">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a4">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc0">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e1fc0" d="M81.4 374.401v13.949a4.651 4.651 0 0 1-4.65 4.65h-46.5a4.651 4.651 0 0 1-4.65-4.65v-13.949H11.65A4.651 4.651 0 0 1 7 369.75V346.5C7 320.819 27.818 300 53.5 300s46.5 20.819 46.5 46.5v23.25a4.652 4.652 0 0 1-4.65 4.651H81.4ZM32.575 355.8a6.966 6.966 0 0 0 4.932-2.043 6.972 6.972 0 0 0 0-9.863 6.972 6.972 0 0 0-4.932-2.044 6.976 6.976 0 0 0 0 13.95Zm41.85 0a6.983 6.983 0 0 0 6.445-4.305 6.983 6.983 0 0 0-1.513-7.601 6.975 6.975 0 1 0-4.932 11.906Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="triangle">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc2">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc3">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e5256">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e5256" d="M50.085 151.938c1.547-2.584 5.283-2.584 6.83 0l21.644 36.148 26.867 44.87c1.593 2.66-.319 6.044-3.415 6.044H4.989c-3.096 0-5.008-3.384-3.415-6.044l48.511-81.018Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="robot">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808a">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808b">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ec86f">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438ec86f" d="M11.001 0A4 4 0 0 0 7 4.001v84.998A4 4 0 0 0 11.001 93h84.998A4 4 0 0 0 100 88.999V4.001A4 4 0 0 0 95.999 0H11.001Zm14.53 71.63a4 4 0 0 0 0 8.001H82.05a4 4 0 0 0 0-8.001H25.531ZM41.293 46.5c0 5.457-4.423 9.881-9.881 9.881-5.457 0-9.881-4.424-9.881-9.881 0-5.458 4.424-9.881 9.881-9.881a9.88 9.88 0 0 1 9.881 9.881Zm34.876 9.881c5.457 0 9.881-4.424 9.881-9.881 0-5.458-4.424-9.881-9.881-9.881a9.88 9.88 0 0 0-9.881 9.881c0 5.457 4.423 9.881 9.881 9.881Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

apps/playground/src/assets/third-row.svg

@@ -1,80 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-cecb00c8-e6c7-8042-8001-e0554a46bb12" width="105.468" height="1892.988" fill="none" style="-webkit-print-color-adjust:exact" version="1.1">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e0554a46bb12" style="fill:#000">
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48036c">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a48036c" cx="52.734" cy="1846.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17794">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17795">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17795" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17795" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17796">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17796" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17796" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567f9fe93c">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567f9fe93c" d="M90.993 1544.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567b140126">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567b140126" fill-rule="evenodd" d="m52.734 1438.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562 0-14.891 11.662-26.504 26.504-26.504 8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74c">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74d">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74d" d="M17.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74e" d="M78.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74f">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74f" fill-rule="evenodd" d="M26.075 1208c-9.301 0-16.841 7.54-16.841 16.841v66.417a3.743 3.743 0 0 0 3.743 3.742h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab2" clip-path="url(#01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90)" style="fill:#000">
-      <defs>
-        <clipPath id="01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90" class="svg-def" transform="translate(-4.859 -50.74)">
-          <path fill="#fff" d="M11.1 1100.74h92.987v92.987H11.1z"/>
-        </clipPath>
-      </defs>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4b502b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4b502b" d="M85.61 1066.94a46.111 46.111 0 0 0-28.297-13.39 1.795 1.795 0 0 1-.889-.37 1.716 1.716 0 0 1-.539-.8 3.316 3.316 0 0 0-1.178-1.72 3.335 3.335 0 0 0-1.973-.66c-.712 0-1.404.24-1.973.66a3.316 3.316 0 0 0-1.178 1.72c-.098.31-.286.59-.539.8-.254.2-.563.33-.889.37a46.47 46.47 0 0 0-29.846 15.01 46.51 46.51 0 0 0-12.069 31.16 3.423 3.423 0 0 0 1.503 2.88c.639.41 1.401.6 2.16.52a3.375 3.375 0 0 0 2.006-.95 10.755 10.755 0 0 1 7.606-3.16c2.852 0 5.589 1.13 7.61 3.14.306.31.669.56 1.071.73.401.17.832.26 1.268.26.436.01.868-.08 1.272-.24.403-.17.771-.41 1.08-.72a13.053 13.053 0 0 1 8.231-3.75c3.104-.22 6.185.68 8.683 2.54.212.15.384.36.503.6.118.24.18.5.18.76v30.6c0 1.79-1.37 3.32-3.153 3.41-.449.03-.899-.04-1.321-.2-.423-.15-.809-.4-1.135-.71a3.34 3.34 0 0 1-.764-1.09 3.356 3.356 0 0 1-.269-1.31c0-.44-.088-.88-.258-1.29-.171-.4-.421-.77-.736-1.08a3.27 3.27 0 0 0-2.387-.95c-1.868.03-3.3 1.68-3.259 3.55a9.963 9.963 0 0 0 2.954 6.84 9.977 9.977 0 0 0 6.878 2.89c5.58.07 10.092-4.55 10.092-10.13v-30.53c0-.26.062-.52.18-.76.119-.24.291-.45.503-.6a12.964 12.964 0 0 1 16.895 1.2 3.33 3.33 0 0 0 4.695 0 10.778 10.778 0 0 1 7.616-3.16c2.856 0 5.595 1.14 7.615 3.16a3.33 3.33 0 0 0 1.942.94c.735.09 1.479-.06 2.114-.44.501-.31.913-.75 1.196-1.27.282-.51.426-1.1.417-1.68a46.206 46.206 0 0 0-13.618-32.78Z" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea14">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea14" d="M90.993 944.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab1">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4aeab1" fill-rule="evenodd" d="m52.734 838.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562C4.545 761.613 16.207 750 31.049 750c8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055d85aedd9">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4555">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4555" d="M17.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4ab72e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4ab72e" d="M78.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4554">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4554" fill-rule="evenodd" d="M26.075 608c-9.301 0-16.841 7.54-16.841 16.841v66.417A3.743 3.743 0 0 0 12.977 695h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a49a0ca">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a49a0ca" fill-rule="evenodd" d="M49.304 451.942c1.554-2.589 5.307-2.589 6.86 0l48.729 81.213c1.599 2.666-.321 6.058-3.43 6.058H4.006c-3.109 0-5.029-3.392-3.43-6.058l48.728-81.213Zm12.147 40.777a8.718 8.718 0 1 1-17.435 0 8.718 8.718 0 0 1 17.435 0Zm-22.084 21.76a2 2 0 0 1 2-2H63.52a2 2 0 0 1 2 2v8.205c0 .258-.049.504-.138.731.091.414.138.838.138 1.269 0 4.815-5.855 8.718-13.077 8.718-7.222 0-13.076-3.903-13.076-8.718 0-.431.047-.855.137-1.27a2.007 2.007 0 0 1-.137-.73v-8.205Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055877aa3c7">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a492a2b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a492a2b" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a492a2b" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a497e94">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a497e94" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a497e94" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48e83e">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a48e83e" d="m59.02 150.843-26.578 48.806a1.502 1.502 0 0 0 .045 1.516c.142.228.343.416.582.547.239.131.51.2.785.2h12.3c.233 0 .464.049.675.144.212.095.399.234.549.406.15.172.259.375.32.592.061.218.071.445.031.667l-6.763 37.459a1.49 1.49 0 0 0 .078.806c.099.257.268.484.489.657a1.634 1.634 0 0 0 1.599.235c.346-.134.633-.381.811-.698l29.074-51.727c.186-.331.241-.717.153-1.084a1.547 1.547 0 0 0-.629-.911l-.639-.454a1.661 1.661 0 0 0-.959-.287l-13.182.263a1.668 1.668 0 0 1-.683-.137 1.597 1.597 0 0 1-.557-.406 1.492 1.492 0 0 1-.357-1.27l6.214-34.037a1.488 1.488 0 0 0-.066-.782 1.55 1.55 0 0 0-.455-.651l-.355-.308a1.646 1.646 0 0 0-2.017-.08 1.558 1.558 0 0 0-.465.534Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea15">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea15" cx="52.734" cy="46.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-  </g>
-</svg>

apps/playground/src/assets/triangle.svg

@@ -1,3 +0,0 @@
-<svg width="112" height="93" viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M52.5737 5.69079C54.1285 3.10866 57.8722 3.10866 59.4271 5.6908L108.349 86.9366C109.955 89.6026 108.035 93 104.923 93H7.07816C3.96616 93 2.04612 89.6026 3.65144 86.9366L52.5737 5.69079Z" fill="#82DBC5"/>
-</svg>

apps/playground/src/components/BasicAnimations.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ShallowRef, shallowRef } from 'vue'
-
-import { useRenderLoop, TresInstance } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta, elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += delta
-    boxRef.value.rotation.z = elapsed * 0.2
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-    window-size
-    power-preference="high-performance"
-    physically-correct-lights
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[1, 2, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh ref="boxRef" :scale="1" cast-shadow>
-        <TresBoxGeometry :args="[1, 1, 1]" />
-        <TresMeshNormalMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/EnvironmentTweaks.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import {
-  sRGBEncoding,
-  LinearEncoding,
-  BasicShadowMap,
-  PCFShadowMap,
-  PCFSoftShadowMap,
-  VSMShadowMap,
-  NoToneMapping,
-  LinearToneMapping,
-  ReinhardToneMapping,
-  CineonToneMapping,
-  ACESFilmicToneMapping,
-  CustomToneMapping,
-} from 'three'
-import { reactive, ref } from 'vue'
-import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-const sphereRef = ref()
-
-const { pane } = useTweakPane()
-
-pane.addInput(state, 'clearColor', {
-  label: 'Background Color',
-  colorMode: 'hex',
-})
-pane.addInput(state, 'shadows', {
-  label: 'Shadows',
-})
-pane.addInput(state, 'physicallyCorrectLights', {
-  label: 'physicallyCorrectLights',
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'outputEncoding',
-    options: [
-      { text: 'sRGBEncoding', value: sRGBEncoding },
-      { text: 'LinearEncoding', value: LinearEncoding },
-    ],
-    value: sRGBEncoding,
-  })
-  .on('change', ev => {
-    state.outputEncoding = ev.value
-  })
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'ShadowMap Type',
-    options: [
-      { text: 'BasicShadowMap', value: BasicShadowMap },
-      { text: 'PCFShadowMap', value: PCFShadowMap },
-      { text: 'PCFSoftShadowMap', value: PCFSoftShadowMap },
-      { text: 'VSMShadowMap', value: VSMShadowMap },
-    ],
-    value: BasicShadowMap,
-  })
-  .on('change', ev => {
-    state.shadowMapType = ev.value
-  })
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'toneMapping',
-    options: [
-      { text: 'NoToneMapping', value: NoToneMapping },
-      { text: 'LinearToneMapping', value: LinearToneMapping },
-      { text: 'ReinhardToneMapping', value: ReinhardToneMapping },
-      { text: 'CineonToneMapping', value: CineonToneMapping },
-      { text: 'ACESFilmicToneMapping', value: ACESFilmicToneMapping },
-      { text: 'CustomToneMapping', value: CustomToneMapping },
-    ],
-    value: NoToneMapping,
-  })
-  .on('change', ev => {
-    console.log(ev.value)
-    state.toneMapping = ev.value
-  })
-</script>
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <OrbitControls make-default />
-    <TresScene>
-      <TresAmbientLight :intensity="0.5" />
-      <TransformControls mode="scale" :object="sphereRef" />
-
-      <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
-        <TresConeGeometry :args="[1, 1.5, 3]" />
-        <TresMeshToonMaterial color="#82DBC5" />
-      </TresMesh>
-      <TresMesh :position="[0, 4, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#4F4F4F" />
-      </TresMesh>
-      <TresMesh :position="[2, 2, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/Events.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
-import { reactive } from 'vue'
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#201919',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-function onClick(ev) {
-  if (ev) {
-    ev.object.material.color.set('#008080')
-  }
-}
-
-function onPointerEnter(ev) {
-  console.log(ev)
-  if (ev) {
-    ev.object.material.color.set('#CCFF03')
-  }
-}
-
-function onPointerLeave(ev) {
-  if (ev) {
-    /*  ev.object.material.color.set('#efefef') */
-  }
-}
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <OrbitControls />
-    <TresScene>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
-      <template v-for="x in [-2.5, 0, 2.5]">
-        <template v-for="y in [-2.5, 0, 2.5]">
-          <TresMesh
-            v-for="z in [-2.5, 0, 2.5]"
-            :key="[x, y, z]"
-            :position="[x, y, z]"
-            @click="onClick"
-            @pointer-enter="onPointerEnter"
-            @pointer-leave="onPointerLeave"
-          >
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshToonMaterial color="#efefef" />
-          </TresMesh>
-        </template>
-      </template>
-      <TresAmbientLight :intensity="0.5" />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/ExperimentInfo.vue

@@ -1,3 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>Awiwi</template>

apps/playground/src/components/GLTFModel.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { sRGBEncoding } from 'three'
-
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas clear-color="#82DBC5" shadows alpha window-size :output-encoding="sRGBEncoding">
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :near="0.1" :far="1000" />
-      <TresScene :fog="'#82DBC5'">
-        <TresAmbientLight :color="0xffffff" :intensity="0.25" />
-        <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-        <GLTFModel path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf" draco />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>

apps/playground/src/components/Header.astro

@@ -1,28 +0,0 @@
----
-import Logo from '/logo.svg'
-
-export interface Props {
-  title: string
-  visible: boolean
-}
-
-const { visible = false, title } = Astro.props
----
-
-<header class={`fixed top-0 z-10 w-full bg-base-100 bg-opacity-60 py-4 ${visible ? 'visible' : 'hidden'}`}>
-  <div class="px-4 sm:px-0 container mx-auto flex justify-between">
-    <div class="flex">
-      <img src={Logo} class="mr-8" />
-      <a class="font-bold" href="/" title="Home">{title}</a>
-    </div>
-    <ul class="flex">
-      <a href="https://tresjs.org/" target="_blank" class="i-carbon-document"></a>
-    </ul>
-  </div>
-</header>
-
-<style scoped>
-  header {
-    backdrop-filter: blur(10px);
-  }
-</style>

apps/playground/src/components/LoveVueThreeJS.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-///<reference types="vite-svg-loader" />
-import Triangle from '../assets/triangle.svg'
-import SecondRow from '../assets/second-row.svg'
-import ThirdRow from '../assets/third-row.svg'
-import gsap from 'gsap'
-import { onMounted, ref } from 'vue'
-
-const triangleRef = ref()
-const secondRowRef = ref()
-const thirdRowRef = ref()
-
-const tl2r = gsap.timeline()
-const tl3r = gsap.timeline()
-
-const heightOfSignleSvg = 150
-
-async function restartAnimation() {
-  gsap.to(secondRowRef.value.$el, {
-    duration: 1,
-    y: 0,
-    ease: 'elastic.out(0.7, 0.2)',
-  })
-  await gsap.to(thirdRowRef.value.$el, {
-    delay: 0.65,
-    duration: 1,
-    y: 0,
-    ease: 'steps(4)',
-  })
-
-  tl2r.restart()
-  tl3r.restart()
-}
-
-onMounted(() => {
-  tl2r.to(secondRowRef.value.$el, {
-    delay: 1,
-    duration: 2,
-    y: -(8 * heightOfSignleSvg),
-    ease: 'elastic.easeOut',
-  })
-  tl3r.to(thirdRowRef.value.$el, {
-    delay: 1.25,
-    duration: 2,
-    y: -(12 * heightOfSignleSvg),
-    ease: 'power1.out',
-  })
-})
-</script>
-
-<template>
-  <div class="absolute inset-0">
-    <div
-      class="grid items-center w-1/2 mx-auto min-w-370px -translate-x-20px md:translate-x-20px h-full"
-      @click="restartAnimation"
-    >
-      <div class="grid grid-cols-3 gap-8 overflow-hidden h-93px">
-        <Triangle ref="triangleRef" />
-        <SecondRow ref="secondRowRef" />
-        <ThirdRow ref="thirdRowRef" />
-      </div>
-    </div>
-  </div>
-</template>

apps/playground/src/components/Materials.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls, Plane, useTweakPane } from '@tresjs/cientos'
-import {
-  BasicShadowMap,
-  Color,
-  CubeTextureLoader,
-  MeshBasicMaterial,
-  MeshLambertMaterial,
-  MeshMatcapMaterial,
-  MeshNormalMaterial,
-  MeshPhongMaterial,
-  MeshPhysicalMaterial,
-  MeshStandardMaterial,
-  MeshToonMaterial,
-  NoToneMapping,
-  sRGBEncoding,
-} from 'three'
-import { shallowReactive, shallowRef } from 'vue'
-
-const { pane } = useTweakPane()
-const state = shallowReactive({
-  clearColor: '#4f4f4f',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-const cubeTextureLoader = new CubeTextureLoader()
-
-const environmentMap = cubeTextureLoader.load([
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/px.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nx.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/py.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/ny.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/pz.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nz.jpg',
-])
-
-const materialState = shallowReactive({
-  color: '#008080',
-  metalness: 0.5,
-  wireframe: false,
-})
-
-const sphereRef = shallowRef()
-pane
-  .addInput(materialState, 'color', {
-    label: 'Color',
-  })
-  .on('change', (ev: any) => {
-    sphereRef.value.material.color = new Color(ev.value)
-  })
-
-pane
-  .addInput(materialState, 'wireframe', {
-    label: 'Wireframe',
-  })
-  .on('change', (ev: any) => {
-    sphereRef.value.material.wireframe = ev.value
-  })
-
-const materialProps = ['metalness', 'roughness']
-
-materialProps.forEach(element => {
-  pane
-    .addBlade({
-      view: 'slider',
-      label: element,
-      min: 0,
-      max: 1,
-      value: 0.5,
-    })
-    .on('change', (ev: any) => {
-      materialState[element] = ev.value
-      sphereRef.value.material[element] = ev.value
-    })
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'Materials',
-    options: [
-      { text: 'MeshBasicMaterial', value: MeshBasicMaterial },
-      { text: 'MeshToonMaterial', value: MeshToonMaterial },
-      /*    { text: 'MeshDepthMaterial', value: MeshDepthMaterial },
-      { text: 'MeshDistanceMaterial', value: MeshDistanceMaterial }, */
-      { text: 'MeshLambertMaterial', value: MeshLambertMaterial },
-      { text: 'MeshMatcapMaterial', value: MeshMatcapMaterial },
-      { text: 'MeshNormalMaterial', value: MeshNormalMaterial },
-      { text: 'MeshPhongMaterial', value: MeshPhongMaterial },
-      { text: 'MeshPhysicalMaterial', value: MeshPhysicalMaterial },
-      { text: 'MeshStandardMaterial', value: MeshStandardMaterial },
-    ],
-    value: MeshToonMaterial,
-  })
-  .on('change', ev => {
-    sphereRef.value.material = new ev.value(materialState)
-
-    if (ev.value === MeshStandardMaterial || ev.value === MeshPhysicalMaterial) {
-      sphereRef.value.material.envMap = environmentMap
-    }
-  })
-</script>
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[3, 3, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <OrbitControls />
-    <TresScene>
-      <TresMesh ref="sphereRef" :position="[0, 1, 0]" cast-shadow recieve-shadow>
-        <TresSphereGeometry :args="[1, 32, 32]" />
-        <TresMeshToonMaterial :color="materialState.color" />
-      </TresMesh>
-      <Plane :args="[10, 10]" recieve-shadow>
-        <TresMeshToonMaterial color="#222" />
-      </Plane>
-      <TresDirectionalLight :position="[-3, 4, 4]" :intensity="2" cast-shadow />
-      <TresDirectionalLight :position="[3, 4, 0]" :intensity="0.5" cast-shadow />
-
-      <TresAmbientLight :intensity="1" />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/SuspenseWrapper.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  component: any
-}>()
-
-/* import Textures from './Textures.vue' */
-</script>
-<template>
-  <pre>{{ component }}.</pre>
-  <Suspense>
-    <component :is="component.__name" />
-  </Suspense>
-</template>

apps/playground/src/components/Textures.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { Ref, ref } from 'vue'
-
-import { useTexture, useRenderLoop } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import { TresInstance } from '@tresjs/core/dist/types'
-
-const pbrTexture = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const sphereRef: Ref<TresInstance | null> = ref(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta }) => {
-  // I will run at every frame ~ 60FPS (depending of your monitor)
-  if (sphereRef.value) {
-    sphereRef.value.rotation.y = delta
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-    window-size
-    power-preference="high-performance"
-    preserve-drawing-buffer
-    physically-correct-lights
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[1, 2, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh ref="sphereRef" :scale="1" cast-shadow>
-        <TresSphereGeometry :args="[1, 100, 100]" />
-        <TresMeshStandardMaterial v-bind="pbrTexture" displacement-scale="0.2" />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/TheExperience.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import {
-  sRGBEncoding,
-  LinearEncoding,
-  BasicShadowMap,
-  PCFShadowMap,
-  PCFSoftShadowMap,
-  VSMShadowMap,
-  NoToneMapping,
-  LinearToneMapping,
-  ReinhardToneMapping,
-  CineonToneMapping,
-  ACESFilmicToneMapping,
-  CustomToneMapping,
-} from 'three'
-import { reactive, ref } from 'vue'
-import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-const sphereRef = ref()
-
-const { pane } = useTweakPane()
-
-pane.addInput(state, 'clearColor', {
-  label: 'Background Color',
-  colorMode: 'hex',
-})
-pane.addInput(state, 'shadows', {
-  label: 'Shadows',
-})
-pane.addInput(state, 'physicallyCorrectLights', {
-  label: 'physicallyCorrectLights',
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'outputEncoding',
-    options: [
-      { text: 'sRGBEncoding', value: sRGBEncoding },
-      { text: 'LinearEncoding', value: LinearEncoding },
-    ],
-    value: sRGBEncoding,
-  })
-  .on('change', ev => {
-    state.outputEncoding = ev.value
-  })
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'ShadowMap Type',
-    options: [
-      { text: 'BasicShadowMap', value: BasicShadowMap },
-      { text: 'PCFShadowMap', value: PCFShadowMap },
-      { text: 'PCFSoftShadowMap', value: PCFSoftShadowMap },
-      { text: 'VSMShadowMap', value: VSMShadowMap },
-    ],
-    value: BasicShadowMap,
-  })
-  .on('change', ev => {
-    state.shadowMapType = ev.value
-  })
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'toneMapping',
-    options: [
-      { text: 'NoToneMapping', value: NoToneMapping },
-      { text: 'LinearToneMapping', value: LinearToneMapping },
-      { text: 'ReinhardToneMapping', value: ReinhardToneMapping },
-      { text: 'CineonToneMapping', value: CineonToneMapping },
-      { text: 'ACESFilmicToneMapping', value: ACESFilmicToneMapping },
-      { text: 'CustomToneMapping', value: CustomToneMapping },
-    ],
-    value: NoToneMapping,
-  })
-  .on('change', ev => {
-    console.log(ev.value)
-    state.toneMapping = ev.value
-  })
-</script>
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <OrbitControls make-default />
-    <TresScene>
-      <TresAmbientLight :intensity="0.5" />
-
-      <TransformControls mode="scale" :object="sphereRef" />
-
-      <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <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]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/TransformControls.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { shallowRef, shallowReactive } from 'vue'
-import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
-
-import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
-
-const state = shallowReactive({
-  clearColor: '#201919',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-const transformState = shallowReactive({
-  mode: 'translate',
-  size: 1,
-  axis: 'XY',
-  showX: true,
-  showY: true,
-  showZ: true,
-})
-
-const boxRef = shallowRef()
-
-const { pane } = useTweakPane()
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'outputEncoding',
-    options: [
-      { text: 'Translate', value: 'translate' },
-      { text: 'Rotate', value: 'rotate' },
-      { text: 'Scale', value: 'scale' },
-    ],
-    value: transformState.mode,
-  })
-  .on('change', ev => {
-    transformState.mode = ev.value
-  })
-
-pane.addInput(transformState, 'size')
-
-const axisFolder = pane.addFolder({ title: 'Axis' })
-
-axisFolder
-  .addBlade({
-    view: 'list',
-    label: 'axis',
-    options: [
-      { text: 'X', value: 'X' },
-      { text: 'Y', value: 'Y' },
-      { text: 'XY', value: 'XY' },
-      { text: 'YZ', value: 'YZ' },
-      { text: 'XZ', value: 'XZ' },
-      { text: 'XYZ', value: 'XYZ' },
-    ],
-    value: transformState.axis,
-  })
-  .on('change', ev => {
-    transformState.axis = ev.value
-  })
-axisFolder.addInput(transformState, 'showX')
-axisFolder.addInput(transformState, 'showY')
-axisFolder.addInput(transformState, 'showZ')
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <OrbitControls make-default />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-
-    <TresScene>
-      <TransformControls :object="boxRef" v-bind="transformState" />
-      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresAmbientLight :intensity="0.5" />
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/TresBasic.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
-
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
-        <TresConeGeometry :args="[1, 1.5, 3]" />
-        <TresMeshToonMaterial color="#82DBC5" />
-      </TresMesh>
-      <TresMesh :position="[0, 0, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#4F4F4F" />
-      </TresMesh>
-      <TresMesh :position="[2, -2, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/TresDonut.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-
-const state = reactive({
-  shadows: true,
-  alpha: false,
-  clearColor: '#4f4f4f',
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[0, 0, 6]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh>
-        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-        <TresMeshBasicMaterial color="orange" />
-      </TresMesh>
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/ellie-thriller/Ellie.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useGLTF, useAnimations } from '@tresjs/cientos'
-
-const { scene: model, animations } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/tlou-ellie/ellie-thriller.gltf',
-)
-
-const { actions } = useAnimations(animations, model)
-
-let currentAction = actions.dance
-
-currentAction.play()
-</script>
-
-<template>
-  <TresMesh v-bind="model" :position="[0, -8, 0]" />
-</template>

apps/playground/src/components/ellie-thriller/TheExperience.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { sRGBEncoding } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
-
-import Ellie from './Ellie.vue'
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas
-      clear-color="black"
-      shadows
-      alpha
-      window-size
-      power-preference="high-performance"
-      :output-encoding="sRGBEncoding"
-    >
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[0, 1, 3]" :fov="75" :near="0.1" :far="1000" />
-      <TresScene>
-        <TresAmbientLight :color="0xffffff" :intensity="0.25" />
-        <Ellie />
-        <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>

apps/playground/src/components/lights/TheExperience.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import { shallowReactive, shallowRef, watch } from 'vue'
-import { useTexture } from '@tresjs/core'
-import { OrbitControls, Plane, GLTFModel, useTweakPane } from '@tresjs/cientos'
-import { TresInstance } from '@tresjs/core/dist/types'
-import { BasicShadowMap, Color, NoToneMapping, sRGBEncoding } from 'three'
-
-const state = shallowReactive({
-  clearColor: '#030303',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-const venomSnake = shallowRef<TresInstance>()
-const directionalLightRef = shallowRef<TresInstance>()
-const ambientLightRef = shallowRef<TresInstance>()
-const directionalLightHelperRef = shallowRef<TresInstance>()
-
-const ambientLightState = shallowReactive({
-  color: '#ffffff',
-  intensity: 0.25,
-  enabled: true,
-})
-
-const directionalLightState = shallowReactive({
-  color: '#ffffff',
-  intensity: 0.5,
-  position: [-8, 7, 2],
-  enabled: true,
-  helper: true,
-})
-
-watch(venomSnake, ({ getModel }) => {
-  const model = getModel()
-  model.scale.set(0.02, 0.02, 0.02)
-  model.position.set(0, 4, 0)
-
-  model.traverse(child => {
-    if (child.isMesh) {
-      child.castShadow = true
-      child.receiveShadow = true
-    }
-  })
-})
-
-watch(directionalLightRef, light => {
-  light.shadow.bias = -0.005
-})
-
-const pbrTexture = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const { pane } = useTweakPane()
-
-const rendererFolder = pane.addFolder({
-  title: 'Renderer',
-  expanded: true,
-})
-
-rendererFolder.addInput(state, 'physicallyCorrectLights', {
-  label: 'Physically Correct Lights',
-})
-
-const ambientLightFolder = pane.addFolder({
-  title: 'Ambient Light',
-  expanded: true,
-})
-
-ambientLightFolder
-  .addInput(ambientLightState, 'enabled', {
-    label: 'Enabled',
-  })
-  .on('change', ({ value }) => {
-    ambientLightRef.value.visible = value
-  })
-
-ambientLightFolder
-  .addInput(ambientLightState, 'intensity', {
-    label: 'Intensity',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    ambientLightRef.value.intensity = value
-  })
-
-ambientLightFolder
-  .addInput(ambientLightState, 'color', {
-    label: 'Color',
-  })
-  .on('change', ({ value }) => {
-    ambientLightRef.value.color = new Color(value)
-  })
-
-const directionalLightFolder = pane.addFolder({
-  title: 'Directional Light',
-  expanded: false,
-})
-
-directionalLightFolder
-  .addInput(directionalLightState, 'enabled', {
-    label: 'Enabled',
-  })
-  .on('change', ({ value }) => {
-    directionalLightRef.value.visible = value
-    directionalLightHelperRef.value.visible = value
-  })
-
-directionalLightFolder
-  .addInput(directionalLightState, 'helper', {
-    label: 'Helper',
-  })
-  .on('change', ({ value }) => {
-    directionalLightHelperRef.value.visible = value
-  })
-
-directionalLightFolder
-  .addInput(directionalLightState, 'intensity', {
-    label: 'Intensity',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    directionalLightRef.value.intensity = value
-  })
-
-directionalLightFolder
-  .addInput(directionalLightState, 'color', {
-    label: 'Color',
-  })
-  .on('change', ({ value }) => {
-    directionalLightRef.value.color = new Color(value)
-    directionalLightHelperRef.value.update()
-  })
-const axes = ['x', 'y', 'z']
-directionalLightState.position.forEach((_, index) => {
-  directionalLightFolder
-    .addInput(directionalLightState.position, index, {
-      label: `Position ${axes[index]}`,
-      min: -10,
-      max: 10,
-      step: 0.01,
-    })
-    .on('change', ({ value }) => {
-      directionalLightRef.value.position[axes[index]] = value
-      directionalLightHelperRef.value.update()
-    })
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <GLTFModel
-        ref="venomSnake"
-        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/venom-snake-sculpt/scene.gltf"
-        draco
-      />
-
-      <Plane :args="[10, 10, 500, 500]" receive-shadow>
-        <TresMeshStandardMaterial v-bind="pbrTexture" displacement-scale="0.6" />
-      </Plane>
-      <TresAmbientLight ref="ambientLightRef" :color="0xffffff" :intensity="0.25" />
-      <TresDirectionalLight ref="directionalLightRef" v-bind="directionalLightState" cast-shadow />
-      <TresDirectionalLightHelper
-        v-if="directionalLightRef"
-        ref="directionalLightHelperRef"
-        :args="[directionalLightRef, 5]"
-      />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/components/lights/TheLights.vue

@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import TheExperience from './TheExperience.vue'
-</script>
-<template>
-  <Suspense>
-    <TheExperience />
-  </Suspense>
-</template>

apps/playground/src/components/portal-journey/TheExperience.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import ThePortal from './ThePortal.vue'
-import { OrbitControls } from '@tresjs/cientos'
-import TheFireFlies from './TheFireFlies.vue'
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas clear-color="#201919" shadows alpha window-size power-preference="high-performance">
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-      <TresScene>
-        <TresFog :args="['#201919', 0.1, 75]" />
-        <ThePortal />
-        <TheFireFlies />
-        <TresAmbientLight :position="[10, 10, 10]" :intensity="1.5" color="#00ff00" />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>

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

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-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>

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

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { sRGBEncoding, DoubleSide, MeshBasicMaterial, ShaderMaterial, Color, Mesh } from 'three'
-import { useRenderLoop, useTexture } from '@tresjs/core'
-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>

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

@@ -1,7 +0,0 @@
-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);
-}

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

@@ -1,16 +0,0 @@
-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);
-}

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

@@ -1,101 +0,0 @@
-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);
-}

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

@@ -1,11 +0,0 @@
-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;
-}

apps/playground/src/components/textures/Textures.vue

@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import TheExperience from './TheExperience.vue'
-</script>
-<template>
-  <Suspense>
-    <TheExperience />
-  </Suspense>
-</template>

apps/playground/src/components/textures/TheExperience.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { Ref, ref } from 'vue'
-
-import { useTexture, useRenderLoop } from '@tresjs/core'
-import { OrbitControls, Plane } from '@tresjs/cientos'
-import { TresInstance } from '@tresjs/core/dist/types'
-
-const pbrTexture = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const blackRock = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const sphereRef: Ref<TresInstance | null> = ref(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta }) => {
-  // I will run at every frame ~ 60FPS (depending of your monitor)
-  if (sphereRef.value) {
-    sphereRef.value.rotation.y += delta
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-    window-size
-    power-preference="high-performance"
-    preserve-drawing-buffer
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh ref="sphereRef" :position="[0, 4, 0]" :scale="1" cast-shadow>
-        <TresSphereGeometry :args="[1, 500, 500]" />
-        <TresMeshStandardMaterial v-bind="blackRock" displacement-scale="0.2" />
-      </TresMesh>
-      <Plane :args="[10, 10, 500, 500]">
-        <TresMeshStandardMaterial v-bind="pbrTexture" displacement-scale="0.6" />
-      </Plane>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>

apps/playground/src/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="astro/client" />

apps/playground/src/layouts/ExperimentLayout.astro

@@ -1,75 +0,0 @@
----
-import { SEO } from 'astro-seo'
-import '@kidonng/daisyui/index.css'
-
-const { frontmatter } = Astro.props
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <SEO
-      title={frontmatter.title}
-      description={frontmatter.description}
-      openGraph={{
-        basic: {
-          title: frontmatter.title,
-          type: 'website',
-          image: frontmatter.thumbnail,
-        },
-        image: {
-          alt: 'TresJS',
-        },
-      }}
-      twitter={{
-        creator: '@alvarosabu',
-      }}
-      extend={{
-        // extending the default link tags
-        link: [{ rel: 'icon', href: '/favicon.ico' }],
-        // extending the default meta tags
-        meta: [
-          {
-            name: 'twitter:image',
-            content: frontmatter.thumbnail,
-          },
-          { name: 'twitter:title', content: frontmatter.title },
-          { name: 'twitter:description', content: frontmatter.description },
-          { name: 'twitter:card', content: 'summary_large_image' },
-          { name: 'twitter:site', content: '@alvarosabu' },
-          { name: 'twitter:creator', content: '@alvarosabu' },
-          { name: 'og:title', content: frontmatter.title },
-          { name: 'og:description', content: frontmatter.description },
-          { name: 'og:image', content: frontmatter.thumbnail },
-          { name: 'og:url', content: frontmatter.url },
-          { name: 'og:site_name', content: 'TresJS' },
-        ],
-      }}
-    />
-    <title>{frontmatter.title}</title>
-  </head>
-  <body>
-    <slot />
-    <style is:global>
-      :root {
-        --accent: 124, 58, 237;
-        --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-      }
-      html {
-        font-family: system-ui, sans-serif;
-        background-color: #f6f6f6;
-      }
-      body {
-        margin: 0;
-      }
-      code {
-        font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
-          Courier New, monospace;
-      }
-    </style>
-  </body>
-</html>

apps/playground/src/layouts/Layout.astro

@@ -1,87 +0,0 @@
----
-import { SEO } from 'astro-seo'
-
-import Header from '../components/Header.astro'
-
-export interface Props {
-  title: string
-}
-
-const { title } = Astro.props
-
-const meta = {
-  description: 'Playground for TresJS experiments for Vue',
-  thumbnail: 'https://pbs.twimg.com/media/FjtkgAlXwAIF7a_?format=png&name=4096x4096',
-  url: 'https://playground.tresjs.org/',
-}
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-    <SEO
-      title={title}
-      description={meta.description}
-      openGraph={{
-        basic: {
-          title: title,
-          type: 'website',
-          image: meta.thumbnail,
-        },
-        image: {
-          alt: 'TresJS',
-        },
-      }}
-      twitter={{
-        creator: '@alvarosabu',
-      }}
-      extend={{
-        // extending the default link tags
-        link: [{ rel: 'icon', href: '/favicon.ico' }],
-        // extending the default meta tags
-        meta: [
-          {
-            name: 'twitter:image',
-            content: meta.thumbnail,
-          },
-          { name: 'twitter:title', content: title },
-          { name: 'twitter:description', content: meta.description },
-          { name: 'twitter:card', content: 'summary_large_image' },
-          { name: 'twitter:site', content: '@alvarosabu' },
-          { name: 'twitter:creator', content: '@alvarosabu' },
-          { name: 'og:title', content: title },
-          { name: 'og:description', content: meta.description },
-          { name: 'og:image', content: meta.thumbnail },
-          { name: 'og:url', content: meta.url },
-          { name: 'og:site_name', content: 'TresJS' },
-        ],
-      }}
-    />
-  </head>
-  <body>
-    <Header title={title} visible={Astro.url.pathname === '/'} />
-    <slot />
-    <style is:global>
-      :root {
-        --accent: 124, 58, 237;
-        --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-      }
-      html {
-        font-family: system-ui, sans-serif;
-        background-color: #f6f6f6;
-      }
-      body {
-        margin: 0;
-      }
-      code {
-        font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
-          Courier New, monospace;
-      }
-    </style>
-  </body>
-</html>

apps/playground/src/pages/_app.ts

@@ -1,6 +0,0 @@
-import type { App } from 'vue'
-import Tres from '@tresjs/core'
-
-export default (app: App) => {
-  app.use(Tres)
-}

apps/playground/src/pages/index.astro

@@ -1,38 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-
-const vueExperiments = await Astro.glob('./vue/**/*.mdx')
-const experiments = [...vueExperiments].map(experiment => ({
-  framework: 'vue',
-  ...experiment,
-}))
----
-
-<Layout title="Playground">
-  <main
-    class="container px-4 py-20 sm:px-0 mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-12 md:gap-16"
-  >
-    {
-      experiments.map(experiment => (
-        <a href={experiment.url} class="card bg-base-100  shadow-xl rounded-lg overflow-hidden relative">
-          <figure class="aspect-video object-contain">
-            <img src={experiment.frontmatter.thumbnail} alt={experiment.frontmatter.title} />
-          </figure>
-          <div class="card-body p-4">
-            <h2 class="card-title font-bold mb-8 text-lg">{experiment.frontmatter.title}</h2>
-            <p class="mb-4">{experiment.frontmatter.description}</p>
-            <footer class="card-actions justify-end">
-              <ul class="flex flex-wrap">
-                {experiment.frontmatter.tags.map(tag => (
-                  <li>
-                    <span class="text-xs text-gray-700 font-semibold bg-lime-200 py-1 px-2 rounded mr-2">{tag}</span>
-                  </li>
-                ))}
-              </ul>
-            </footer>
-          </div>
-        </a>
-      ))
-    }
-  </main>
-</Layout>

apps/playground/src/pages/vue/animations.mdx

@@ -1,61 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /animations.png
-title: Animations
-author: Alvarosabu
-description: A basic example of how to animate a geometry using useRendererLoop composable
-tags: ['basic', 'animations', 'useRendererLoop']
----
-
-import BasicAnimations from '/@/components/BasicAnimations.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<BasicAnimations client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-Tutorial [here](https://tresjs.org/examples/basic-animations.html)
-
-```vue
-<script setup lang="ts">
-import { ShallowRef, shallowRef } from 'vue'
-
-import { useRenderLoop, TresInstance } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta, elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += delta
-    boxRef.value.rotation.z = elapsed * 0.2
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-    window-size
-    power-preference="high-performance"
-    physically-correct-lights
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[1, 2, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh ref="boxRef" :scale="1" cast-shadow>
-        <TresBoxGeometry :args="[1, 1, 1]" />
-        <TresMeshNormalMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/basic.mdx

@@ -1,59 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /tres-basic.png
-title: Tres Basic
-author: Alvarosabu
-description: A basic example of how to create a scene with TresJS
-tags: ['basic', 'orbit-controls']
----
-
-import TresBasic from '/@/components/TresBasic.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<TresBasic client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-```vue
-<script setup lang="ts">
-import { reactive } from 'vue'
-import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
-
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
-        <TresConeGeometry :args="[1, 1.5, 3]" />
-        <TresMeshToonMaterial color="#82DBC5" />
-      </TresMesh>
-      <TresMesh :position="[0, 0, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#4F4F4F" />
-      </TresMesh>
-      <TresMesh :position="[2, -2, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/environment-tweaks.mdx

@@ -1,80 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /environment.png
-title: Environment Tweaks
-author: Alvarosabu
-description: Example how to tweak renderer environment
-tags: ['basic', 'useTweakpane']
----
-
-import EnvironmentTweaks from '/@/components/EnvironmentTweaks.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<EnvironmentTweaks client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-```vue
-<script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
-import { reactive } from 'vue'
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#201919',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-function onClick(ev) {
-  if (ev) {
-    ev.object.material.color.set('#00800')
-  }
-}
-
-function onPointerEnter(ev) {
-  console.log(ev)
-  if (ev) {
-    ev.object.material.color.set('#CCFF03')
-  }
-}
-
-function onPointerLeave(ev) {
-  if (ev) {
-    /*  ev.object.material.color.set('#efefef') */
-  }
-}
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <OrbitControls />
-    <TresScene>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
-      <template v-for="x in [-2.5, 0, 2.5]">
-        <template v-for="y in [-2.5, 0, 2.5]">
-          <TresMesh
-            v-for="z in [-2.5, 0, 2.5]"
-            :key="[x, y, z]"
-            :position="[x, y, z]"
-            @click="onClick"
-            @pointer-enter="onPointerEnter"
-            @pointer-leave="onPointerLeave"
-          >
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshToonMaterial color="#efefef" />
-          </TresMesh>
-        </template>
-      </template>
-      <TresAmbientLight :intensity="0.5" />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/events.mdx

@@ -1,80 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /events.png
-title: Events
-author: Alvarosabu
-description: A basic example of how events work on TresJS
-tags: ['basic', 'events', 'raytracer']
----
-
-import Events from '/@/components/Events.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<Events client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-```vue
-<script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
-import { reactive } from 'vue'
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#201919',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-function onClick(ev) {
-  if (ev) {
-    ev.object.material.color.set('#00800')
-  }
-}
-
-function onPointerEnter(ev) {
-  console.log(ev)
-  if (ev) {
-    ev.object.material.color.set('#CCFF03')
-  }
-}
-
-function onPointerLeave(ev) {
-  if (ev) {
-    /*  ev.object.material.color.set('#efefef') */
-  }
-}
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <OrbitControls />
-    <TresScene>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
-      <template v-for="x in [-2.5, 0, 2.5]">
-        <template v-for="y in [-2.5, 0, 2.5]">
-          <TresMesh
-            v-for="z in [-2.5, 0, 2.5]"
-            :key="[x, y, z]"
-            :position="[x, y, z]"
-            @click="onClick"
-            @pointer-enter="onPointerEnter"
-            @pointer-leave="onPointerLeave"
-          >
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshToonMaterial color="#efefef" />
-          </TresMesh>
-        </template>
-      </template>
-      <TresAmbientLight :intensity="0.5" />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/gltf-model.mdx

@@ -1,40 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /gltf-model.png
-title: GLTF Model
-author: Alvarosabu
-description: How to add a Gltf Model to using GLTFModel component on TresJS
-tags: ['basic', 'cientos', 'gltf-model']
----
-
-import GLTFModel from '/@/components/GLTFModel.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<GLTFModel client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-```vue
-<script setup lang="ts">
-import { sRGBEncoding } from 'three'
-
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas clear-color="#82DBC5" shadows alpha window-size :output-encoding="sRGBEncoding">
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :near="0.1" :far="1000" />
-      <TresScene :fog="'#82DBC5'">
-        <TresAmbientLight :color="0xffffff" :intensity="0.25" />
-        <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-        <GLTFModel path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf" draco />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/lights.mdx

@@ -1,85 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /lights.png
-title: Lights
-author: Alvarosabu
-description: A basic example of how to use lights
-tags: ['basic', 'lights']
----
-
-import Lights from '/@/components/lights/TheLights.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<Lights client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-Tutorial available [here](https://tresjs.org/examples/load-textures.html)
-
-```vue
-<script setup lang="ts">
-import { Ref, ref } from 'vue'
-
-import { useTexture, useRenderLoop } from '@tresjs/core'
-import { OrbitControls, Plane } from '@tresjs/cientos'
-import { TresInstance } from '@tresjs/core/dist/types'
-
-const pbrTexture = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const blackRock = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const sphereRef: Ref<TresInstance | null> = ref(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta }) => {
-  // I will run at every frame ~ 60FPS (depending of your monitor)
-  if (sphereRef.value) {
-    sphereRef.value.rotation.y += delta
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-    window-size
-    power-preference="high-performance"
-    preserve-drawing-buffer
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh ref="sphereRef" :position="[0, 4, 0]" :scale="1" cast-shadow>
-        <TresSphereGeometry :args="[1, 500, 500]" />
-        <TresMeshStandardMaterial v-bind="blackRock" displacement-scale="0.2" />
-      </TresMesh>
-      <Plane :args="[10, 10, 500, 500]">
-        <TresMeshStandardMaterial v-bind="pbrTexture" displacement-scale="0.6" />
-      </Plane>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/love-vue-threejs.mdx

@@ -1,12 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /tres-basic.png
-title: Love Vue ThreeJS
-author: Alvarosabu
-description: A basic example of how to create a scene with TresJS
-tags: ['basic', 'orbit-controls']
----
-
-import LoveVueThreeJS from '/@/components/LoveVueThreeJS.vue'
-
-<LoveVueThreeJS client:only />

apps/playground/src/pages/vue/materials.mdx

@@ -1,147 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /materials.png
-title: Materials
-author: Alvarosabu
-description: A basic example of how to create a scene with TresJS
-tags: ['basic', 'materials', 'useTweakPane']
----
-
-import Materials from '/@/components/Materials.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<Materials client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-```vue
-<script setup lang="ts">
-import { OrbitControls, Plane, useTweakPane } from '@tresjs/cientos'
-import {
-  BasicShadowMap,
-  Color,
-  CubeTextureLoader,
-  MeshBasicMaterial,
-  MeshLambertMaterial,
-  MeshMatcapMaterial,
-  MeshNormalMaterial,
-  MeshPhongMaterial,
-  MeshPhysicalMaterial,
-  MeshStandardMaterial,
-  MeshToonMaterial,
-  NoToneMapping,
-  sRGBEncoding,
-} from 'three'
-import { shallowReactive, shallowRef } from 'vue'
-
-const { pane } = useTweakPane()
-const state = shallowReactive({
-  clearColor: '#4f4f4f',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-const cubeTextureLoader = new CubeTextureLoader()
-
-const environmentMap = cubeTextureLoader.load([
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/px.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nx.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/py.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/ny.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/pz.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nz.jpg',
-])
-
-const materialState = shallowReactive({
-  color: '#008080',
-  metalness: 0.5,
-  wireframe: false,
-})
-
-const sphereRef = shallowRef()
-pane
-  .addInput(materialState, 'color', {
-    label: 'Color',
-  })
-  .on('change', (ev: any) => {
-    sphereRef.value.material.color = new Color(ev.value)
-  })
-
-pane
-  .addInput(materialState, 'wireframe', {
-    label: 'Wireframe',
-  })
-  .on('change', (ev: any) => {
-    sphereRef.value.material.wireframe = ev.value
-  })
-
-const materialProps = ['metalness', 'roughness']
-
-materialProps.forEach(element => {
-  pane
-    .addBlade({
-      view: 'slider',
-      label: element,
-      min: 0,
-      max: 1,
-      value: 0.5,
-    })
-    .on('change', (ev: any) => {
-      materialState[element] = ev.value
-      sphereRef.value.material[element] = ev.value
-    })
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'Materials',
-    options: [
-      { text: 'MeshBasicMaterial', value: MeshBasicMaterial },
-      { text: 'MeshToonMaterial', value: MeshToonMaterial },
-      /*    { text: 'MeshDepthMaterial', value: MeshDepthMaterial },
-      { text: 'MeshDistanceMaterial', value: MeshDistanceMaterial }, */
-      { text: 'MeshLambertMaterial', value: MeshLambertMaterial },
-      { text: 'MeshMatcapMaterial', value: MeshMatcapMaterial },
-      { text: 'MeshNormalMaterial', value: MeshNormalMaterial },
-      { text: 'MeshPhongMaterial', value: MeshPhongMaterial },
-      { text: 'MeshPhysicalMaterial', value: MeshPhysicalMaterial },
-      { text: 'MeshStandardMaterial', value: MeshStandardMaterial },
-    ],
-    value: MeshToonMaterial,
-  })
-  .on('change', ev => {
-    sphereRef.value.material = new ev.value(materialState)
-
-    if (ev.value === MeshStandardMaterial || ev.value === MeshPhysicalMaterial) {
-      sphereRef.value.material.envMap = environmentMap
-    }
-  })
-</script>
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[3, 3, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <OrbitControls />
-    <TresScene>
-      <TresMesh ref="sphereRef" :position="[0, 1, 0]" cast-shadow recieve-shadow>
-        <TresSphereGeometry :args="[1, 32, 32]" />
-        <TresMeshToonMaterial :color="materialState.color" />
-      </TresMesh>
-      <Plane :args="[10, 10]" recieve-shadow>
-        <TresMeshToonMaterial color="#222" />
-      </Plane>
-      <TresDirectionalLight :position="[-3, 4, 4]" :intensity="2" cast-shadow />
-      <TresDirectionalLight :position="[3, 4, 0]" :intensity="0.5" cast-shadow />
-
-      <TresAmbientLight :intensity="1" />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/portal-journey.mdx

@@ -1,334 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /portal-journey.png
-title: Portal Journey
-author: Alvarosabu
-description: A basic example of how to create a scene with TresJS
-tags: ['gltf', 'shaders', 'useTexture', 'useGLTF', 'useTweakPane', 'baked']
----
-
-import TheExperience from '/@/components/portal-journey/TheExperience.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<TheExperience client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-Famous portal scene from the amazing [Three.js Journey](https://threejs-journey.com/) course by [Bruno Simon](https://bruno-simon.com/)
-
-```vue
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import ThePortal from './ThePortal.vue'
-import TheFireFlies from './TheFireFlies.vue'
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas clear-color="#201919" shadows alpha window-size power-preference="high-performance">
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-      <TresScene>
-        <TresFog :args="['#201919', 0.1, 75]" />
-        <ThePortal />
-        <TheFireFlies />
-        <TresAmbientLight :position="[10, 10, 10]" :intensity="1.5" color="#00ff00" />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>
-```
-
-## ThePortal.vue
-
-```vue
-<script setup lang="ts">
-import { sRGBEncoding, DoubleSide, MeshBasicMaterial, ShaderMaterial, Color, Mesh } from 'three'
-import { useRenderLoop, useTexture } from '@tresjs/core'
-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>
-```
-
-### Shaders
-
-```glsl
-// portal/vertex.glsl
-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;
-}
-```
-
-```glsl
-// portal/fragment.glsl
-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);
-}
-```
-
-## TheFireFlies.vue
-
-```vue
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-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>
-```
-
-### Shaders
-
-```glsl
-// fireflies/vertex.glsl
-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);
-}
-```
-
-```glsl
-// fireflies/fragment.glsl
-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);
-}
-```
-
-</TheInfo>

apps/playground/src/pages/vue/textures.mdx

@@ -1,85 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /textures.png
-title: Textures
-author: Alvarosabu
-description: A basic example of how to load textures using the useTexture composables and suspense
-tags: ['basic', 'useTexture', 'suspense']
----
-
-import Textures from '/@/components/textures/Textures.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<Textures client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-Tutorial available [here](https://tresjs.org/examples/load-textures.html)
-
-```vue
-<script setup lang="ts">
-import { Ref, ref } from 'vue'
-
-import { useTexture, useRenderLoop } from '@tresjs/core'
-import { OrbitControls, Plane } from '@tresjs/cientos'
-import { TresInstance } from '@tresjs/core/dist/types'
-
-const pbrTexture = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const blackRock = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg',
-  displacementMap:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-})
-
-const sphereRef: Ref<TresInstance | null> = ref(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta }) => {
-  // I will run at every frame ~ 60FPS (depending of your monitor)
-  if (sphereRef.value) {
-    sphereRef.value.rotation.y += delta
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-    window-size
-    power-preference="high-performance"
-    preserve-drawing-buffer
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh ref="sphereRef" :position="[0, 4, 0]" :scale="1" cast-shadow>
-        <TresSphereGeometry :args="[1, 500, 500]" />
-        <TresMeshStandardMaterial v-bind="blackRock" displacement-scale="0.2" />
-      </TresMesh>
-      <Plane :args="[10, 10, 500, 500]">
-        <TresMeshStandardMaterial v-bind="pbrTexture" displacement-scale="0.6" />
-      </Plane>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/tlou-ellie-thriller.mdx

@@ -1,49 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /ellie.png
-title: TLOU - Animations
-author: Alvarosabu
-description: Young Ellie from The Last of Us Part II dancing Thriller
-tags: ['animation', 'cientos', 'gltf', 'mixamo']
----
-
-import EllieThriller from '/@/components/ellie-thriller/TheExperience.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<EllieThriller client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-Model Information:
-
-- title: The Last Of Us 2: Young Ellie
-- source: https://sketchfab.com/3d-models/the-last-of-us-2-young-ellie-7ebba24597de4070a81883974e4be93e
-- author: EWTube0 (https://sketchfab.com/EWTube0)
-
-Model License:
-
-- license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
-- requirements: Author must be credited. Commercial use is allowed.
-
-```vue
-<script setup lang="ts">
-import { useGLTF, useAnimations } from '@tresjs/cientos'
-
-const { scene: model, animations } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/tlou-ellie/ellie-thriller.gltf',
-)
-
-const { actions } = useAnimations(animations, model)
-
-let currentAction = actions.dance
-
-currentAction.play()
-</script>
-
-<template>
-  <TresMesh v-bind="model" />
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/transform-controls.mdx

@@ -1,111 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /transform-controls.png
-title: GLTF Model
-author: Alvarosabu
-description: Example of how to use Transform controls from cientos package
-tags: ['basic', 'cientos', 'use-tweak-pane', 'transform-controls']
----
-
-import TransformControls from '/@/components/TransformControls.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<TransformControls client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-```vue
-<script setup lang="ts">
-import { shallowRef, shallowReactive } from 'vue'
-import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
-
-import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
-
-const state = shallowReactive({
-  clearColor: '#201919',
-  shadows: true,
-  alpha: false,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
-const transformState = shallowReactive({
-  mode: 'translate',
-  size: 1,
-  axis: 'XY',
-  showX: true,
-  showY: true,
-  showZ: true,
-})
-
-const boxRef = shallowRef()
-
-const { pane } = useTweakPane()
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'outputEncoding',
-    options: [
-      { text: 'Translate', value: 'translate' },
-      { text: 'Rotate', value: 'rotate' },
-      { text: 'Scale', value: 'scale' },
-    ],
-    value: transformState.mode,
-  })
-  .on('change', ev => {
-    transformState.mode = ev.value
-  })
-
-pane.addInput(transformState, 'size')
-
-const axisFolder = pane.addFolder({ title: 'Axis' })
-
-axisFolder
-  .addBlade({
-    view: 'list',
-    label: 'axis',
-    options: [
-      { text: 'X', value: 'X' },
-      { text: 'Y', value: 'Y' },
-      { text: 'XY', value: 'XY' },
-      { text: 'YZ', value: 'YZ' },
-      { text: 'XZ', value: 'XZ' },
-      { text: 'XYZ', value: 'XYZ' },
-    ],
-    value: transformState.axis,
-  })
-  .on('change', ev => {
-    transformState.axis = ev.value
-  })
-axisFolder.addInput(transformState, 'showX')
-axisFolder.addInput(transformState, 'showY')
-axisFolder.addInput(transformState, 'showZ')
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <OrbitControls make-default />
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-
-    <TresScene>
-      <TransformControls :object="boxRef" v-bind="transformState" />
-      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresAmbientLight :intensity="0.5" />
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/src/pages/vue/tres-donut.mdx

@@ -1,41 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /tres-donut.png
-title: Tres Donut 🍩
-author: Alvarosabu
-description: Plain donut with TresJS
-tags: ['basic']
----
-
-import TresDonut from '/@/components/TresDonut.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<TresDonut client:only />
-
-<TheInfo>
-# { frontmatter.title }
-
-```vue
-<script setup lang="ts">
-import { reactive } from 'vue'
-
-const state = reactive({
-  shadows: true,
-  alpha: false,
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[0, 0, 6]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh>
-        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-        <TresMeshBasicMaterial color="orange" />
-      </TresMesh>
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-</TheInfo>

apps/playground/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "astro/tsconfigs/base",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "jsx": "preserve",
-    "paths": {
-      "/@/*": ["src/*"]
-    }
-  }
-}