chore: added playground potions

playground/components.d.ts

@@ -8,22 +8,37 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
+    Books: typeof import('./src/components/potions-classroom/Books.vue')['default']
+    Bottles: typeof import('./src/components/potions-classroom/Bottles.vue')['default']
+    Bricks: typeof import('./src/components/potions-classroom/Bricks.vue')['default']
     CameraOperator: typeof import('./src/components/CameraOperator.vue')['default']
     Cameras: typeof import('./src/components/Cameras.vue')['default']
+    Cauldron: typeof import('./src/components/potions-classroom/Cauldron.vue')['default']
+    Chalkboard: typeof import('./src/components/potions-classroom/Chalkboard.vue')['default']
     copy: typeof import('./src/components/TheBasic copy.vue')['default']
     DanielTest: typeof import('./src/components/DanielTest.vue')['default']
     DebugUI: typeof import('./src/components/DebugUI.vue')['default']
     DeleteMe: typeof import('./src/components/DeleteMe.vue')['default']
+    Experience: typeof import('./src/components/potions-classroom/Experience.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']
+    FloatingCandles: typeof import('./src/components/potions-classroom/FloatingCandles.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
+    Jars: typeof import('./src/components/potions-classroom/Jars.vue')['default']
+    Lamp: typeof import('./src/components/potions-classroom/Lamp.vue')['default']
     LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default']
     MeshWobbleMaterial: typeof import('./src/components/meshWobbleMaterial/index.vue')['default']
+    Mortar: typeof import('./src/components/potions-classroom/Mortar.vue')['default']
     MultipleCanvas: typeof import('./src/components/MultipleCanvas.vue')['default']
     PortalJourney: typeof import('./src/components/portal-journey/index.vue')['default']
+    PotionsClassroom: typeof import('./src/components/potions-classroom/index.vue')['default']
     Responsiveness: typeof import('./src/components/Responsiveness.vue')['default']
+    Room: typeof import('./src/components/potions-classroom/Room.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ShadersExperiment: typeof import('./src/components/shaders-experiment/index.vue')['default']
+    Skulls: typeof import('./src/components/potions-classroom/Skulls.vue')['default']
+    Stands: typeof import('./src/components/potions-classroom/Stands.vue')['default']
+    Table: typeof import('./src/components/potions-classroom/Table.vue')['default']
     TestSphere: typeof import('./src/components/TestSphere.vue')['default']
     Text3D: typeof import('./src/components/Text3D.vue')['default']
     TheBasic: typeof import('./src/components/TheBasic.vue')['default']
@@ -45,5 +60,6 @@ declare module 'vue' {
     TresLechesTest: typeof import('./src/components/TresLechesTest.vue')['default']
     Udsz: typeof import('./src/components/udsz/index.vue')['default']
     VectorSetProps: typeof import('./src/components/VectorSetProps.vue')['default']
+    Windows: typeof import('./src/components/potions-classroom/Windows.vue')['default']
   }
 }

playground/package.json

@@ -15,9 +15,9 @@
   "devDependencies": {
     "@tresjs/leches": "0.15.0-next.3",
     "@tweakpane/plugin-essentials": "^0.2.0",
-    "unplugin-auto-import": "^0.17.1",
+    "unplugin-auto-import": "^0.17.2",
     "vite-plugin-glsl": "^1.2.0",
-    "vite-plugin-qrcode": "^0.2.2",
-    "vue-tsc": "^1.8.22"
+    "vite-plugin-qrcode": "^0.2.3",
+    "vue-tsc": "^1.8.25"
   }
 }

playground/src/components/potions-classroom/Books.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF(
+  '/models/potions-classroom/wizard-potions-classroom.glb',
+  {
+    draco: true,
+  },
+)
+
+const books = Object.values(nodes).filter(node => node.name.includes('Book'))
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+books.forEach((book) => {
+  book.material = bakedMaterial
+})
+</script>
+
+<template>
+  <primitive
+    v-for="book of books"
+    :object="book"
+  />
+</template>

playground/src/components/potions-classroom/Bottles.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF(
+  '/models/potions-classroom/wizard-potions-classroom.glb',
+  {
+    draco: true,
+  },
+)
+
+const bottles = Object.values(nodes).filter(node => node.name.includes('Bottle'))
+</script>
+
+<template>
+  <primitive
+    v-for="(bottle, $index) of bottles"
+    :key="$index"
+    :object="bottle"
+  />
+</template>

playground/src/components/potions-classroom/Bricks.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF(
+  '/models/potions-classroom/wizard-potions-classroom.glb',
+  {
+    draco: true,
+  },
+)
+
+const bricks = Object.values(nodes).filter(node => node.name.includes('Brick'))
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+bricks.forEach((brick) => {
+  brick.material = bakedMaterial
+})
+</script>
+
+<template>
+  <primitive
+    v-for="brick of bricks"
+    :key="brick.uuid"
+    :object="brick"
+  />
+</template>

playground/src/components/potions-classroom/Cauldron.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { MeshStandardMaterial, Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+import { useRenderLoop } from '@tresjs/core'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes, materials } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Cauldron.material = bakedMaterial
+nodes.Heater.material = bakedMaterial
+nodes.Cauldron_Stand.material = bakedMaterial
+nodes.Spon.material = bakedMaterial
+
+const potionMaterial: MeshStandardMaterial = materials.liquid as MeshStandardMaterial
+potionMaterial.emissiveIntensity = 20
+nodes.Potion.material = materials.liquid
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+  nodes.Spon.rotation.y += delta * 0.1
+  nodes.Spon.position.y += Math.sin(delta) * 0.002
+})
+</script>
+
+<template>
+  <primitive :object="nodes.Potion" />
+  <primitive :object="nodes.Heater" />
+  <primitive :object="nodes.Cauldron" />
+  <primitive :object="nodes.Cauldron_Stand" />
+  <primitive :object="nodes.Spon" />
+</template>

playground/src/components/potions-classroom/Chalkboard.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF(
+  '/models/potions-classroom/wizard-potions-classroom.glb',
+  {
+    draco: true,
+  },
+)
+</script>
+
+<template>
+  <primitive :object="nodes.Chalkboard" />
+</template>

playground/src/components/potions-classroom/Experience.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useTexture } from '@tresjs/core'
+
+const tableTexture = await useTexture(['/models/potions-classroom/table.png'])
+tableTexture.flipY = false
+const roomTexture = await useTexture(['/models/potions-classroom/room.png'])
+roomTexture.flipY = false
+</script>
+
+<template>
+  <template v-if="tableTexture">
+    <Table :texture="tableTexture" />
+    <Room :texture="roomTexture" />
+    <Cauldron :texture="tableTexture" />
+    <Stands :texture="roomTexture" />
+    <Bricks :texture="roomTexture" />
+    <Books :texture="tableTexture" />
+    <Bottles />
+    <Chalkboard :texture="roomTexture" />
+    <Lamp :texture="tableTexture" />
+    <Mortar :texture="tableTexture" />
+    <Windows :texture="tableTexture" />
+    <Skulls :texture="tableTexture" />
+    <FloatingCandles />
+    <Jars />
+  </template>
+</template>

playground/src/components/potions-classroom/FloatingCandles.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useGLTF, Levioso } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const floatingCandle = Object.values(nodes).filter(node => node.name.includes('FloatingCandle'))
+</script>
+
+<template>
+  <Levioso
+    v-for="candle of floatingCandle"
+    :key="candle.uuid"
+  >
+    <primitive :object="candle" />
+  </Levioso>
+  <Levioso>
+    <TresPointLight
+      :position="[0, 8, 0]"
+      color="#FF6619"
+      :intensity="2"
+      :distance="10"
+      :decay="2"
+    />
+  </Levioso>
+</template>

playground/src/components/potions-classroom/Jars.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const jars = Object.values(nodes).filter(node => node.name.includes('Jar'))
+</script>
+
+<template>
+  <primitive
+    v-for="jar of jars"
+    :key="jar.uuid"
+    :object="jar"
+  />
+</template>

playground/src/components/potions-classroom/Lamp.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Lamp.traverse((child: any) => {
+  if (child.isMesh) {
+    child.material = bakedMaterial
+  }
+})
+</script>
+
+<template>
+  <primitive :object="nodes.Lamp" />
+  <primitive :object="nodes.Bulb" />
+  <primitive :object="nodes.Bulb001" />
+</template>

playground/src/components/potions-classroom/Mortar.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF(
+  '/models/potions-classroom/wizard-potions-classroom.glb',
+  {
+    draco: true,
+  },
+)
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Mortar.material = bakedMaterial
+</script>
+
+<template>
+  <primitive :object="nodes.Mortar" />
+</template>

playground/src/components/potions-classroom/Room.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Room.material = bakedMaterial
+nodes.Floor.material = bakedMaterial
+</script>
+
+<template>
+  <primitive :object="nodes.Room" />
+  <primitive :object="nodes.Floor" />
+</template>

playground/src/components/potions-classroom/Skulls.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+import { useTexture } from '@tresjs/core'
+
+const { nodes } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const boneTexture = await useTexture(['/models/potions-classroom/skull.png'])
+
+const skulls = Object.values(nodes).filter(node => node.name.includes('Skull'))
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: boneTexture,
+  side: DoubleSide,
+})
+
+skulls.forEach((skull) => {
+  skull.material = bakedMaterial
+})
+</script>
+
+<template>
+  <primitive
+    v-for="skull of skulls"
+    :key="skull.uuid"
+    :object="skull"
+  />
+  <TresPointLight
+    :position="skulls[1].position"
+    color="#2ddb4e"
+    :distance="10"
+    :intensity="2"
+    :decay="2"
+  />
+</template>

playground/src/components/potions-classroom/Stands.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Stands.material = bakedMaterial
+nodes.Stand_Individual.material = bakedMaterial
+</script>
+
+<template>
+  <primitive :object="nodes.Stands" />
+  <primitive :object="nodes.Stand_Individual" />
+  <primitive :object="nodes.Candle" />
+  <TresPointLight
+    :args="['#FF6619', 2, 10, 2]"
+    :position="nodes.Candle"
+    color="#FF6619"
+    :intensity="2"
+    :distance="10"
+    :decay="2"
+  />
+</template>

playground/src/components/potions-classroom/Table.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF('/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Table.children.forEach((child) => {
+  if (child.isMesh) {
+    child.material = bakedMaterial
+  }
+})
+
+const stools = Object.values(nodes).filter(node => node.name.includes('Stool'))
+
+stools.forEach((stool) => {
+  stool.material = bakedMaterial
+})
+</script>
+
+<template>
+  <primitive :object="nodes.Table" />
+  <primitive
+    v-for="stool of stools"
+    :object="stool"
+  />
+</template>

playground/src/components/potions-classroom/Windows.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF(
+  '/models/potions-classroom/wizard-potions-classroom.glb',
+  {
+    draco: true,
+  },
+)
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Window_Grid.material = bakedMaterial
+</script>
+
+<template>
+  <primitive :object="nodes.Window_Glass" />
+  <primitive :object="nodes.Window_Grid" />
+</template>

playground/src/components/potions-classroom/index.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { BasicShadowMap } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { useProgress } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = reactive({
+  clearColor: '#242424',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+})
+
+const { hasFinishLoading, progress } = await useProgress()
+
+const ctx = ref(null)
+
+watchEffect(() => {
+  if (!ctx.value) return
+  console.log('ctx', ctx.value)
+})
+
+const { showScene } = useControls({
+  showScene: true,
+})
+
+useControls({
+  button: {
+    label: 'Render dispose',
+    type: 'button',
+    onClick() {
+      ctx.value.dispose()
+    },
+  },
+
+})
+</script>
+
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="!hasFinishLoading"
+      class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px text-white">
+        Loading... {{ progress }} %
+        <i class="i-game-icons-snitch-quidditch-ball animate-tada text-yellow" />
+      </div>
+    </div>
+  </Transition>
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    ref="ctx"
+  >
+    <TresPerspectiveCamera
+      :position="[11, 15, 11]"
+      :look-at="[0, 4, 0]"
+    />
+    <Suspense>
+      <Experience v-if="showScene" />
+    </Suspense>
+    <TresFog
+      :color="0x242424"
+      :near="1"
+      :far="100"
+    />
+    <TresAmbientLight :intensity="2" />
+  </TresCanvas>
+</template>

playground/src/pages/PotionsClass.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <Suspense>
+    <PotionsClassroom />
+  </Suspense>
+</template>

playground/src/router.ts

@@ -76,6 +76,11 @@ const routes = [
     name: 'Perf',
     component: () => import('./pages/perf/index.vue'),
   },
+  {
+    path: '/potions-classroom',
+    name: 'Potions',
+    component: () => import('./pages/PotionsClass.vue'),
+  },
   {
     path: '/empty',
     name: 'empty',

playground/vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@tresjs/core': resolve(__dirname, '../src/index.ts'),
+      '@tresjs/core': resolve(__dirname, '../dist/tres.js'),
     },
     dedupe: ['three'],
   },

src/composables/useTresContextProvider/index.ts

@@ -1,4 +1,4 @@
-import { toValue, useElementSize, useWindowSize } from '@vueuse/core'
+import { toValue, useElementSize, useFps, useMemory, useWindowSize } from '@vueuse/core'
 import { inject, provide, readonly, shallowRef, computed, ref } from 'vue'
 import type { Camera, EventDispatcher, Scene, WebGLRenderer } from 'three'
 import { Raycaster } from 'three'
@@ -85,6 +85,7 @@ export function useTresContextProvider({
   }
 
   provide('useTres', toProvide)
+
   return toProvide
 }