Merge pull request #82 from Tresjs/feature/playground

feat(playground): astro playground

apps/playground/.gitignore

@@ -0,0 +1,20 @@
+# 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

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

apps/playground/.vscode/launch.json

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

apps/playground/README.md

@@ -0,0 +1,50 @@
+# 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

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config'
+
+// https://astro.build/config
+import vue from '@astrojs/vue'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
+})

apps/playground/package.json

@@ -0,0 +1,32 @@
+{
+  "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/vue": "^1.2.2",
+    "astro": "^1.9.2",
+    "vue": "^3.2.45"
+  },
+  "devDependencies": {
+    "@tresjs/cientos": "workspace:^1.4.0",
+    "@tresjs/core": "workspace:^1.5.0",
+    "three": "^0.148.0"
+  }
+}

apps/playground/public/favicon.svg

@@ -0,0 +1,13 @@
+<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/src/components/Card.astro

@@ -0,0 +1,62 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-color: white;
+		background-image: var(--accent-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1rem 1.3rem;
+		border-radius: 0.35rem;
+		color: #111;
+		background-color: white;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+		color: #444;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent));
+	}
+</style>

apps/playground/src/components/GLTFModel.vue

@@ -0,0 +1,19 @@
+<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/TheExperience.vue

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

apps/playground/src/components/TransformControls.vue

@@ -0,0 +1,90 @@
+<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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+import { OrbitControls } from '@tresjs/cientos'
+
+const state = reactive({
+  shadows: true,
+  alpha: false,
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="state">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[8, 8, 8]" :fov="45" :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/env.d.ts

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

apps/playground/src/layouts/Layout.astro

@@ -0,0 +1,38 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = 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} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<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>

apps/playground/src/pages/_app.ts

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

apps/playground/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import TheExperience from '../components/TheExperience.vue';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		<TheExperience client:only />
+	</main>
+</Layout>
+

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

@@ -0,0 +1,11 @@
+---
+import GLTFModel from '/@/components/GLTFModel.vue';
+import Layout from '/@/layouts/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		<GLTFModel client:only />
+	</main>
+</Layout>
+

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

@@ -0,0 +1,11 @@
+---
+import TransformControls from '/@/components/TransformControls.vue';
+import Layout from '/@/layouts/Layout.astro';
+---
+
+<Layout title="Transform Controls.">
+	<main>
+		<TransformControls client:only />
+	</main>
+</Layout>
+

apps/playground/src/pages/vue/tres-basic.astro

@@ -0,0 +1,11 @@
+---
+import TresBasic from '/@/components/TresBasic.vue';
+import Layout from '/@/layouts/Layout.astro';
+---
+
+<Layout title="Tres Basic">
+	<main>
+		<TresBasic client:only />
+	</main>
+</Layout>
+

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

@@ -0,0 +1,11 @@
+---
+import TresDonut from '/@/components/TresDonut.vue';
+import Layout from '/@/layouts/Layout.astro';
+---
+
+<Layout title="Tres Donut 🍩">
+	<main>
+		<TresDonut client:only />
+	</main>
+</Layout>
+

apps/playground/tsconfig.json

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

packages/tres/histoire.config.ts

@@ -1,20 +0,0 @@
-import { defineConfig } from 'histoire'
-import { HstVue } from '@histoire/plugin-vue'
-
-export default defineConfig({
-  theme: {
-    title: 'TresJS',
-
-    logo: {
-      light: '/logo.svg',
-      dark: '/logo-dark.svg',
-    },
-  },
-  setupFile: './histoire.setup.ts',
-  plugins: [HstVue()],
-  defaultStoryProps: {
-    iconColor: '#00c5a5',
-    responsiveDisabled: true,
-    autoPropsDisabled: true,
-  },
-})

packages/tres/histoire.setup.ts

@@ -1,13 +0,0 @@
-import { defineSetupVue3 } from '@histoire/plugin-vue'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-import Tres from './src'
-
-export const setupVue3 = defineSetupVue3(({ app }) => {
-  app.use(Tres, {
-    prefix: 'Tres',
-    extends: {
-      OrbitControls,
-    },
-  })
-})

packages/tres/package.json

@@ -37,9 +37,6 @@
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
@@ -52,7 +49,6 @@
   },
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
-    "@histoire/plugin-vue": "0.11.7",
     "@tresjs/cientos": "workspace:^1.4.0",
     "@types/three": "^0.148.0",
     "@vitejs/plugin-vue": "^4.0.0",
@@ -61,7 +57,6 @@
     "@vueuse/core": "^9.7.0",
     "gl": "6.0.1",
     "happy-dom": "^8.1.0",
-    "histoire": "0.11.9",
     "kolorist": "^1.6.0",
     "pathe": "^1.0.0",
     "release-it": "^15.5.1",

packages/tres/src/examples/Basic.story.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { Color } from 'three'
-import { useTres } from '/@/core'
-
-const floorTeal = new Color('gray')
-const { state } = useTres()
-</script>
-<template>
-  <Story title="Basic">
-    <Variant title="playground">
-      <TresCanvas clear-color="#82DBC5" shadows alpha preserve-drawing-buffer>
-        <TresPerspectiveCamera :position="[11, 11, 11]" />
-        <TresScene>
-          <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-          <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>
-          <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 :color="floorTeal" />
-          </TresMesh>
-        </TresScene>
-      </TresCanvas>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/GUI/Tweakpane.story.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { Color } from 'three'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-
-useTweakPane()
-const floorTeal = new Color('gray')
-</script>
-<template>
-  <Story title="GUI/TweakPane">
-    <Variant title="playground">
-      <TresCanvas clear-color="#82DBC5" shadows alpha>
-        <TresPerspectiveCamera :position="[11, 11, 11]" />
-        <OrbitControls />
-        <TresScene>
-          <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>
-          <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 :color="floorTeal" />
-          </TresMesh>
-        </TresScene>
-      </TresCanvas>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/cientos/controls/OrbitControls.story.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-</script>
-<template>
-  <Story title="cientos/controls/OrbitControls">
-    <Variant title="playground">
-      <TresCanvas clear-color="#82DBC5" shadows alpha>
-        <OrbitControls />
-        <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-        <TresScene>
-          <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>
-
-          <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-        </TresScene>
-      </TresCanvas>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/cientos/controls/TransformControls.story.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { TransformControls } from '@tresjs/cientos'
-/* import { TransformControls, useTweakPane } from '../../../../../cientos/src' */
-import { reactive, ref } from 'vue'
-
-const boxRef = ref()
-</script>
-<template>
-  <Story title="cientos/controls/TransformControls">
-    <Variant title="playground">
-      <TresCanvas clear-color="#82DBC5" shadows alpha>
-        <TresPerspectiveCamera
-          :position="[5, 5, 5]"
-          :look-at="[0, 0, 0]"
-          :fov="45"
-          :aspect="1"
-          :near="0.1"
-          :far="1000"
-        />
-        <TresScene>
-          <TransformControls :object="boxRef" />
-          <TresMesh ref="boxRef" cast-shadow>
-            <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-            <TresMeshToonMaterial color="#4F4F4F" />
-          </TresMesh>
-          <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-        </TresScene>
-      </TresCanvas>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/lighting/RedBlue.story.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { OrbitControls } from '@tresjs/cientos'
-const redLightRef = ref(null)
-const blueLightRef = ref(null)
-</script>
-<template>
-  <Story title="lighting/RedBlue" icon="ph:lightbulb">
-    <Variant title="playground">
-      <TresCanvas shadows>
-        <OrbitControls />
-        <TresPerspectiveCamera :position="[5, 5, 5]" />
-        <TresScene>
-          <TresMesh :position="[0, 0, 0]" cast-shadow>
-            <TresSphereGeometry :args="[2, 32, 32]" />
-            <TresMeshStandardMaterial :roughness="0.4" />
-          </TresMesh>
-          <TresDirectionalLight ref="redLightRef" color="red" :position="[-8, 0, 0]" :intensity="0.7" cast-shadow />
-          <TresDirectionalLightHelper v-if="redLightRef" :args="[redLightRef, 5]" />
-          <TresDirectionalLight ref="blueLightRef" color="blue" :position="[8, 0, 0]" :intensity="0.7" cast-shadow />
-          <TresDirectionalLightHelper v-if="blueLightRef" :args="[blueLightRef, 5]" />
-        </TresScene>
-      </TresCanvas>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/models/gltf/AkuAku.vue

@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { useLoader } from '/@/core'
-const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
-</script>
-<template>
-  <TresMesh v-bind="scene" />
-</template>

packages/tres/src/examples/models/gltf/AkuAkuCientos.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-const { scene } = await useGLTF('/models/AkuAku.gltf')
-</script>
-<template>
-  <TresMesh v-bind="scene" />
-</template>

packages/tres/src/examples/models/gltf/Basic.story.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import AkuAku from './AkuAku.vue'
-</script>
-<template>
-  <Story title="models/GLTF/Basic">
-    <Variant title="playground">
-      <Suspense>
-        <TresCanvas clear-color="#82DBC5" shadows alpha>
-          <TresPerspectiveCamera :position="[11, 11, 11]" />
-          <OrbitControls />
-          <TresScene>
-            <AkuAku />
-            <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-          </TresScene>
-        </TresCanvas>
-      </Suspense>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/models/gltf/GLTFModel.story.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-<template>
-  <Story title="models/GLTF/GLTFModel">
-    <Variant title="playground">
-      <Suspense>
-        <TresCanvas clear-color="#82DBC5" shadows alpha>
-          <TresPerspectiveCamera :position="[11, 11, 11]" />
-          <OrbitControls />
-          <TresScene>
-            <TresAmbientLight :intensity="0.5" />
-            <GLTFModel path="/models/AkuAku.gltf" />
-            <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-          </TresScene>
-        </TresCanvas>
-      </Suspense>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/models/gltf/useGLTF.story.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import AkuAku from './AkuAkuCientos.vue'
-</script>
-<template>
-  <Story title="models/GLTF/useGLTF">
-    <Variant title="playground">
-      <Suspense>
-        <TresCanvas clear-color="#82DBC5" shadows alpha>
-          <TresPerspectiveCamera :position="[11, 11, 11]" />
-          <OrbitControls />
-          <TresScene>
-            <AkuAku />
-            <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-          </TresScene>
-        </TresCanvas>
-      </Suspense>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/shaders/blob/Blob.story.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { Vector2 } from 'three'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-import vertexShader from './shaders/vertex.glsl'
-import fragmentShader from './shaders/fragment.glsl'
-import { useRenderLoop } from '/@/core'
-import { Ref, ref } from 'vue'
-import { TresInstance } from '/@/types'
-
-const blobRef: Ref<TresInstance | null> = ref(null)
-const uniforms = {
-  uTime: { value: 0 },
-  uAmplitude: { value: new Vector2(0.1, 0.1) },
-  uFrequency: { value: new Vector2(20, 5) },
-}
-
-useTweakPane()
-
-const { onLoop, resume } = useRenderLoop()
-resume()
-onLoop(({ _delta, elapsed }) => {
-  if (blobRef.value) {
-    blobRef.value.material.uniforms.uTime.value = elapsed
-  }
-})
-</script>
-<template>
-  <Story title="shaders/blob">
-    <Variant title="playground">
-      <TresCanvas clear-color="#111" shadows alpha>
-        <TresPerspectiveCamera :position="[11, 11, 11]" />
-        <OrbitControls />
-        <TresScene>
-          <TresMesh ref="blobRef" :position="[0, 4, 0]">
-            <TresSphereGeometry :args="[2, 32, 32]" />
-            <TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />
-          </TresMesh>
-          <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
-            <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-            <TresMeshBasicMaterial color="#444" />
-          </TresMesh>
-        </TresScene>
-      </TresCanvas>
-    </Variant>
-  </Story>
-</template>

packages/tres/src/examples/shaders/blob/shaders/fragment.glsl

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

packages/tres/src/examples/shaders/blob/shaders/vertex.glsl

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