Merge pull request #106 from Tresjs/feature/remove-playground

Feature/remove 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/favicon.svg

@@ -1,9 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#4f4f4f" fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V156C0 158.209 1.79086 160 4 160H156C158.209 160 160 158.209 160 156V4C160 1.79086 158.209 0 156 0H4ZM29 129C26.7909 129 25 130.791 25 133C25 135.209 26.7909 137 29 137H132C134.209 137 136 135.209 136 133C136 130.791 134.209 129 132 129H29ZM59 80C59 89.3888 51.3888 97 42 97C32.6112 97 25 89.3888 25 80C25 70.6112 32.6112 63 42 63C51.3888 63 59 70.6112 59 80ZM119 97C128.389 97 136 89.3888 136 80C136 70.6112 128.389 63 119 63C109.611 63 102 70.6112 102 80C102 89.3888 109.611 97 119 97Z"/>
-
-  <path d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
-
-	<style>
-    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
-  </style>
-</svg>

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/TheInfo.astro

@@ -1,21 +0,0 @@
----
-/* const { path } = Astro.params
-
-console.log(Astro) */
----
-
-<div class="fixed bottom-0 right-0">
-  <div class="dropdown dropdown-top dropdown-end p-4 w-full flex justify-end z-60">
-    <label
-      tabindex={0}
-      class="btn btn-circle important:(bg-white border-white text-gray-600 dark:text-light-200 hover:bg-gray-100) cursor-pointer"
-      ><i class="i-carbon-information"></i></label
-    >
-    <div
-      tabindex={0}
-      class="mb-8 dropdown-content px-4 shadow bg-base-100 rounded-box pb-8 mr-4 z-20 overflow-scroll max-h-screen-sm"
-    >
-      <div class="prose text-xs"><slot /></div>
-    </div>
-  </div>
-</div>

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/lowpoly-planet/Airplane.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { useGLTF, useTweakPane } from '@tresjs/cientos'
-import { useRenderLoop } from '@tresjs/core'
-import { Object3D, Sphere } from 'three'
-import { shallowRef, watch } from 'vue'
-
-const props = defineProps<{
-  planet: Object3D
-}>()
-
-const { scene } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/low-poly/airplane.gltf',
-)
-
-const airplaneRef = shallowRef()
-
-const airplane = scene
-airplane.rotation.set(0, Math.PI, 0)
-scene.traverse(child => {
-  if (child.isMesh) {
-    child.castShadow = true
-  }
-})
-airplane.updateMatrixWorld()
-
-const { onLoop } = useRenderLoop()
-
-watch(
-  () => props.planet,
-  planet => {
-    if (!planet) return
-    const radius = Math.abs(planet.geometry.boundingSphere?.radius | 1) + 0.5
-    airplane.position.set(radius, 0, 0)
-
-    airplane.lookAt(planet.position)
-  },
-)
-
-const { pane } = useTweakPane()
-
-const folder = pane.addFolder({
-  title: 'Airplane',
-  expanded: true,
-})
-
-watch(
-  () => airplaneRef.value,
-  planet => {
-    if (!planet) return
-    folder.addInput(airplaneRef.value, 'visible', { label: 'Visible' })
-  },
-)
-
-let angle = 0
-let speed = 0.2
-onLoop(({ delta }) => {
-  if (!airplane) return
-
-  const radius = Math.abs(props.planet.geometry.boundingSphere.radius) + 0.5
-  angle += delta * speed
-  let x = radius * Math.cos(angle)
-  let z = radius * Math.sin(angle)
-  airplane.position.x = x
-  airplane.position.z = z
-  airplane.rotation.z = -Math.PI / 2
-  airplane.rotation.y = -angle
-  airplane.updateMatrixWorld()
-})
-</script>
-<template>
-  <TresMesh ref="airplaneRef" v-bind="airplane" />
-</template>

apps/playground/src/components/lowpoly-planet/Cloud.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-import { useRenderLoop } from '@tresjs/core'
-import { Object3D } from 'three'
-import { shallowRef, watch } from 'vue'
-
-const props = defineProps<{
-  planet: Object3D
-}>()
-
-const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/low-poly/cloud.gltf')
-const cloudRef = shallowRef()
-
-const cloud = scene.children[0] as Object3D
-cloud.castShadow = true
-// create a function to return a random number between two values with random sign
-function random(min: number, max: number): number {
-  const randomNumber = Math.random() * (max - min) + min
-  return Math.random() < 0.5 ? -randomNumber : randomNumber
-}
-
-cloud.position.set(random(0.5, 8), random(0.5, 1), random(0.5, 8))
-
-const size = random(0.5, 1)
-cloud.scale.set(size, size, size)
-cloud.updateMatrixWorld()
-
-watch(
-  () => props.planet,
-  planet => {
-    if (!planet) return
-    cloud.lookAt(planet.position)
-    cloud.updateMatrixWorld()
-  },
-)
-
-const { onLoop } = useRenderLoop()
-
-let angle = random(0.5, 1) * Math.PI
-let speed = Math.random() / 10
-onLoop(({ delta }) => {
-  if (!cloud) return
-
-  const radius = Math.abs(props.planet.geometry.boundingSphere.radius) + 0.5
-  angle += delta * speed
-  let x = radius * Math.cos(angle)
-  let z = radius * Math.sin(angle)
-  cloud.position.x = x
-  cloud.position.z = z
-  cloud.rotation.y = -angle
-  cloud.lookAt(props.planet.position)
-  cloud.updateMatrixWorld()
-})
-</script>
-<template>
-  <TresMesh ref="cloudRef" v-bind="scene" cast-shadow />
-</template>

apps/playground/src/components/lowpoly-planet/Planet.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { useGLTF, useTweakPane } from '@tresjs/cientos'
-import { useRenderLoop } from '@tresjs/core'
-import { shallowRef, watch } from 'vue'
-import Airplane from './Airplane.vue'
-import Cloud from './Cloud.vue'
-
-const { scene: planet } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/low-poly/planet.gltf',
-)
-
-const { pane } = useTweakPane()
-
-const planetRef = shallowRef()
-
-planet.traverse(child => {
-  if (child.isMesh) {
-    child.receiveShadow = true
-  }
-})
-
-watch(
-  () => planetRef.value,
-  planet => {
-    if (!planet) return
-    pane.addInput(planetRef.value, 'visible', { label: 'Planet' })
-  },
-)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta }) => {
-  if (!planet) return
-  planet.rotation.y += delta * 0.04
-  planet.rotation.z += delta * 0.02
-  planet.rotation.x += delta * 0.05
-  planet.updateMatrixWorld()
-})
-</script>
-<template>
-  <TresMesh ref="planetRef" v-bind="planet" />
-  <Airplane :planet="planetRef" />
-  <Cloud v-for="cloud of [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="cloud" :planet="planetRef" />
-</template>

apps/playground/src/components/lowpoly-planet/TheExperience.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { PCFSoftShadowMap, sRGBEncoding } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
-
-import Planet from './Planet.vue'
-import { shallowRef, watch } from 'vue'
-import { TresInstance } from '@tresjs/core/dist/types'
-
-const state = {
-  clearColor: '#11101B',
-  shadows: true,
-  alpha: false,
-  outputEncoding: sRGBEncoding,
-  shadowMapType: PCFSoftShadowMap,
-}
-const directionalLightRef = shallowRef<TresInstance>()
-
-watch(
-  () => directionalLightRef.value,
-  directionalLight => {
-    if (!directionalLight) return
-
-    directionalLight.shadow.mapSize.width = 2048
-    directionalLight.shadow.mapSize.height = 2048
-  },
-)
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas v-bind="state">
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[0, 1, 3]" :fov="75" :near="0.1" :far="1000" />
-      <TresScene>
-        <TresFog color="#11101B" :near="0.1" :far="1000" />
-        <TresAmbientLight :color="0x484068" :intensity="1" />
-        <Planet />
-
-        <TresAxesHelper />
-        <TresPointLight color="#1BFFEF" :position="[0, 8, -16]" :intensity="8" cast-shadow />
-        <TresDirectionalLight ref="directionalLightRef" :position="[0, 2, 4]" :intensity="1" cast-shadow />
-      </TresScene>
-    </TresCanvas>
-  </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/lowpoly-planet.mdx

@@ -1,40 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /lowpoly-planet.png
-title: Low Poly Planet
-author: Alvarosabu
-description: Low Poly Planet exported from Blender
-tags: ['basic', 'cientos', 'useGLTF']
----
-
-import LowpolyPlanet from '/@/components/lowpoly-planet/TheExperience.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<LowpolyPlanet 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/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/*"]
-    }
-  }
-}

package.json

@@ -36,7 +36,8 @@
     "changelog:cientos": "echo 'generate @tresjs/cientos changelog' && conventional-changelog -p angular -i ./packages/cientos/CHANGELOG.md -s  --commit-path ./packages/cientos && git add ./packages/cientos/CHANGELOG.md",
     "lint": "pnpm run lint:tres && pnpm run lint:cientos",
     "lint:tres": "pnpm --filter @tresjs/core lint",
-    "lint:cientos": "pnpm --filter @tresjs/cientos lint"
+    "lint:cientos": "pnpm --filter @tresjs/cientos lint",
+    "clean": "pnpm -r exec rm -rf node_modules"
   },
   "keywords": [
     "vue",

packages/tres/package.json

@@ -49,6 +49,7 @@
     "@alvarosabu/utils": "^2.2.0"
   },
   "devDependencies": {
+    "three": "latest",
     "@tresjs/cientos": "workspace:^1.6.0",
     "@types/three": "latest",
     "@vitejs/plugin-vue": "^4.0.0",