Skip to content

Commit 1eee040

Browse files
alvarosabualvarosabu
authored
Merge pull request #125 from Tresjs/chore/setup-playground
chore(playground): restructure playground routing
2 parents 4ac1d6e + 1644e66 commit 1eee040

File tree

12 files changed

+603
-506
lines changed

12 files changed

+603
-506
lines changed

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { tresLintConfig } from '@tresjs/eslint-config'
22

33
export default tresLintConfig({
4+
ignores: ['**/node_modules/**', 'stats.html'],
45
})

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,21 +59,21 @@
5959
"vue": ">=3.3.4"
6060
},
6161
"dependencies": {
62-
"@unocss/core": "^65.4.0",
62+
"@unocss/core": "^65.4.2",
6363
"@vueuse/components": "^12.4.0"
6464
},
6565
"devDependencies": {
6666
"@histoire/plugin-vue": "^0.17.17",
6767
"@iconify-json/ic": "^1.2.2",
68-
"@iconify/json": "^2.2.295",
68+
"@iconify/json": "^2.2.296",
6969
"@release-it/conventional-changelog": "^10.0.0",
7070
"@tresjs/eslint-config": "^1.4.0",
7171
"@tresjs/eslint-config-vue": "^0.2.1",
7272
"@typescript-eslint/eslint-plugin": "^8.20.0",
7373
"@typescript-eslint/parser": "^8.20.0",
7474
"@vitejs/plugin-vue": "^5.2.1",
75-
"@vitest/browser": "^2.1.8",
76-
"@vitest/ui": "^2.1.8",
75+
"@vitest/browser": "^3.0.1",
76+
"@vitest/ui": "^3.0.1",
7777
"@vue/test-utils": "^2.4.6",
7878
"@vueuse/core": "^12.4.0",
7979
"@vueuse/shared": "^12.4.0",
@@ -82,19 +82,19 @@
8282
"eslint-plugin-vue": "^9.32.0",
8383
"histoire": "^0.17.17",
8484
"kolorist": "^1.8.0",
85-
"pathe": "^2.0.1",
85+
"pathe": "^2.0.2",
8686
"release-it": "^18.1.1",
8787
"rollup-plugin-analyzer": "^4.0.0",
8888
"rollup-plugin-visualizer": "^5.14.0",
8989
"typescript": "^5.7.3",
90-
"unocss": "^65.4.0",
90+
"unocss": "^65.4.2",
9191
"unplugin-vue-components": "^28.0.0",
9292
"vite": "^6.0.7",
9393
"vite-plugin-banner": "^0.8.0",
9494
"vite-plugin-css-injected-by-js": "^3.5.2",
9595
"vite-plugin-dts": "^4.5.0",
9696
"vitepress": "1.5.0",
97-
"vitest": "^2.1.8",
97+
"vitest": "^3.0.1",
9898
"vue": "^3.5.13",
9999
"webdriverio": "^9.5.7"
100100
}

‎playground/src/App.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1-
<script setup lang="ts"></script>
1+
<script setup lang="ts">
2+
import { watch } from 'vue'
3+
import { useRoute } from 'vue-router'
4+
5+
const route = useRoute()
6+
function setBodyClass(routeName: string) {
7+
document.title = `TresJS Leches Playground - ${routeName}`
8+
document.body.className = routeName
9+
}
10+
watch([route], () => setBodyClass(route.name?.toString() ?? ''))
11+
</script>
212

313
<template>
4-
<router-view />
14+
<Suspense>
15+
<router-view />
16+
</Suspense>
517
</template>

‎playground/src/pages/folders.vue‎ renamed to ‎playground/src/pages/advanced/folders.vue‎

File renamed without changes.

‎playground/src/pages/basic/controls.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script setup lang="ts">
2+
import { Vector3 } from 'three'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { OrbitControls } from '@tresjs/cientos'
5+
6+
import { TresLeches, useControls } from '@tresjs/leches'
7+
8+
/* import '@tresjs/leches/style.css' */
9+
import { reactive, ref } from 'vue'
10+
11+
const gl = reactive({
12+
clearColor: '#82DBC5',
13+
})
14+
15+
const cameraRef = ref()
16+
const boxRef = ref()
17+
useControls('fpsgraph')
18+
19+
const { wireframe, camPos, position, rotation } = useControls({
20+
wireframe: false,
21+
camPos: new Vector3(4, 4, 4),
22+
position: new Vector3(0, 1, 2),
23+
rotation: {
24+
value: new Vector3(5, 5, 5),
25+
},
26+
select: {
27+
value: 'option1',
28+
options: ['option1', 'option2', 'option3'],
29+
icon: 'i-carbon-checkmark',
30+
},
31+
range: {
32+
value: 1,
33+
min: 0,
34+
max: 10,
35+
step: 0.1,
36+
},
37+
})
38+
</script>
39+
40+
<template>
41+
<TresLeches />
42+
<TresCanvas v-bind="gl">
43+
<TresPerspectiveCamera
44+
ref="cameraRef"
45+
:position="[camPos.value.x, camPos.value.y, camPos.value.z]"
46+
:look-at="[1, 2, 0]"
47+
/>
48+
<TresMesh
49+
ref="boxRef"
50+
:position="[position.value.x, position.value.y, position.value.z]"
51+
:rotation="[rotation.value.x, rotation.value.y, rotation.value.z]"
52+
:scale="[2, 2, 2]"
53+
>
54+
<TresBoxGeometry />
55+
<TresMeshNormalMaterial
56+
color="teal"
57+
:wireframe="wireframe.value"
58+
/>
59+
</TresMesh>
60+
<TresGridHelper />
61+
<TresAmbientLight :intensity="1" />
62+
<TresDirectionalLight
63+
:position="[3, 3, 3]"
64+
:intensity="1"
65+
/>
66+
<OrbitControls />
67+
</TresCanvas>
68+
</template>

‎playground/src/pages/index.vue‎

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,66 @@
11
<script setup lang="ts">
2-
import { Vector3 } from 'three'
3-
import { TresCanvas } from '@tresjs/core'
4-
import { OrbitControls } from '@tresjs/cientos'
2+
import {
3+
advancedRoutes,
4+
basicRoutes,
5+
} from '../router/routes'
56
6-
import { TresLeches, useControls } from '@tresjs/leches'
7-
8-
/* import '@tresjs/leches/style.css' */
9-
import { reactive, ref } from 'vue'
10-
11-
const gl = reactive({
12-
clearColor: '#82DBC5',
13-
})
14-
15-
const cameraRef = ref()
16-
const boxRef = ref()
17-
useControls('fpsgraph')
18-
19-
const { wireframe, camPos, position, rotation } = useControls({
20-
wireframe: false,
21-
camPos: new Vector3(4, 4, 4),
22-
position: new Vector3(0, 1, 2),
23-
rotation: {
24-
value: new Vector3(5, 5, 5),
25-
},
26-
select: {
27-
value: 'option1',
28-
options: ['option1', 'option2', 'option3'],
29-
icon: 'i-carbon-checkmark',
30-
},
31-
range: {
32-
value: 1,
33-
min: 0,
34-
max: 10,
35-
step: 0.1,
36-
},
37-
})
7+
const sections = [
8+
{ icon: '📦', title: 'Basic', routes: basicRoutes },
9+
{ icon: '🤓', title: 'Advanced', routes: advancedRoutes },
10+
]
3811
</script>
3912

4013
<template>
41-
<TresLeches />
42-
<TresCanvas v-bind="gl">
43-
<TresPerspectiveCamera
44-
ref="cameraRef"
45-
:position="[camPos.value.x, camPos.value.y, camPos.value.z]"
46-
:look-at="[1, 2, 0]"
47-
/>
48-
<TresMesh
49-
ref="boxRef"
50-
:position="[position.value.x, position.value.y, position.value.z]"
51-
:rotation="[rotation.value.x, rotation.value.y, rotation.value.z]"
52-
:scale="[2, 2, 2]"
53-
>
54-
<TresBoxGeometry />
55-
<TresMeshNormalMaterial
56-
color="teal"
57-
:wireframe="wireframe.value"
58-
/>
59-
</TresMesh>
60-
<TresGridHelper />
61-
<TresAmbientLight :intensity="1" />
62-
<TresDirectionalLight
63-
:position="[3, 3, 3]"
64-
:intensity="1"
65-
/>
66-
<OrbitControls />
67-
</TresCanvas>
14+
<div
15+
class="container mx-auto max-w-3xl font-sans text-xs color-gray bg-white"
16+
>
17+
<div class="mx-4">
18+
<div
19+
class="mt-24 mb-12 text-center align-baseline items-center gap-6 sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse sm:justify-left"
20+
>
21+
<div>
22+
🍰
23+
</div>
24+
<div class="sm:w-2/3">
25+
<h1
26+
class="w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3 sm:mx-none sm:w-1/2 sm:max-w-72"
27+
>
28+
<span class="text-tres-primary">TresJS Leches</span> Playground
29+
</h1>
30+
<p class="text-lg">Testing zone for TresJS/leches</p>
31+
</div>
32+
</div>
33+
<div
34+
class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4"
35+
>
36+
<div
37+
v-for="{ title, routes, icon } in sections"
38+
:key="title"
39+
class="p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded sm:my-0"
40+
>
41+
<div
42+
class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded"
43+
>
44+
{{ icon }}
45+
</div>
46+
<h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
47+
{{ title }}
48+
</h2>
49+
<div v-if="routes.length">
50+
<div v-for="route in routes" :key="route.name" class="link-wrapper">
51+
<router-link
52+
class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
53+
:to="route.path"
54+
>
55+
<span>{{ route.name }} </span>
56+
</router-link>
57+
</div>
58+
</div>
59+
<div v-else>
60+
(empty)
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
6866
</template>

‎playground/src/router.ts‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎playground/src/router/index.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createRouter, createWebHistory } from 'vue-router'
2+
import { allRoutes } from './routes'
3+
4+
const routes = [
5+
{
6+
path: '/',
7+
name: 'Home',
8+
component: () => import('../pages/index.vue'),
9+
},
10+
...allRoutes,
11+
12+
]
13+
export const router = createRouter({
14+
history: createWebHistory(),
15+
routes,
16+
})

‎playground/src/router/routes/advanced.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const advancedRoutes = [
2+
{
3+
path: '/advanced/folders',
4+
name: 'Folders',
5+
component: () => import('../../pages/advanced/folders.vue'),
6+
},
7+
]

‎playground/src/router/routes/basic.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const basicRoutes = [
2+
{
3+
path: '/basic/controls',
4+
name: 'Controls',
5+
component: () => import('../../pages/basic/controls.vue'),
6+
},
7+
]

0 commit comments

Comments
 (0)