feat(core): extend functionality

package.json

@@ -12,7 +12,6 @@
   ],
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "postinstall": "pnpm run build:ci",
     "update-deps": "pnpm update -i -r --latest",
     "build:ci": "pnpm run build:tres && pnpm run build:cientos",
     "build:tres": "pnpm --filter @tresjs/core build",
@@ -52,7 +51,7 @@
     "@changesets/cli": "^2.25.2",
     "@stackblitz/sdk": "^1.8.1",
     "@tresjs/cientos": "workspace:^1.8.0",
-    "@tresjs/core": "workspace:^1.8.1",
+    "@tresjs/core": "workspace:^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-cli": "^2.2.2",

packages/cientos/package.json

@@ -37,7 +37,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "peerDependencies": {
-    "@tresjs/core": "workspace:^1.8.1",
+    "@tresjs/core": "workspace:^2.0.0",
     "three": "latest",
     "vue": "^3.2.47"
   },
@@ -55,7 +55,7 @@
     "vite-plugin-dts": "2.0.0-beta.1"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^1.8.1",
+    "@tresjs/core": "workspace:^2.0.0",
     "three-stdlib": "^2.21.8"
   }
 }

packages/tres/plugins/vite-plugin-tres.ts

@@ -28,7 +28,8 @@ export const unplugin = createUnplugin(() => {
           key.includes('Vector') || // Vector2, Vector3, Vector4
           key.includes('BufferGeometry') || // Deprecated geometries
           key.includes('Utils') || // Utils
-          key.includes('Curve') // Curves
+          key.includes('Curve') || // Curves
+          key.includes('Audio') // Curves
         )
           continue
         if (typeof value === 'function' && /^\s*class\s+/.test(value.toString())) {
@@ -37,7 +38,7 @@ export const unplugin = createUnplugin(() => {
           const template = `
       import { defineComponent, inject, ShallowRef } from 'vue';
       import { ${key}, Scene, Color, Vector3, Object3D } from 'three';
-      /* import { useCamera } from '/@/core/' */
+      import { useCamera } from '/@/composables/'
       import { VectorFlexibleParams, normalizeVectorFlexibleParam, normalizeColor } from '/@/utils/normalize';
 
       let ${key}Instance: ${key};
@@ -119,13 +120,12 @@ export const unplugin = createUnplugin(() => {
 
           processProps()
 
-
-          /* if (${key}Instance.hasOwnProperty('isCamera')) {
+          if (${key}Instance.hasOwnProperty('isCamera')) {
             ${key}Instance.position.set(0, 0, 5)
             ${key}Instance.lookAt(0, 0, 0)
             const { pushCamera } = useCamera()
             pushCamera(${key}Instance)
-          } */
+          }
       
          
           if(props.parentInstance) {
@@ -152,7 +152,7 @@ export const unplugin = createUnplugin(() => {
 
       export default Tres${key};
     `
-          indexTemplate += `export { default as Tres${key} } from './${key}'\n`
+          indexTemplate += `export * from './${key}'\n`
           fs.writeFileSync(outputFilePath, template)
           modules.push(key)
         }

packages/tres/src/App.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import { TresMesh, TresSphereGeometry, TresMeshBasicMaterial, TresPerspectiveCamera } from '../.tres/components/'
 import { TresCanvas } from '/@/components/TresCanvas'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+import { useInstanceCreator } from '/@/composables/useCreatorInstance'
+import { useTres } from './composables'
+
+const { extend } = useInstanceCreator()
+extend(OrbitControls)
+
+const { state } = useTres()
 </script>
 
 <template>
   <Suspense>
     <TresCanvas clear-color="teal">
+      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
       <TresPerspectiveCamera :position="[0, 3, 3]" />
       <TresMesh>
         <TresSphereGeometry :args="[1, 1, 32, 32]" />

packages/tres/src/components/TresCanvas.ts

@@ -1,7 +1,6 @@
 import { Scene, ShadowMapType, TextureEncoding, ToneMapping } from 'three'
 import { h, defineComponent, ref, provide, onBeforeUnmount, PropType, shallowRef } from 'vue'
-import { useCamera } from '../core/useCamera'
-import { RendererPresetsType, useRenderer, useRenderLoop, useTres } from '/@/composables'
+import { RendererPresetsType, useRenderer, useRenderLoop, useTres, useCamera } from '/@/composables'
 import { useLogger } from '/@/composables/useLogger'
 import { TresVNodeType } from '/@/types'
 
@@ -48,7 +47,7 @@ export const TresCanvas = defineComponent({
 
     const { setState } = useTres()
     const scene = shallowRef(new Scene())
-    console.log('TresCanvas', scene)
+
     const { activeCamera } = useCamera()
     /*   const { raycaster, pointer } = useRaycaster() */
     const { onLoop } = useRenderLoop()
@@ -117,3 +116,5 @@ export const TresCanvas = defineComponent({
     }
   },
 })
+
+export default TresCanvas

packages/tres/src/components/index.ts

@@ -1 +1,6 @@
+import { TresCanvas } from './TresCanvas'
 export * from './TresCanvas'
+
+export default {
+  TresCanvas,
+}

packages/tres/src/composables/index.ts

@@ -1,3 +1,4 @@
 export * from './useRenderer'
 export * from './useRenderLoop'
 export * from './useTres'
+export * from './useCamera'

packages/tres/src/composables/useCreatorInstance.ts

@@ -0,0 +1,98 @@
+import { normalizeColor, normalizeVectorFlexibleParam } from '/@/utils/normalize'
+import { Color, Scene, Vector3, Object3D } from 'three'
+import { Component, defineComponent, getCurrentInstance, inject, ShallowRef } from 'vue'
+
+export function useInstanceCreator() {
+  function processProps(props, instance) {
+    Object.keys(props).forEach(key => {
+      if (props[key] !== undefined && key !== 'parentInstance' && key !== 'args') {
+        if (instance[key] instanceof Color) {
+          instance[key] = normalizeColor(props[key])
+        } else if (instance[key] instanceof Vector3) {
+          instance[key].set(normalizeVectorFlexibleParam(props[key]))
+        } else {
+          instance[key] = props[key]
+        }
+      }
+    })
+  }
+  function append(parent, child) {
+    const regex = /[A-Z][a-z]+/g
+    const propName = child.type.match(regex).pop().toLowerCase()
+    if (parent[propName]) {
+      parent[propName] = child
+    }
+  }
+
+  function createComponentFromInstance(threeObj: any) {
+    let instanceProps: string[] = []
+    try {
+      // @ts-ignore
+
+      instanceProps = [...Object.keys(threeObj)]
+    } catch (e) {}
+    const cmp = defineComponent({
+      name: 'Tres' + threeObj.constructor.name,
+      props: ['parentInstance', 'args', ...instanceProps] as unknown as undefined,
+      setup(props, { slots, expose }) {
+        let instance
+        if (props.args) {
+          // @ts-ignore
+          instance = new threeObj(...props.args)
+        } else {
+          // @ts-ignore
+          instance = new threeObj()
+        }
+
+        const scene = inject<ShallowRef<Scene>>('scene')
+
+        expose({ instance })
+
+        if (props.parentInstance) {
+          append(props.parentInstance, instance)
+        }
+
+        if (scene && !props.parentInstance && instance instanceof Object3D) {
+          scene.value.add(instance)
+        }
+
+        processProps(props, instance)
+
+        const preparedSlots = slots.default
+          ? // eslint-disable-next-line max-len
+            slots.default().map(slot => {
+              slot.props = {
+                ...slot.props,
+                parentInstance: instance,
+              }
+              return slot
+            })
+          : null
+
+        return () => {
+          return preparedSlots
+        }
+      },
+    })
+    return cmp
+  }
+  const extend = (object: any) => {
+    if (!object) {
+      /*  logError('No objects provided to extend catalogue') */
+      return
+    }
+
+    const localApp = getCurrentInstance().appContext.app
+
+    const component = createComponentFromInstance(object)
+
+    console.log('component', object)
+
+    if (localApp) {
+      if (!localApp._context.components[object.name as string]) {
+        localApp.component(`Tres${object.name}` as string, component as Component)
+      }
+    }
+  }
+  return { createComponentFromInstance, extend }
+}

packages/tres/src/index.ts

@@ -1,6 +1,5 @@
 export * from './components'
 export * from './composables'
-export * from './keys'
 export * from './types'
 
 export * from '../.tres/components'

packages/tres/src/keys.ts

@@ -1 +0,0 @@
-export const UseTresStateSymbol = Symbol('UseTresState')

packages/tres/src/style.css

@@ -1,38 +1,12 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
+html,
 body {
   margin: 0;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}

packages/tres/vite.config.ts

@@ -11,7 +11,7 @@ import Components from 'unplugin-vue-components/vite'
 
 import { ViteTresPlugin } from './plugins/vite-plugin-tres'
 import analyze from 'rollup-plugin-analyzer'
-/* import { visualizer } from 'rollup-plugin-visualizer' */
+import { visualizer } from 'rollup-plugin-visualizer'
 import { resolve } from 'pathe'
 
 import { lightGreen, yellow, gray, bold } from 'kolorist'
@@ -69,11 +69,11 @@ export default defineConfig({
     rollupOptions: {
       plugins: [
         /* analyze(), */
-        /*    visualizer({
+        visualizer({
           open: true,
           gzipSize: true,
           brotliSize: true,
-        }), */
+        }),
       ],
 
       external: ['vue', '@vueuse/core', 'three'],

pnpm-lock.yaml

@@ -9,7 +9,7 @@ importers:
       '@changesets/cli': ^2.25.2
       '@stackblitz/sdk': ^1.8.1
       '@tresjs/cientos': workspace:^1.8.0
-      '@tresjs/core': workspace:^1.8.1
+      '@tresjs/core': workspace:^2.0.0
       '@typescript-eslint/eslint-plugin': ^5.42.0
       '@typescript-eslint/parser': ^5.42.0
       conventional-changelog-cli: ^2.2.2
@@ -45,8 +45,9 @@ importers:
       vue: 3.2.47
       vue-eslint-parser: 9.1.0_eslint@8.34.0
 
-  apps/test-app:
+  apps/playground:
     specifiers:
+      '@tresjs/core': workspace:^2.0.0
       '@vitejs/plugin-vue': ^4.0.0
       three: ^0.150.1
       typescript: ^4.9.3
@@ -54,6 +55,7 @@ importers:
       vue: ^3.2.45
       vue-tsc: ^1.0.24
     dependencies:
+      '@tresjs/core': link:../../packages/tres
       three: 0.150.1
       vue: 3.2.47
     devDependencies:
@@ -64,7 +66,7 @@ importers:
 
   packages/cientos:
     specifiers:
-      '@tresjs/core': workspace:^1.8.1
+      '@tresjs/core': workspace:^2.0.0
       '@tweakpane/plugin-essentials': ^0.1.8
       '@vitejs/plugin-vue': ^4.0.0
       kolorist: ^1.7.0