Merge branch 'main' into feature/71-unit-test

.vscode/launch.json

@@ -3,15 +3,26 @@
   "version": "0.2.0",
   "configurations": [
     {
+      "name": "Attach by Process ID",
+      "processId": "${command:PickProcess}",
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node"
+    },
+    {
+      "name": "Attach to vite",
+      "port": 5174,
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node"
+    },
+    {
+      "name": "fe-server",
       "type": "node",
       "request": "launch",
-      "name": "Debug Current Test File",
-      "autoAttachChildProcesses": true,
-      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
-      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
-      "args": ["run", "${relativeFile}"],
-      "smartStep": true,
-      "console": "integratedTerminal"
+      "cwd": "${workspaceRoot}/packages/tres",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev", "--preserve-symlinks"]
     }
   ]
 }

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.2",
-    "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,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
-  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
-  <path fill="url(#gradient)" 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"/>
-  <defs>
-    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#000"/>
-      <stop offset="1" stop-color="#000" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
-	<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-md"
-    >
-      <div class="prose"><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/portal-journey/TheExperience.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/playground/src/env.d.ts

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

apps/playground/src/layouts/ExperimentLayout.astro

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

apps/playground/src/layouts/Layout.astro

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

apps/playground/src/pages/_app.ts

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

apps/playground/src/pages/index.astro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,334 +0,0 @@
----
-layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /portal-journey.png
-title: Portal Journey
-author: Alvarosabu
-description: A basic example of how to create a scene with TresJS
-tags: ['gltf', 'shaders', 'useTexture', 'useGLTF', 'useTweakPane', 'baked']
----
-
-import TheExperience from '/@/components/portal-journey/TheExperience.vue'
-import TheInfo from '/@/components/TheInfo.astro'
-
-<TheExperience client:only />
-
-<TheInfo >
-# { frontmatter.title }
-
-Famous portal scene from the amazing [Three.js Journey](https://threejs-journey.com/) course by [Bruno Simon](https://bruno-simon.com/)
-
-```vue
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import ThePortal from './ThePortal.vue'
-import TheFireFlies from './TheFireFlies.vue'
-</script>
-
-<template>
-  <Suspense>
-    <TresCanvas clear-color="#201919" shadows alpha window-size power-preference="high-performance">
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-      <TresScene>
-        <TresFog :args="['#201919', 0.1, 75]" />
-        <ThePortal />
-        <TheFireFlies />
-        <TresAmbientLight :position="[10, 10, 10]" :intensity="1.5" color="#00ff00" />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>
-```
-
-## ThePortal.vue
-
-```vue
-<script setup lang="ts">
-import { sRGBEncoding, DoubleSide, MeshBasicMaterial, ShaderMaterial, Color, Mesh } from 'three'
-import { useRenderLoop, useTexture } from '@tresjs/core'
-import { useGLTF, useTweakPane } from '@tresjs/cientos'
-
-import PortalVertex from './shaders/portal/vertex.glsl'
-import PortalFragment from './shaders/portal/fragment.glsl'
-
-const experiment = {
-  portalColorStart: '#7030eb',
-  portalColorEnd: '#ddc0ff',
-}
-
-const { pane } = useTweakPane()
-
-const portalCtrls = pane.addFolder({ title: 'Portal' })
-portalCtrls
-  .addInput(experiment, 'portalColorStart', {
-    label: 'color start',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    portalLightMaterial.uniforms.uColorStart.value.set(value)
-  })
-portalCtrls
-  .addInput(experiment, 'portalColorEnd', {
-    label: 'color end',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    portalLightMaterial.uniforms.uColorEnd.value.set(value)
-  })
-
-const { scene: portal } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/portal.glb',
-  {
-    draco: true,
-  },
-)
-
-const bakedTexture = await useTexture([
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/baked.jpg',
-])
-
-bakedTexture.flipY = false
-bakedTexture.encoding = sRGBEncoding
-
-// Baked material
-const bakedMaterial = new MeshBasicMaterial({
-  map: bakedTexture,
-  side: DoubleSide,
-})
-
-const portalLightMaterial = new ShaderMaterial({
-  uniforms: {
-    uTime: { value: 0 },
-    uColorStart: { value: new Color(experiment.portalColorStart) },
-    uColorEnd: { value: new Color(experiment.portalColorEnd) },
-  },
-  vertexShader: PortalVertex,
-  fragmentShader: PortalFragment,
-  side: DoubleSide,
-})
-
-const portalObj = portal
-const bakedMesh = portalObj.children.find(child => child.name === 'baked')
-;(bakedMesh as Mesh).material = bakedMaterial
-const portalCircle = portalObj.children.find(child => child.name === 'portalCircle')
-;(portalCircle as Mesh).material = portalLightMaterial
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ _delta, elapsed }) => {
-  portalLightMaterial.uniforms.uTime.value = elapsed
-})
-</script>
-<template>
-  <TresMesh v-bind="portal" />
-</template>
-```
-
-### Shaders
-
-```glsl
-// portal/vertex.glsl
-varying vec2 vUv;
-
-void main()
-{
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-    vec4 viewPosition = viewMatrix * modelPosition;
-    vec4 projectionPosition = projectionMatrix * viewPosition;
-
-    gl_Position = projectionPosition;
-    vUv = uv;
-}
-```
-
-```glsl
-// portal/fragment.glsl
-varying vec2 vUv;
-uniform float uTime;
-uniform vec3 uColorStart;
-uniform vec3 uColorEnd;
-
-//	Classic Perlin 3D Noise
-//	by Stefan Gustavson
-//
-vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
-vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
-vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
-
-float cnoise(vec3 P){
-vec3 Pi0 = floor(P); // Integer part for indexing
-vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
-Pi0 = mod(Pi0, 289.0);
-Pi1 = mod(Pi1, 289.0);
-vec3 Pf0 = fract(P); // Fractional part for interpolation
-vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
-vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-vec4 iy = vec4(Pi0.yy, Pi1.yy);
-vec4 iz0 = Pi0.zzzz;
-vec4 iz1 = Pi1.zzzz;
-
-vec4 ixy = permute(permute(ix) + iy);
-vec4 ixy0 = permute(ixy + iz0);
-vec4 ixy1 = permute(ixy + iz1);
-
-vec4 gx0 = ixy0 / 7.0;
-vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
-gx0 = fract(gx0);
-vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
-vec4 sz0 = step(gz0, vec4(0.0));
-gx0 -= sz0 * (step(0.0, gx0) - 0.5);
-gy0 -= sz0 * (step(0.0, gy0) - 0.5);
-
-vec4 gx1 = ixy1 / 7.0;
-vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
-gx1 = fract(gx1);
-vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
-vec4 sz1 = step(gz1, vec4(0.0));
-gx1 -= sz1 * (step(0.0, gx1) - 0.5);
-gy1 -= sz1 * (step(0.0, gy1) - 0.5);
-
-vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
-vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
-vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
-vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
-vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
-vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
-vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
-vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
-
-vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
-g000 *= norm0.x;
-g010 *= norm0.y;
-g100 *= norm0.z;
-g110 *= norm0.w;
-vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
-g001 *= norm1.x;
-g011 *= norm1.y;
-g101 *= norm1.z;
-g111 *= norm1.w;
-
-float n000 = dot(g000, Pf0);
-float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
-float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
-float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
-float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
-float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
-float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
-float n111 = dot(g111, Pf1);
-
-vec3 fade_xyz = fade(Pf0);
-vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
-vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
-float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
-return 2.2 * n_xyz;
-}
-
-void main()
-{
-  float speed = 0.1;
-  // Displace the UV coordinates by a noise value
-  vec2 displacedUv = vUv + cnoise(vec3(vUv* 5.0, uTime * speed));
-  // Get the color from the texture
-  float strength = cnoise(vec3(displacedUv * 5.0, uTime * speed * 2.0));
-
-  // Outer Glow
-
-  float outerGlow = distance(vUv, vec2(0.5)) * 5.0 - 1.4;
-  strength += outerGlow;
-
-  strength += step(- 0.2, strength) * 0.8;
-
-  strength = clamp(strength, 0.0, 1.0);
-
-  vec3 color = mix(uColorStart, uColorEnd, strength);
-
-  gl_FragColor = vec4(color, 1.0);
-}
-```
-
-## TheFireFlies.vue
-
-```vue
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { AdditiveBlending } from 'three'
-import FirefliesVertex from './shaders/fireflies/vertex.glsl'
-import FirefliesFragment from './shaders/fireflies/fragment.glsl'
-
-const shader = {
-  transparent: true,
-  blending: AdditiveBlending,
-  depthWrite: false,
-
-  vertexShader: FirefliesVertex,
-  fragmentShader: FirefliesFragment,
-  uniforms: {
-    uSize: { value: 100 },
-    uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
-    uTime: { value: 0 },
-  },
-}
-
-const firefliesCount = 60
-const positionArray = new Float32Array(firefliesCount * 3)
-const scaleArray = new Float32Array(firefliesCount)
-
-for (let i = 0; i < firefliesCount; i++) {
-  positionArray[i * 3 + 0] = (Math.random() - 0.5) * 4
-  positionArray[i * 3 + 1] = Math.random() * 4
-  positionArray[i * 3 + 2] = (Math.random() - 0.5) * 4
-  scaleArray[i] = Math.random()
-}
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-  shader.uniforms.uTime.value = elapsed
-})
-</script>
-<template>
-  <TresPoints>
-    <TresBufferGeometry :position="[positionArray, 3]" :a-scale="[scaleArray, 1]" />
-    <TresShaderMaterial v-bind="shader" />
-  </TresPoints>
-</template>
-```
-
-### Shaders
-
-```glsl
-// fireflies/vertex.glsl
-uniform float uPixelRatio;
-uniform float uSize;
-uniform float uTime;
-attribute float aScale;
-
-void main()
-{
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-    modelPosition.y += sin(uTime + modelPosition.x * 100.0) * aScale * 0.2;
-    vec4 viewPosition = viewMatrix * modelPosition;
-    vec4 projectionPosition = projectionMatrix * viewPosition;
-
-    gl_Position = projectionPosition;
-    gl_PointSize = aScale * uSize * uPixelRatio;
-    gl_PointSize *= (1.0 / - viewPosition.z);
-}
-```
-
-```glsl
-// fireflies/fragment.glsl
-void main()
-{
-  float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-  float strength = 0.05 / distanceToCenter - 0.1;
-
-  gl_FragColor = vec4(1.0, 1.0, 1.0, strength);
-}
-```
-
-</TheInfo>

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

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

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

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

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

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

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

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

apps/playground/tsconfig.json

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

docs/.vitepress/config.ts

@@ -70,6 +70,8 @@ export default defineConfig({
             items: [
               { text: 'Text3D', link: '/cientos/abstractions/text-3d' },
               { text: 'useAnimations', link: '/cientos/abstractions/use-animations' },
+              { text: 'Environment', link: '/cientos/abstractions/environment' },
+              { text: 'useEnvironment', link: '/cientos/abstractions/use-environment' },
             ],
           },
           {

docs/advanced/caveats.md

@@ -2,7 +2,13 @@
 
 Our aim is to provide a simple way of using ThreeJS in VueJS with the best developer experience possible. However, there are some caveats that you should be aware of.
 
-## HMR and ThreeJS
+## ~~HMR and ThreeJS~~
+
+:::info
+
+This has been fixed in **TresJS** v1.7.0 🎉. You can now use HMR without reloading the page 🥹.
+
+:::
 
 Hot module replacement (HMR) is a feature that allows you to update your code without reloading the page. This is a great feature that makes development much faster. **TresJS** uses [Vite](https://vitejs.dev/). However, is really tricky to make it work correctly with ThreeJS.
 

docs/api/composables.md

@@ -170,9 +170,9 @@ Then you can use the new component in your template. Notice that the new compone
 </template>
 ```
 
-# useTres <Badge type="warning" text="experimental" />
+# useTres <Badge type="warning" text="^1.7.0" />
 
-This composable aims to provide access to the state model which contains the default renderer, camera, scene, and other useful properties. It is still experimental and it is not recommended to use it in production because is highly like subject to change.
+This composable aims to provide access to the state model which contains the default renderer, camera, scene, and other useful properties.
 
 ```ts
 const { state } = useTres()
@@ -180,22 +180,3 @@ const { state } = useTres()
 console.log(state.camera) // THREE.PerspectiveCamera
 console.log(state.renderer) // THREE.WebGLRenderer
 ```
-
-Until this composable is stable, it is recommended to use the `provide/inject` API to acces the elements you need. These are the available keys:
-
-- `camera`: it returns the current active camera
-- `renderer`: it returns the current active renderer
-- `local-scene`: it returns the current active scene
-- `catalogue`: it returns the current catalogue of components
-- `extend` : it returns the `extend` function from the `useCatalogue` composable. Specially needed if you are a plugin author.
-- `aspect-ratio`: it returns the current aspect ratio of the canvas
-
-```ts
-import { provide, inject } from 'vue'
-
-const camera = inject<Ref<Camera>>('camera')
-const renderer = inject<Ref<WebGLRenderer>>('renderer')
-
-console.log(camera.value) // THREE.PerspectiveCamera
-console.log(renderer.value) // THREE.WebGLRenderer
-```

docs/api/renderer.md

@@ -13,6 +13,34 @@ The `Renderer` component is the main component of Tres. It's the one that create
 </template>
 ```
 
+## Presets <Badge warning text="v1.7.0+" />
+
+Tres comes with a few presets for the `Renderer` component. You can use them by setting the `preset` prop.
+
+### Realistic
+
+The `realistic` preset makes easy to setup the renderer for more realistic 3D scenes.
+
+```vue
+<template>
+  <TresCanvas preset="realistic">
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+It's equivalent to:
+
+```ts
+renderer.shadows: true,
+renderer.physicallyCorrectLights: true,
+renderer.outputEncoding: sRGBEncoding,
+renderer.toneMapping: ACESFilmicToneMapping,
+renderer.toneMappingExposure: 3,
+renderer.shadowMap.enabled: true,
+renderer.shadowMap.type: PCFSoftShadowMap
+```
+
 ## Props
 
 | Prop                        | Description                                                                                                                                                     | Default            |

docs/cientos/abstractions/environment.md

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

docs/cientos/abstractions/use-environment.md

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

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",
@@ -50,8 +51,8 @@
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
     "@stackblitz/sdk": "^1.8.1",
-    "@tresjs/cientos": "workspace:^1.6.0",
-    "@tresjs/core": "workspace:^1.6.2",
+    "@tresjs/cientos": "workspace:^1.7.0",
+    "@tresjs/core": "workspace:^1.7.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-cli": "^2.2.2",

packages/cientos/CHANGELOG.md

@@ -1,3 +1,60 @@
+# 1.7.0 (2023-02-19)
+
+### Bug Fixes
+
+- added copyPublicDir: false to remove static assets on package ([7e8de9c](https://github.com/Tresjs/tres/commit/7e8de9c4b4e63107b79a81a8686ad97256a29017))
+- app.vue ([60023dd](https://github.com/Tresjs/tres/commit/60023dd5ad3fbbc5c139648fcf7b72a08149d340))
+- center props in text3D ([a4e66d3](https://github.com/Tresjs/tres/commit/a4e66d30a015a62ad346e1186f30ea239f7a7bdd))
+- **cientos:** added changelog script ([5e5b9d1](https://github.com/Tresjs/tres/commit/5e5b9d12ed888fdd74d15f9590c225e74163a698))
+- **cientos:** check if transform prop has setter ([c7a24cb](https://github.com/Tresjs/tres/commit/c7a24cb7d1784b818b3fc74d8663677ec9b96d11))
+- **cientos:** clean up ([691b174](https://github.com/Tresjs/tres/commit/691b174b625a108bf33f8d8d74c52efdfcee4641))
+- **cientos:** draco encoding and decoderPath ([c9bd7ad](https://github.com/Tresjs/tres/commit/c9bd7ad6ef3ba86855c887886a9032fe0a324dd2))
+- **cientos:** expose get model on gltf component to get instance ([bd23b8d](https://github.com/Tresjs/tres/commit/bd23b8d2b3b9eda194527d2a11cdced0e5fc5802))
+- **cientos:** fixed broken camera on orbit controls due reactivity ([a7aba7c](https://github.com/Tresjs/tres/commit/a7aba7c77003a52cd08a5cfb0a1ab89d84f184de))
+- **cientos:** fixed useCientos type issues ([34aefc6](https://github.com/Tresjs/tres/commit/34aefc6f3f2d51a4cc4e646160fa11b4936782e9))
+- **cientos:** singletonize pane ([cbd24a7](https://github.com/Tresjs/tres/commit/cbd24a7dd7be7dfc8988647f2c0e0b927e8a6807))
+- **cientos:** use absolute path again ([2b012f7](https://github.com/Tresjs/tres/commit/2b012f7332fb844bd8dceb13a742d88e3f96b85c))
+- **core:** enabled function calling on process props ([f544371](https://github.com/Tresjs/tres/commit/f5443713cd34ad284bb01d4bb4ea1d23bb3e43d2))
+- corrected changelog ([91f8e42](https://github.com/Tresjs/tres/commit/91f8e42551f134d56788973f52bded65902c289d))
+- forcing a release with correct bundle versions ([a211e75](https://github.com/Tresjs/tres/commit/a211e758e16bab34d9afaad8496585e1c5b7de3e))
+- linters ([b1bbbcf](https://github.com/Tresjs/tres/commit/b1bbbcfce9e4511ed1ce3137f6f3ba082f7d29b0))
+- make it work with new instance creator logic ([5c07f84](https://github.com/Tresjs/tres/commit/5c07f84e34b44a4d625b9c4e98acfe4274453a6d))
+- minor ts issues ([144d0ba](https://github.com/Tresjs/tres/commit/144d0ba116d864937d6cf5cfc44a509731bd9ba9))
+- recent problems with adding the controls to refs ([f0d53c9](https://github.com/Tresjs/tres/commit/f0d53c9d8b25685b738fe45a71a3bd8b9b217d9c))
+- remove initial Orbitcontrol extend from plugin ([171ede4](https://github.com/Tresjs/tres/commit/171ede4ff61bbc6b9edd5f0e83859e956ab0e30b))
+- removing unused code ([1a9ead7](https://github.com/Tresjs/tres/commit/1a9ead7b4aa527f303a5a88046fabf238173f951))
+- types ([8500c62](https://github.com/Tresjs/tres/commit/8500c6238927d6f6dbce71da2a4f5e1432a1c953))
+- typing issues with useLoader and environment ([d6aca6f](https://github.com/Tresjs/tres/commit/d6aca6fc907ba4f57fa7ccd669a92da23ba34cd9))
+
+### Features
+
+- **cientos:** access core state via provide inject api ([e08c19a](https://github.com/Tresjs/tres/commit/e08c19ab8e53bb47b9afa32f6a01dc37d281bbfb))
+- **cientos:** add events and controls default support on dragging ([f03f8e8](https://github.com/Tresjs/tres/commit/f03f8e8159ff1c610ee5a8fda94edd1d208e3285))
+- **cientos:** baseline for Environment abstraction ([4a7ce99](https://github.com/Tresjs/tres/commit/4a7ce990e7b71393ffd4154ea143e7ad87501185))
+- **cientos:** basic transform controls ([ada3b4c](https://github.com/Tresjs/tres/commit/ada3b4cea6cdb1a37fe6b6dc513cb587ed5c5cd8))
+- **cientos:** box abstraction ([dc9c638](https://github.com/Tresjs/tres/commit/dc9c638804f877dcc1567b38285ce0d8b4c4a087))
+- **cientos:** circle abstraction ([978eb2d](https://github.com/Tresjs/tres/commit/978eb2da600b0f2055a12a460fd2f5406ceaa028))
+- **cientos:** cone abstraction ([9d04c54](https://github.com/Tresjs/tres/commit/9d04c5456e498542b0373499bbc496bfb9f56c54))
+- **cientos:** environment preset support ([ff8c86c](https://github.com/Tresjs/tres/commit/ff8c86c171895a69bc2f2376ecd04e2bcf5767f6))
+- **cientos:** getting app from getCurrentInstance 🤩 ([f899977](https://github.com/Tresjs/tres/commit/f899977f25ec51a607946b726578811b87db85b3))
+- **cientos:** migrated transform controls to new state management ([b746838](https://github.com/Tresjs/tres/commit/b746838779c3362f70138a18d095f936247cbc3b))
+- **cientos:** move texture loading to the useEnvironment composable ([4058f58](https://github.com/Tresjs/tres/commit/4058f58619bcc1dd8a3ba09dc626da1a38708e97))
+- **cientos:** plane abstraction ([3f27400](https://github.com/Tresjs/tres/commit/3f274007d3177bb35bcd74a705ab7c74ca3ce1cf))
+- **cientos:** Refactor OrbitControls to use new extend API ([7251b60](https://github.com/Tresjs/tres/commit/7251b6085c629d1fdbe4272cc264d21790ad8241))
+- **cientos:** sphere abstraction ([e2a6fff](https://github.com/Tresjs/tres/commit/e2a6fff86407a397a0c73c7d0a03c63762bfd833))
+- **cientos:** text3d base ([0e13051](https://github.com/Tresjs/tres/commit/0e130514b0975d6eadd41a8a999998128b92a189))
+- **cientos:** Text3D now accepts sweet text via slots ([8f3a2f4](https://github.com/Tresjs/tres/commit/8f3a2f4787c3e2dff8d71e0588c60794abdd75a7))
+- **cientos:** torus abstraction ([d85eb40](https://github.com/Tresjs/tres/commit/d85eb4091e2ae9c7f9a14406bab8191ea2824375))
+- **cientos:** torus knot abstraction ([8c4fd46](https://github.com/Tresjs/tres/commit/8c4fd4692d06eccced94c35d39fa7280f6fba3c9))
+- **cientos:** typed and story ([851baf9](https://github.com/Tresjs/tres/commit/851baf937c7f563f6300b6d84f15ae05dcb2a150))
+- **cientos:** updated cientos model loaders with state ([6481cec](https://github.com/Tresjs/tres/commit/6481cec1dc431f62a283c323e1eb248a3dc205d3))
+- **cientos:** updated onLoop delta usage for useAnimations ([9e7fdbd](https://github.com/Tresjs/tres/commit/9e7fdbd9d1184b8405fdc252c2ba19e53b1bf91b))
+- **cientos:** useAnimations ([2704288](https://github.com/Tresjs/tres/commit/2704288fd8d814ef9091001f3630fbdb97f13884))
+- **cientos:** useFBX and FBXModel ([cdb0665](https://github.com/Tresjs/tres/commit/cdb0665eecbad4b09dfbb60f3c33666bc422af86))
+- **core:** extension now works with slots passed by ([e1bfea1](https://github.com/Tresjs/tres/commit/e1bfea1a0901eb61a88b23fb0423f207877045f1))
+- text3d on cientos ([ff80fdb](https://github.com/Tresjs/tres/commit/ff80fdb6cb0655d87ae9b24cc8904b96792baa00))
+- updated deps and clean up App.vue ([88de6eb](https://github.com/Tresjs/tres/commit/88de6eb756967e7f9981bece6bb7105dd9d893d5))
+
 # 1.6.0 (2023-02-03)
 
 ### Features

packages/cientos/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -37,7 +37,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "peerDependencies": {
-    "@tresjs/core": "workspace:^1.6.2",
+    "@tresjs/core": "workspace:^1.7.0",
     "three": "latest",
     "vue": "^3.2.47"
   },
@@ -50,12 +50,12 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "tweakpane": "^3.1.4",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
+    "vite": "^4.1.2",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "^1.7.2"
+    "vite-plugin-dts": "2.0.0-beta.1"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^1.6.0",
+    "@tresjs/core": "workspace:^1.7.0",
     "three-stdlib": "^2.21.8"
   }
 }

packages/cientos/src/core/OrbitControls.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useTres } from '@tresjs/core'
-import { Camera, Vector3, WebGLRenderer } from 'three'
+import { Camera, Vector3 } from 'three'
 import { OrbitControls } from 'three-stdlib'
-import { inject, ref, watch, type Ref } from 'vue'
+import { ref, watch, unref, type Ref } from 'vue'
 
 import { useCientos } from './useCientos'
 
@@ -19,13 +18,10 @@ const props = withDefaults(
   },
 )
 
-const { setState } = useTres()
+const { state, setState, extend } = useCientos()
 
 const controls = ref(null)
-const camera = inject<Ref<Camera>>('camera')
-const renderer = inject<Ref<WebGLRenderer>>('renderer')
 
-const { extend } = useCientos()
 extend({ OrbitControls })
 
 watch(controls, value => {
@@ -39,9 +35,9 @@ watch(controls, value => {
 
 <template>
   <TresOrbitControls
-    v-if="camera && renderer"
+    v-if="state.camera && state.renderer"
     ref="controls"
-    :args="[camera, renderer?.domElement]"
+    :args="[unref(state.camera), state.renderer?.domElement]"
     :enabling-dampling="enableDamping"
   />
 </template>

packages/cientos/src/core/Text3D.vue

@@ -1,4 +1,4 @@
-<script async setup lang="ts">
+<script setup lang="ts">
 import { TextGeometry, FontLoader } from 'three-stdlib'
 
 import { computed, useSlots } from 'vue'
@@ -34,7 +34,7 @@ const props = withDefaults(
     bevelThickness?: number
     bevelSize?: number
     bevelOffset?: number
-    bevelSegments?: number,
+    bevelSegments?: number
     center?: boolean
   }>(),
   {
@@ -46,9 +46,9 @@ const props = withDefaults(
     bevelSize: 0.02,
     bevelOffset: 0,
     bevelSegments: 4,
-    center:false
+    center: false,
   },
-  )
+)
 
 const { extend } = useCientos()
 

packages/cientos/src/core/TransformControls.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useTres } from '@tresjs/core'
-import { Camera, Object3D, Scene, WebGLRenderer, type Event } from 'three'
+import { Object3D, type Event } from 'three'
 import { TransformControls as TransformControlsImp } from 'three-stdlib'
-import { inject, computed, type Ref, unref, watch, shallowRef, ShallowRef, onUnmounted } from 'vue'
+import { computed, unref, watch, shallowRef, ShallowRef, onUnmounted } from 'vue'
 import { pick, hasSetter } from '../utils'
+import { useCientos } from './useCientos'
 
 const props = withDefaults(
   defineProps<{
@@ -29,9 +29,7 @@ const emit = defineEmits(['dragging', 'change', 'mouseDown', 'mouseUp', 'objectC
 
 let controls: ShallowRef<TransformControlsImp | undefined> = shallowRef()
 
-const camera = inject<Ref<Camera>>('camera')
-const renderer = inject<Ref<WebGLRenderer>>('renderer')
-const scene = inject<Ref<Scene>>('local-scene')
+const { state } = useCientos()
 
 const transformProps = computed(() =>
   pick(props, [
@@ -48,8 +46,6 @@ const transformProps = computed(() =>
     'showZ',
   ]),
 )
-const { state } = useTres()
-
 const onChange = () => emit('change', controls.value)
 const onMouseDown = () => emit('mouseDown', controls.value)
 const onMouseUp = () => emit('mouseUp', controls.value)
@@ -71,11 +67,11 @@ function addEventListeners(controls: TransformControlsImp) {
 watch(
   () => props.object,
   () => {
-    if (camera?.value && renderer?.value && scene?.value && props.object) {
-      controls.value = new TransformControlsImp(camera.value, unref(renderer).domElement)
+    if (state.camera?.value && state.renderer && state.scene && props.object) {
+      controls.value = new TransformControlsImp(state.camera.value, unref(state.renderer).domElement)
 
       controls.value.attach(unref(props.object))
-      scene.value.add(unref(controls) as TransformControlsImp)
+      state.scene.add(unref(controls) as TransformControlsImp)
 
       addEventListeners(unref(controls) as TransformControlsImp)
     }

packages/cientos/src/core/useCientos.ts

@@ -1,3 +1,4 @@
+import { useTres } from '@tresjs/core'
 import { inject } from 'vue'
 
 export function useCientos() {
@@ -6,7 +7,11 @@ export function useCientos() {
     (() => {
       console.warn('No extend function provided')
     })
+
+  const { state, setState } = inject('useTres', useTres())
   return {
+    state,
+    setState,
     extend,
   }
 }

packages/cientos/src/core/useEnvironment/component.ts

@@ -0,0 +1,36 @@
+import { EnvironmentOptions, EnvironmentPresetsType } from './const'
+import { CubeTexture, Texture, TextureEncoding } from 'three'
+import { defineComponent, PropType } from 'vue'
+
+import { useEnvironment } from '.'
+
+export const Environment = defineComponent({
+  name: 'Environment',
+  props: {
+    background: {
+      type: Boolean,
+      default: false,
+    },
+    blur: {
+      type: Number,
+      default: 0,
+    },
+    files: {
+      type: [String, Array],
+    },
+    encoding: Object as PropType<TextureEncoding>,
+    path: String,
+    preset: Object as PropType<EnvironmentPresetsType>,
+  },
+  async setup(props, { expose }) {
+    let texture: Texture | CubeTexture | null = null
+
+    expose({ getTexture: () => texture })
+
+    texture = await useEnvironment(props as EnvironmentOptions)
+
+    return () => {
+      texture
+    }
+  },
+})

packages/cientos/src/core/useEnvironment/const.ts

@@ -0,0 +1,16 @@
+import { TextureEncoding } from 'three'
+
+export type EnvironmentOptions = {
+  background?: boolean
+  blur?: number
+  files?: string | string[]
+  path?: string
+  preset?: EnvironmentPresetsType
+  encoding?: TextureEncoding
+}
+
+export const environmentPresets = {
+  sunset: 'venice/venice_sunset_4k.hdr',
+}
+
+export type EnvironmentPresetsType = keyof typeof environmentPresets

packages/cientos/src/core/useEnvironment/index.ts

@@ -0,0 +1,63 @@
+import { useLoader } from '@tresjs/core'
+import {
+  CubeReflectionMapping,
+  CubeTexture,
+  CubeTextureLoader,
+  EquirectangularReflectionMapping,
+  LinearEncoding,
+  sRGBEncoding,
+  Texture,
+} from 'three'
+import { RGBELoader } from 'three-stdlib'
+import { useCientos } from '../useCientos'
+import { EnvironmentOptions, environmentPresets } from './const'
+
+export async function useEnvironment({
+  files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
+  blur = 0,
+  background = false,
+  path = undefined,
+  preset = undefined,
+  encoding = undefined,
+}: Partial<EnvironmentOptions>): Promise<Texture | CubeTexture> {
+  const { state } = useCientos()
+
+  if (preset) {
+    if (!(preset in environmentPresets))
+      throw new Error('Preset must be one of: ' + Object.keys(environmentPresets).join(', '))
+    files = environmentPresets[preset]
+    path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/hdr/'
+  }
+
+  const isCubeMap = Array.isArray(files)
+
+  const loader = isCubeMap ? CubeTextureLoader : RGBELoader
+
+  const result = await useLoader(
+    // @ts-expect-error There is a bug in the types for useLoader
+    loader,
+    isCubeMap ? [files] : files,
+    (loader: any) => {
+      if (path) loader.setPath(path)
+      if (encoding) loader.encoding = encoding
+    },
+  )
+
+  const texture: Texture | CubeTexture = isCubeMap ? result[0] : result
+
+  if (texture) {
+    texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping
+    texture.encoding = encoding ?? isCubeMap ? sRGBEncoding : LinearEncoding
+  }
+
+  if (background && state.scene) {
+    state.scene.environment = texture
+    state.scene.background = texture
+
+    if (blur) {
+      state.scene.backgroundBlurriness = blur | 0
+    }
+  }
+
+  return texture
+}

packages/cientos/src/core/useFBX/component.ts

@@ -1,6 +1,7 @@
-import { Object3D, Scene } from 'three'
-import { defineComponent, inject, Ref } from 'vue'
+import { Object3D } from 'three'
+import { defineComponent } from 'vue'
 import { useFBX } from '.'
+import { useCientos } from '../useCientos'
 
 export const FBXModel = defineComponent({
   name: 'FBXModel',
@@ -11,7 +12,7 @@ export const FBXModel = defineComponent({
     },
   },
   async setup(props, { expose }) {
-    const scene = inject<Ref<Scene>>('local-scene')
+    const { state } = useCientos()
     let model: Object3D | null = null
 
     function getModel() {
@@ -21,8 +22,8 @@ export const FBXModel = defineComponent({
 
     model = await useFBX(props.path as string)
 
-    if (scene?.value && model.isObject3D) {
-      scene.value.add(model)
+    if (state.scene && model.isObject3D) {
+      state.scene.add(model)
     }
     return () => {
       model

packages/cientos/src/core/useGLTF/component.ts

@@ -1,6 +1,6 @@
-import { Scene } from 'three'
-import { defineComponent, inject, Ref } from 'vue'
+import { defineComponent } from 'vue'
 import { useGLTF } from '.'
+import { useCientos } from '../useCientos'
 
 export const GLTFModel = defineComponent({
   name: 'GLTFModel',
@@ -11,15 +11,15 @@ export const GLTFModel = defineComponent({
   },
 
   async setup(props, { expose }) {
-    const scene = inject<Ref<Scene>>('local-scene')
+    const { state } = useCientos()
 
     function getModel() {
       return model
     }
     expose({ getModel })
     const { scene: model } = await useGLTF(props.path as string, { draco: props.draco, decoderPath: props.decoderPath })
-    if (scene?.value) {
-      scene.value.add(model)
+    if (state.scene) {
+      state.scene.add(model)
     }
     return () => {
       model

packages/cientos/src/core/useGLTF/index.ts

@@ -1,6 +1,6 @@
 import { GLTFLoader, DRACOLoader } from 'three-stdlib'
 import { useLoader } from '@tresjs/core'
-import { TresObject } from '/@/types'
+import { Object3D } from 'three'
 
 export interface GLTFLoaderOptions {
   draco?: boolean
@@ -9,7 +9,7 @@ export interface GLTFLoaderOptions {
 
 export interface GLTFResult {
   animations: Array<THREE.AnimationClip>
-  nodes: Array<TresObject>
+  nodes: Array<Object3D>
   materials: Array<THREE.Material>
   scene: THREE.Scene
 }

packages/cientos/src/env.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="vite/client" />
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-declare module '*.glsl' {}
-
-declare global {
-  // Define the window interface, with type annotations for the properties and methods of the window object
-  interface Window {
-    // Define the location property, with a type of Location
-    __TRES__: {
-      app: App
-      version: string
-    }
-  }
-}

packages/cientos/src/index.ts

@@ -18,10 +18,11 @@ import Tetrahedron from './core/Tetrahedron.vue'
 import Icosahedron from './core/Icosahedron.vue'
 import Octahedron from './core/Octahedron.vue'
 import Dodecahedron from './core/Dodecahedron.vue'
+import { Environment } from './core/useEnvironment/component'
 
 export * from './core/useGLTF'
 export * from './core/useFBX'
-export * from './types'
+export * from './core/useEnvironment'
 export {
   OrbitControls,
   TransformControls,
@@ -43,4 +44,5 @@ export {
   Octahedron,
   Dodecahedron,
   useAnimations,
+  Environment,
 }

packages/cientos/src/types/index.ts

@@ -1,6 +0,0 @@
-import { Object3D } from 'three'
-
-export interface TresObject extends Object3D {
-  geometry: THREE.BufferGeometry
-  material: THREE.Material
-}

packages/cientos/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare module '*.glsl' {}

packages/cientos/tsconfig.json

@@ -10,7 +10,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "types": ["vite/client", "node", "@tresjs/core"],
+    "types": ["vite/client", "node"],
     "incremental": false,
     "skipLibCheck": true,
     "noUnusedLocals": false,
@@ -21,7 +21,7 @@
       "/@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "histoire.setup.ts", "histoire.setup.ts"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["dist", "node_modules", "src/**/*.cy.ts", "src/**/*.test.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/tres/CHANGELOG.md

@@ -1,3 +1,44 @@
+# 1.7.0 (2023-02-19)
+
+### Bug Fixes
+
+- **core:** add vueuse as normal dependency ([9ee971a](https://github.com/Tresjs/tres/commit/9ee971afdeb68fc5b4c98e277b03ff1fc7f6f3f4))
+- **core:** added check for fog ([0a0f7d3](https://github.com/Tresjs/tres/commit/0a0f7d39ace4e3705ec3d8f47ff51bda511ca3e3))
+- **core:** added correct error handling to renderer preset ([5a752a3](https://github.com/Tresjs/tres/commit/5a752a3c42765d4b429198cf9fff496318ada7d3))
+- **core:** added error handling to extend ([fcfbce9](https://github.com/Tresjs/tres/commit/fcfbce9a03d5ec85ab160b4cc0e99c254b715c1a))
+- **core:** added raw values to state rather than RefImp ([ba9a0a6](https://github.com/Tresjs/tres/commit/ba9a0a6334d8c5c578ac0187fb24dc5239695498))
+- **core:** added vueuse as peer dependency ([890f97e](https://github.com/Tresjs/tres/commit/890f97e14cf5d743cf23c95967bea01229a56ea6))
+- **core:** clean dependencies repeated both peer and dev ([0fb7b4c](https://github.com/Tresjs/tres/commit/0fb7b4c76aeab609a02a1d250962809e088a7c68))
+- **core:** remove annoying warnings from renderer props ([bdbe58e](https://github.com/Tresjs/tres/commit/bdbe58ed53bbbb5ead2722dca6243c1a2c87de62))
+- **core:** remove glsl plugin from core vite config ([6e70676](https://github.com/Tresjs/tres/commit/6e70676480a7cf1c53049a436154b5c847bab5fe))
+- **core:** remove histoire ([14ab727](https://github.com/Tresjs/tres/commit/14ab727685bcab4fa78addd620f1652700ca5613))
+- **core:** remove unused import ([9e4392d](https://github.com/Tresjs/tres/commit/9e4392dddd9d205c973f47d29ea6682db8c41bc4))
+- **core:** removed unused imports ([1387834](https://github.com/Tresjs/tres/commit/1387834ed30d5a98e32e8d6a7f166df2b4b2482f))
+- **core:** solved annoying warning messages about inject [Vue warn]: injection "local-scene" not found. [#107](https://github.com/Tresjs/tres/issues/107) ([f31ae49](https://github.com/Tresjs/tres/commit/f31ae49d282fe950f6d58e6dc05488faf3e5b073))
+
+- hmr nstance creator ([750c614](https://github.com/Tresjs/tres/commit/750c614cfb828e3033929ef173aa5cbc7158a9d4))
+- issue after removing playground in tres ([ccfce38](https://github.com/Tresjs/tres/commit/ccfce38c36ae2f51546d663e8d8eeef5bac5ed03))
+- make it work with new instance creator logic ([5c07f84](https://github.com/Tresjs/tres/commit/5c07f84e34b44a4d625b9c4e98acfe4274453a6d))
+- minor clean up ([50f6856](https://github.com/Tresjs/tres/commit/50f685600f63fa57deb5f5ba32a507821630cbfd))
+- recent problems with adding the controls to refs ([f0d53c9](https://github.com/Tresjs/tres/commit/f0d53c9d8b25685b738fe45a71a3bd8b9b217d9c))
+- remove disposal of the renderer ([9a9ee41](https://github.com/Tresjs/tres/commit/9a9ee41d2c6d716be994baa63e59cbfd6d1bf61a))
+- remove initial Orbitcontrol extend from plugin ([171ede4](https://github.com/Tresjs/tres/commit/171ede4ff61bbc6b9edd5f0e83859e956ab0e30b))
+- removing unused code ([1a9ead7](https://github.com/Tresjs/tres/commit/1a9ead7b4aa527f303a5a88046fabf238173f951))
+- **tres:** use three as dev dep on ([a3b7d31](https://github.com/Tresjs/tres/commit/a3b7d31334feffb8fc52a9aefee7d74788fc789e))
+
+- typing issues with useLoader and environment ([d6aca6f](https://github.com/Tresjs/tres/commit/d6aca6fc907ba4f57fa7ccd669a92da23ba34cd9))
+- use local-scene inject instead of composable to avoid different scene created from cientos ([33353f8](https://github.com/Tresjs/tres/commit/33353f875162a7540d8eb0cb6a7d14ca02ca614b))
+
+### Features
+
+- sorted out hmr disposal of objects ([42fa6e7](https://github.com/Tresjs/tres/commit/42fa6e767e7790c8f0ebd411804a79efbee4ff67))
+
+## 1.6.3 (2023-02-07)
+
+### Bug Fixes
+
+- **core:** add vueuse as normal dependency ([9ee971a](https://github.com/Tresjs/tres/commit/9ee971afdeb68fc5b4c98e277b03ff1fc7f6f3f4))
+
 ## 1.6.2 (2023-02-06)
 
 ### Bug Fixes