feat: createTres wrapper for mounting options

packages/tres/src/App.vue

@@ -48,15 +48,12 @@ function enter(e) {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" :position="[0, 2, 7]"></TresPerspectiveCamera>
     <TresAmbientLight :color="0xffffff" :intensity="0.75" />
-    <TresDirectionalLight :color="0xffffff" :intensity="0.75" :position="[-2, 2, 0]" />
-    <TresMesh :position="[0, 4, 0]" @click="click" @pointer-enter="enter">
-      <TresBoxGeometry :args="[1, 1, 1]"></TresBoxGeometry>
-      <TresMeshBasicMaterial color="teal"></TresMeshBasicMaterial>
+    <TresDirectionalLight :color="0xffffff" :intensity="2" :position="[-2, 2, 0]" />
+    <TresMesh :position="[0, 1, 0]" @click="click" @pointer-enter="enter">
+      <TresSphereGeometry :args="[1, 32, 16]"></TresSphereGeometry>
+      <TresMeshToonMaterial color="teal"></TresMeshToonMaterial>
     </TresMesh>
-    <TresGridHelper v-if="gridVisible" :args="[4, 4]"></TresGridHelper>
-    <Suspense>
-      <AkuAku />
-    </Suspense>
+    <TresGridHelper :args="[4, 4]"></TresGridHelper>
   </TresCanvas>
 </template>
 

packages/tres/src/components/TresCanvas.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, PropType, ref, watch } from 'vue'
 /* eslint-disable vue/one-component-per-file */
 import * as THREE from 'three'
-import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
+import { ShadowMapType, TextureEncoding, ToneMapping, Scene } from 'three'
 import { createTres } from '/@/core/renderer'
 import { useCamera, useRenderer, useRenderLoop, useRaycaster } from '/@/composables'
 import { TresObject } from '/@/types'

packages/tres/src/core/renderer.ts

@@ -4,7 +4,15 @@ import { createRenderer } from 'vue'
 import { extend } from './catalogue'
 import { nodeOps } from './nodeOps'
 
-export const { createApp: createTres } = createRenderer(nodeOps)
+export const { createApp } = createRenderer(nodeOps)
+
+export const createTres = (...args) => {
+  const app = createApp(...args)
+  /*  const { mount } = app
+  app.mount = (container: Element | string) => {} */
+
+  return app
+}
 
 extend(THREE)
 

packages/tres/src/demos/AkuAku.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTweakPane, useGLTF } from '@tresjs/cientos'
+import { ref, watch } from 'vue'
 
 useTweakPane()
 
@@ -11,10 +12,16 @@ const { scene: model } = await useGLTF(
 )
 model.position.set(0, 4, 0)
 model.updateMatrixWorld()
+
+const akuAkuRef = ref(null)
+
+watch(akuAkuRef, value => {
+  console.log('akuAkuRef', value)
+})
 </script>
 
 <template>
   <Suspense>
-    <TresMesh v-bind="model" />
+    <TresMesh ref="akuAkuRef" v-bind="model" />
   </Suspense>
 </template>