Merge branch 'feature/25-extend-catalog-in-cientos' into feature/15-text3d-cientos

docs/.vitepress/config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vitepress'
-import { version } from '../../package.json'
+import { version } from '../../packages/tres/package.json'
 
 export default defineConfig({
   title: 'TresJS',
@@ -17,10 +17,17 @@ export default defineConfig({
           { text: 'Your first Scene', link: '/guide/your-first-scene' },
         ],
       },
-      /*    {
+      {
         text: 'API',
+        items: [
+          { text: 'Renderer', link: '/api/renderer' },
+          {
+            text: 'Instances, arguments and props',
+            link: '/api/instances-arguments-and-props',
+          },
+        ],
       },
-      {
+      /*{
         text: 'Examples',
       }, */
       {

docs/.vitepress/theme/components/FirstScene.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { Color, sRGBEncoding, ACESFilmicToneMapping } from 'three'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-
-import Cone from './Cone.vue'
-import Cube from './Cube.vue'
-import Sphere from './Sphere.vue'
-import Ground from './Ground.vue'
-
+import { OrbitControls } from '@tresjs/cientos'
 const LightRef = ref()
 
-useTweakPane()
-
 onMounted(() => {
   LightRef.value.shadow.mapSize.set(1024, 1024)
   LightRef.value.shadow.camera.near = 0.5

docs/.vitepress/theme/index.ts

@@ -8,8 +8,11 @@ import StackBlitzEmbed from './components/StackBlitzEmbed.vue'
 export default {
   ...DefaultTheme,
   enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
     ctx.app.component('FirstScene', FirstScene)
     ctx.app.component('StackBlitzEmbed', StackBlitzEmbed)
     ctx.app.use(Tres)
+
+    console.log(ctx)
   },
 }

docs/advanced/extending.md

@@ -28,3 +28,34 @@ This will automatically add a `<TresOrbitControls>` to the catalogue, so you can
   </TresCanvas>
 </template>
 ```
+
+## Extending an element dynamically <Badge type="tip" text="^1.1.0" />
+
+Or you can also add it dynamically in your components:
+
+```vue{2,3,5,8,17,19}
+<script setup lang="ts">
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+
+const { extend } = useCatalogue()
+
+// Add the element to the catalogue
+extend({ TextGeometry, OrbitControls })
+
+/* Rest of the code */
+</script>
+
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <TresScene>
+      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+      <TresMesh>
+        <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+        <TresMeshMatcapMaterial :matcap="matcapTexture" />
+      </TresMesh>
+    </TresScene>
+  </TresCanvas>
+</template>
+```

docs/api/instances-arguments-and-props.md

@@ -0,0 +1,122 @@
+# Instances
+
+The core idea of **Tres** is an _autogenerated catalogue_ of all the ThreeJS elements. This catalogue is generated from the ThreeJS source code, so it's always up to date.
+
+When using ThreeJS, you need to import the elements you want to use. For example, if you want to use a `PerspectiveCamera`, you need to import it from the `three` package:
+
+```js
+import { PerspectiveCamera } from 'three'
+
+const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+```
+
+With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+This mean that you can the same [documentation](https://threejs.org/docs/) as you where using plain ThreeJS, but with the power of Vue.
+
+## Declaring objects
+
+If we follow this argument, you should be able to lay out an instance like this: ❌
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+But with **Tres** this is not needed, you can define properties declaratively like this: ✅
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+## Arguments
+
+Some ThreeJS objects have arguments, for example, the `PerspectiveCamera` constructor has the following arguments:
+
+- `fov` - Camera frustum vertical field of view.
+- `aspect` - Camera frustum aspect ratio.
+- `near` - Camera frustum near plane.
+- `far` - Camera frustum far plane.
+
+To pass these arguments to the `TresPerspectiveCamera` component, you can use the `args` prop:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+This is the same as doing this:
+
+```ts
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+```
+
+## rops
+
+You can also pass props to the component, for example, the `TresAmbientLight` has a `intensity` property, so you can pass it to the component like this:
+
+```html
+<TresAmbientLight :intensity="0.5" />
+```
+
+### Set
+
+All properties whose underlying object has a `.set()` method have a shortcut to recieve the value as an array. For example, the `TresPerspectiveCamera` has a `position` property, which is a `Vector3` object, so you can pass it to the component like this:
+
+```html
+<TresPerspectiveCamera :position="[1, 2, 3]" />
+```
+
+### Scalar
+
+Another shortcut you can use is pass a scalar value to a property that expects a `Vector3` object, using the same value for the rest of the Vector:
+
+```html
+<TresPerspectiveCamera :position="5" /> ✅
+```
+
+```html
+<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
+```
+
+### Colors
+
+You can pass colors to the components using the `color` prop, which accepts a string with the color name or a hex value:
+
+```html
+<TresAmbientLight color="teal" /> ✅
+```
+
+```html
+<TresAmbientLight color="#008080" /> ✅
+```
+
+### Methods
+
+Some underlying properties are actually methods, the `TresPerspectiveCamera` has a `lookAt` method inherit from [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), so you can pass it the coords to the component like this:
+
+```html
+<TresPerspectiveCamera :look-at="[1, 2, 3]" />
+```

docs/api/renderer.md

@@ -0,0 +1,33 @@
+# Renderer
+
+The `Renderer` component is the main component of Tres. It's the one that creates the ThreeJS `WebGLRenderer` and define your Tres Scene.
+
+```vue{2,7}
+<template>
+  <TresCanvas shadows :output-encoding="sRGBEncoding">
+    <TresPerspectiveCamera />
+    <TresScene>
+      <!-- Your scene goes here -->
+    </TresScene>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop                        | Description                                                                                                                                                     | Default            |
+| --------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| **shadows**                 | Enable shadows in the Renderer                                                                                                                                  | `false`            |
+| **shadowMapType**           | Set the shadow map type                                                                                                                                         | `PCFSoftShadowMap` |
+| **physicallyCorrectLights** | Whether to use physically correct lighting mode. See the [lights / physical example](https://threejs.org/examples/#webgl_lights_physical).                      | `false`            |
+| **outputEncoding**          | Defines the output encoding                                                                                                                                     | `LinearEncoding`   |
+| **toneMapping**             | Defines the tone mapping exposure used by the renderer.                                                                                                         | `NoToneMapping`    |
+| **context**                 | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)               |                    |
+| **powerPreference**         | Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be "high-performance", "low-power" or "default". | `default`          |
+| **preserveDrawingBuffer**   | Whether to preserve the buffers until manually cleared or overwritten..                                                                                         | `false`            |
+| **clearColor**              | The color the renderer will use to clear the canvas.                                                                                                            | `#000000`          |
+| **windowSize**              | Whether to use the window size as the canvas size or the parent element.                                                                                        | `false`            |
+
+## Defaults
+
+Tres tries to be as less opinionated as possible. That's why it doesn't set almost any default value for the `Renderer` component. You need to set the props you want to use. The only exception is the `antialias` prop. It's set to `true` by default.

docs/index.md

@@ -32,4 +32,7 @@ features:
   - icon: 🥰
     title: Keeps up to date
     details: It brings all the updated features of ThreeJS right away.
+  - icon: 🌳
+    title: Ecosystem
+    details: Extend the core functionality with packages like `cientos` and `postprocessing`. Or add your own.
 ---

package.json

@@ -47,7 +47,7 @@
     "@changesets/cli": "^2.25.2",
     "@stackblitz/sdk": "^1.8.1",
     "@tresjs/cientos": "workspace:^1.0.0",
-    "@tresjs/core": "workspace:^1.0.0",
+    "@tresjs/core": "workspace:^1.1.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-cli": "^2.2.2",
@@ -55,7 +55,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.7.0",
     "prettier": "^2.7.1",
-    "vitepress": "1.0.0-alpha.26",
+    "vitepress": "1.0.0-alpha.29",
     "vue": "^3.2.41",
     "vue-eslint-parser": "^9.1.0"
   }

packages/cientos/package.json

@@ -36,7 +36,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
   },
   "peerDependencies": {
-    "@tresjs/core": "workspace:^1.0.0",
+    "@tresjs/core": "workspace:^1.1.0",
     "three": "latest",
     "vue": "^3.2.45"
   },
@@ -54,7 +54,7 @@
     "vite-plugin-dts": "^1.7.0"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^1.0.0",
+    "@tresjs/core": "workspace:^1.1.0",
     "three-stdlib": "^2.17.3"
   }
 }

packages/cientos/src/core/OrbitControls.vue

@@ -1,9 +1,57 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import { Camera, Vector3, WebGLRenderer } from 'three'
+import { OrbitControls } from 'three-stdlib'
+import { inject, ref, type Ref } from 'vue'
+
+import { useCientos } from './useCientos'
+
+const props = withDefaults(
+  defineProps<{
+    makeDefault?: boolean
+    camera?: Camera
+    domElement?: HTMLElement
+    target?: Ref<Vector3>
+    enableDamping?: boolean
+  }>(),
+  {
+    makeDefault: false,
+  },
+)
+
+const controls = ref(null)
+const camera = inject<Ref<Camera>>('camera')
+const renderer = inject<Ref<WebGLRenderer>>('renderer')
+
+const { extend } = useCientos()
+extend({ OrbitControls })
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="camera && renderer"
+    ref="controls"
+    :args="[camera, renderer?.domElement]"
+    :enabling-dampling="enableDamping"
+  />
+</template>
+
+<!-- <script setup lang="ts">
 import { useRenderLoop } from '@tresjs/core'
-import { Camera, WebGLRenderer } from 'three'
+import { Camera, Vector3, WebGLRenderer } from 'three'
 import { OrbitControls as OrbitControlsImp } from 'three-stdlib'
 import { inject, type Ref, unref, watch } from 'vue'
 
+const props = withDefaults(
+  defineProps<{
+    makeDefault?: boolean
+    camera?: Camera
+    domElement?: HTMLElement
+    target?: Ref<Vector3>
+  }>(),
+  {
+    makeDefault: false,
+  },
+)
 let controls: OrbitControlsImp
 
 const camera = inject<Ref<Camera>>('camera')
@@ -19,7 +67,7 @@ watch(
       const { onLoop } = useRenderLoop()
 
       onLoop(() => {
-        if (controls) {
+        if (controls.enabled) {
           controls.update()
         }
       })
@@ -30,3 +78,4 @@ watch(
   },
 )
 </script>
+ -->

packages/cientos/src/core/useCientos.ts

@@ -0,0 +1,12 @@
+import { useCatalogue } from '@tresjs/core'
+import { getCurrentInstance } from 'vue'
+
+export function useCientos() {
+  const appContext = getCurrentInstance()?.appContext
+  const { catalogue, extend } = useCatalogue(appContext?.app)
+
+  return {
+    catalogue,
+    extend,
+  }
+}

packages/cientos/src/env.d.ts

@@ -1,3 +1,4 @@
+import { App } from 'vue'
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
@@ -6,3 +7,14 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+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/tres/CHANGELOG.md

@@ -1,3 +1,18 @@
+# 1.1.0 (2022-12-05)
+
+### Bug Fixes
+
+- **core:** enabled function calling on process props ([f544371](https://github.com/Tresjs/tres/commit/f5443713cd34ad284bb01d4bb4ea1d23bb3e43d2))
+- **core:** removed unused imports ([1387834](https://github.com/Tresjs/tres/commit/1387834ed30d5a98e32e8d6a7f166df2b4b2482f))
+
+### Features
+
+- **core:** add camera to scene ([631c119](https://github.com/Tresjs/tres/commit/631c119bb808f6e2eb6a37c3d9c91adb01eb991b))
+- **core:** extend example with TextGeometry ([33be4da](https://github.com/Tresjs/tres/commit/33be4da77aac6c6323ce247b057e03788e82c71e))
+- **core:** extend functionality ([c1da082](https://github.com/Tresjs/tres/commit/c1da08279e0254e8253f98753f4a7b16391587c8))
+- **core:** extend reactive catalog ([a6bc3f9](https://github.com/Tresjs/tres/commit/a6bc3f9e6edc1c4d7a3d562e146dd887038e7b2e))
+- **core:** refactored instance creator and expose methods to be used on cientos ([f943807](https://github.com/Tresjs/tres/commit/f9438070b446d5bf318a1d734c4f3cbb4933f43e))
+
 # 1.0.0 (2022-11-29)
 
 ### Features

packages/tres/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [

packages/tres/src/App.vue

@@ -1,21 +1,37 @@
 <script setup lang="ts">
-import { useTweakPane, OrbitControls, Text3D } from '../../cientos/src'
+/* import { Color } from 'three' */
+import { useTweakPane, OrbitControls, TransformControls } from '../../cientos/src'
+/* import TestSphere from '/@/components/TestSphere.vue' */
+import Text3D from '/@/components/Text3D.vue'
+/* import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { useTres, useCatalogue } from '/@/core' */
+
+/* const { extend } = useCatalogue() */
+
+/* extend({ OrbitControls }) */
 
 useTweakPane()
+
+/* const { state } = useTres() */
 </script>
 <template>
   <Suspense>
-    <TresCanvas shadows alpha power-preference="high-performance" preserve-drawing-buffer physically-correct-lights>
+    <TresCanvas
+      shadows
+      alpha
+      clear-color="teal"
+      power-preference="high-performance"
+      preserve-drawing-buffer
+      physically-correct-lights
+    >
       <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+      <OrbitControls />
       <TresScene>
-        <OrbitControls />
-        <TresMesh :position="[0, 0, 0]" :scale="1">
-          <TresSphereGeometry />
-          <TresMeshToonMaterial :color="'teal'" />
-        </TresMesh>
-        <!--  <Text3D font="/fonts/Gilroy_ExtraBold_Regular.json" :text="'Awiwi'" /> -->
-
-        <TresAxesHelper :args="[1]" />
+        <TresAmbientLight :intensity="0.5" />
+        <!--  <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" /> -->
+        <Text3D />
+        <!--   <TestSphere /> -->
+        <TresAxesHelper :args="[1]" :visible="false" />
         <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
       </TresScene>
     </TresCanvas>

packages/tres/src/components/Text3D.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
+import { useCatalogue, useTexture } from '/@/core'
+const { extend } = useCatalogue()
+
+extend({ TextGeometry: TextGeometry })
+
+const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+
+const loader = new FontLoader()
+
+const font = await new Promise((resolve, reject) => {
+  try {
+    loader.load(fontPath, font => {
+      resolve(font)
+    })
+  } catch (error) {
+    reject(console.error('cientos', error))
+  }
+})
+
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+</script>
+<template>
+  <TresMesh>
+    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+    <TresMeshMatcapMaterial :matcap="matcapTexture" />
+  </TresMesh>
+</template>

packages/tres/src/core/useCatalogue/index.ts

@@ -1,14 +1,40 @@
+import { App, ref, Component, Ref, provide } from 'vue'
 import * as THREE from 'three'
+import { useInstanceCreator } from '/@/core'
+import { useLogger } from '/@/composables'
+import { TresCatalogue } from '/@/types'
 
-let catalogue: {
-  [key: string]: any
-} = { ...THREE }
+const catalogue: Ref<TresCatalogue> = ref({ ...THREE })
 
-delete catalogue.Scene
+delete catalogue.value.Scene
+
+let localApp: App
+export function useCatalogue(app?: App, prefix = 'Tres') {
+  const { logError } = useLogger()
+  if (!localApp && app) {
+    localApp = app
+  }
+  const { createComponentInstances } = useInstanceCreator(prefix)
+
+  provide('catalogue', catalogue)
 
-export function useCatalogue() {
   const extend = (objects: any) => {
-    catalogue = Object.assign(catalogue, objects)
+    if (!objects) {
+      logError('No objects provided to extend catalogue')
+      return
+    }
+
+    catalogue.value = Object.assign(catalogue.value, objects)
+    const components = createComponentInstances(ref(objects))
+
+    if (localApp) {
+      components.forEach(([key, cmp]) => {
+        // If the component is not already registered, register it
+        if (!localApp._context.components[key as string]) {
+          localApp.component(key as string, cmp as Component)
+        }
+      })
+    }
   }
 
   return {

packages/tres/src/core/useInstanceCreator/index.ts

@@ -1,17 +1,15 @@
-import { OrthographicCamera } from 'three'
 /* eslint-disable new-cap */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { Object3D, PerspectiveCamera } from 'three'
-import { defineComponent } from 'vue'
+import { OrthographicCamera, PerspectiveCamera } from 'three'
+import { defineComponent, Ref } from 'vue'
 import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
 import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
 import { useCamera, useScene } from '/@/core/'
 import { useLogger } from '/@/composables'
-import { TresCatalogue, TresInstance, TresVNode, TresVNodeType } from '../../types'
+import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType } from '/@/types'
 
 const VECTOR3_PROPS = ['rotation', 'scale', 'position']
 
-type TresAttributes = Record<string, any> & { args?: number[] }
 export function useInstanceCreator(prefix: string) {
   const { logMessage, logError } = useLogger()
 
@@ -61,17 +59,17 @@ export function useInstanceCreator(prefix: string) {
     })
   }
 
-  function createInstanceFromVNode(vnode: TresVNode, catalogue: TresCatalogue): TresInstance {
+  function createInstanceFromVNode(vnode: TresVNode, catalogue: Ref<TresCatalogue>): TresInstance {
     const vNodeType = ((vnode.type as TresVNodeType).name as string).replace(prefix, '')
 
     // check if args prop is defined on the vnode
     let internalInstance
     if (vnode?.props?.args) {
       // if args prop is defined, create new instance of catalogue[vNodeType] with the provided arguments
-      internalInstance = new catalogue[vNodeType](...vnode.props.args)
+      internalInstance = new catalogue.value[vNodeType](...vnode.props.args)
     } else {
       // if args prop is not defined, create a new instance of catalogue[vNodeType] without arguments
-      internalInstance = new catalogue[vNodeType]()
+      internalInstance = new catalogue.value[vNodeType]()
     }
 
     // check if props is defined on the vnode
@@ -84,7 +82,7 @@ export function useInstanceCreator(prefix: string) {
   }
 
   function createInstance(
-    catalogue: Record<string, any>,
+    catalogue: Ref<TresCatalogue>,
     threeObj: any,
     attrs: TresAttributes,
     slots: Record<string, any>,
@@ -109,20 +107,14 @@ export function useInstanceCreator(prefix: string) {
     }
   }
 
-  function createComponentInstances(catalogue: Record<string, any>) {
-    return Object.entries(catalogue)
+  function createComponentInstances(catalogue: Ref<TresCatalogue>) {
+    return Object.entries(catalogue.value)
       .filter(([_key, value]) => (value as { prototype: any })?.prototype?.constructor?.toString().includes('class'))
       .map(([key, threeObj]) => {
         const name = `${prefix}${key}`
         const cmp = defineComponent({
           name,
           setup(props, { slots, attrs, ...ctx }) {
-            logMessage(name, {
-              props,
-              slots,
-              attrs,
-              ctx,
-            })
             const { scene } = useScene()
             const { pushCamera } = useCamera()
 
@@ -139,7 +131,13 @@ export function useInstanceCreator(prefix: string) {
             }
 
             ctx.expose(instance)
-
+            logMessage(name, {
+              props,
+              slots,
+              attrs,
+              ctx,
+              scene,
+            })
             return () => {}
           },
         })

packages/tres/src/core/useRenderer/index.ts

@@ -140,7 +140,7 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
     }
 
     renderer.value.setSize(width.value, height.value)
-    renderer.value.setPixelRatio(pixelRatio.value)
+    renderer.value.setPixelRatio(Math.min(pixelRatio.value, 2))
   }
 
   const updateRendererOptions = () => {

packages/tres/src/index.ts

@@ -4,7 +4,7 @@ import { Scene } from '/@/core/useScene/component'
 import { useCatalogue, useInstanceCreator } from '/@/core'
 export * from '/@/core'
 export * from './keys'
-
+import { version } from '../package.json'
 export interface TresOptions {
   prefix?: string
   extends?: Record<string, unknown>
@@ -19,12 +19,20 @@ const plugin: TresPlugin = {
     const prefix = options?.prefix || 'Tres'
     app.component(`${prefix}Canvas`, TresCanvas)
     app.component(`${prefix}Scene`, Scene)
-    const { catalogue } = useCatalogue()
+    const { catalogue } = useCatalogue(app, prefix)
     const { createComponentInstances } = useInstanceCreator(prefix)
-    const components = createComponentInstances(options?.extends ? { ...catalogue, ...options.extends } : catalogue)
+    const components = createComponentInstances(catalogue)
+    /*  const components = createComponentInstances(
+      options?.extends ? { ...catalogue, ...options.extends } : catalogue,
+    ) */
     components.forEach(([key, cmp]) => {
       app.component(key as string, cmp as Component)
     })
+
+    window.__TRES__ = {
+      app,
+      version,
+    }
   },
 }
 

packages/tres/src/types/index.d.ts

@@ -10,3 +10,15 @@ export type TresVNodeType = VNodeTypes & {
   setup?: (props: Readonly<any>) => void
 }
 export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
+export type TresAttributes = Record<string, any> & { args?: number[] }
+
+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
+    }
+  }
+}

pnpm-lock.yaml

@@ -9,7 +9,7 @@ importers:
       '@changesets/cli': ^2.25.2
       '@stackblitz/sdk': ^1.8.1
       '@tresjs/cientos': workspace:^1.0.0
-      '@tresjs/core': workspace:^1.0.0
+      '@tresjs/core': workspace:^1.1.0
       '@typescript-eslint/eslint-plugin': ^5.42.0
       '@typescript-eslint/parser': ^5.42.0
       conventional-changelog-cli: ^2.2.2
@@ -17,7 +17,7 @@ importers:
       eslint-config-prettier: ^8.5.0
       eslint-plugin-vue: ^9.7.0
       prettier: ^2.7.1
-      vitepress: 1.0.0-alpha.26
+      vitepress: 1.0.0-alpha.29
       vue: ^3.2.41
       vue-eslint-parser: ^9.1.0
     devDependencies:
@@ -34,13 +34,13 @@ importers:
       eslint-config-prettier: 8.5.0_eslint@8.28.0
       eslint-plugin-vue: 9.8.0_eslint@8.28.0
       prettier: 2.8.0
-      vitepress: 1.0.0-alpha.26
+      vitepress: 1.0.0-alpha.29
       vue: 3.2.45
       vue-eslint-parser: 9.1.0_eslint@8.28.0
 
   packages/cientos:
     specifiers:
-      '@tresjs/core': workspace:^1.0.0
+      '@tresjs/core': workspace:^1.1.0
       '@tweakpane/plugin-essentials': ^0.1.5
       '@vitejs/plugin-vue': ^3.2.0
       kolorist: ^1.6.0
@@ -2168,8 +2168,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      is-text-path: 1.0.1
       JSONStream: 1.3.5
+      is-text-path: 1.0.1
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -5184,14 +5184,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /shiki-processor/0.1.1_shiki@0.11.1:
-    resolution: {integrity: sha512-K2v/JNHdMRGFnbcVqAgvPU8qmZNgtiBrYcYKe3O6Lx2W0RoyiwzrrpCUU917b2r2EMS+2FNgRIgz9xvtmF/L7w==}
-    peerDependencies:
-      shiki: ^0.11.1
-    dependencies:
-      shiki: 0.11.1
-    dev: true
-
   /shiki/0.10.1:
     resolution: {integrity: sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==}
     dependencies:
@@ -6065,8 +6057,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress/1.0.0-alpha.26:
-    resolution: {integrity: sha512-XpDpflrdmyBmUQrg06q29Mhez144NvoZ48pRvNhANy/wV7E7XJ1zenQROOSADnOsAlhV1gzcNjqiFNObCk7l8A==}
+  /vitepress/1.0.0-alpha.29:
+    resolution: {integrity: sha512-oaRaeMLcN9M3Bxz97fFVF6Gzm3Aqtb0CijTt5TOW0XPzNPuKA0YpFnsmS97gdKmA+VztM6itRJ8K7JJuU0VS3g==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.0
@@ -6076,7 +6068,6 @@ packages:
       '@vueuse/core': 9.6.0_vue@3.2.45
       body-scroll-lock: 4.0.0-beta.0
       shiki: 0.11.1
-      shiki-processor: 0.1.1_shiki@0.11.1
       vite: 3.2.4
       vue: 3.2.45
     transitivePeerDependencies: