feat(core): fixing black screen

packages/tres/build/config.gypi

@@ -1,400 +0,0 @@
-# Do not edit. File was generated by node-gyp's "configure" step
-{
-  "target_defaults": {
-    "cflags": [],
-    "default_configuration": "Release",
-    "defines": [],
-    "include_dirs": [],
-    "libraries": [],
-    "msvs_configuration_platform": "ARM64",
-    "xcode_configuration_platform": "arm64"
-  },
-  "variables": {
-    "arm_fpu": "neon",
-    "asan": 0,
-    "coverage": "false",
-    "dcheck_always_on": 0,
-    "debug_nghttp2": "false",
-    "debug_node": "false",
-    "enable_lto": "false",
-    "enable_pgo_generate": "false",
-    "enable_pgo_use": "false",
-    "error_on_warn": "false",
-    "force_dynamic_crt": 0,
-    "host_arch": "arm64",
-    "icu_data_in": "../../deps/icu-tmp/icudt72l.dat",
-    "icu_endianness": "l",
-    "icu_gyp_path": "tools/icu/icu-generic.gyp",
-    "icu_path": "deps/icu-small",
-    "icu_small": "false",
-    "icu_ver_major": "72",
-    "is_debug": 0,
-    "libdir": "lib",
-    "llvm_version": "12.0",
-    "napi_build_version": "8",
-    "node_builtin_shareable_builtins": [
-      "deps/cjs-module-lexer/lexer.js",
-      "deps/cjs-module-lexer/dist/lexer.js",
-      "deps/undici/undici.js"
-    ],
-    "node_byteorder": "little",
-    "node_debug_lib": "false",
-    "node_enable_d8": "false",
-    "node_enable_v8_vtunejit": "false",
-    "node_fipsinstall": "false",
-    "node_install_corepack": "true",
-    "node_install_npm": "true",
-    "node_library_files": [
-      "lib/_http_agent.js",
-      "lib/_http_client.js",
-      "lib/_http_common.js",
-      "lib/_http_incoming.js",
-      "lib/_http_outgoing.js",
-      "lib/_http_server.js",
-      "lib/_stream_duplex.js",
-      "lib/_stream_passthrough.js",
-      "lib/_stream_readable.js",
-      "lib/_stream_transform.js",
-      "lib/_stream_wrap.js",
-      "lib/_stream_writable.js",
-      "lib/_tls_common.js",
-      "lib/_tls_wrap.js",
-      "lib/assert.js",
-      "lib/assert/strict.js",
-      "lib/async_hooks.js",
-      "lib/buffer.js",
-      "lib/child_process.js",
-      "lib/cluster.js",
-      "lib/console.js",
-      "lib/constants.js",
-      "lib/crypto.js",
-      "lib/dgram.js",
-      "lib/diagnostics_channel.js",
-      "lib/dns.js",
-      "lib/dns/promises.js",
-      "lib/domain.js",
-      "lib/events.js",
-      "lib/fs.js",
-      "lib/fs/promises.js",
-      "lib/http.js",
-      "lib/http2.js",
-      "lib/https.js",
-      "lib/inspector.js",
-      "lib/internal/abort_controller.js",
-      "lib/internal/assert.js",
-      "lib/internal/assert/assertion_error.js",
-      "lib/internal/assert/calltracker.js",
-      "lib/internal/async_hooks.js",
-      "lib/internal/blob.js",
-      "lib/internal/blocklist.js",
-      "lib/internal/bootstrap/browser.js",
-      "lib/internal/bootstrap/loaders.js",
-      "lib/internal/bootstrap/node.js",
-      "lib/internal/bootstrap/switches/does_not_own_process_state.js",
-      "lib/internal/bootstrap/switches/does_own_process_state.js",
-      "lib/internal/bootstrap/switches/is_main_thread.js",
-      "lib/internal/bootstrap/switches/is_not_main_thread.js",
-      "lib/internal/buffer.js",
-      "lib/internal/child_process.js",
-      "lib/internal/child_process/serialization.js",
-      "lib/internal/cli_table.js",
-      "lib/internal/cluster/child.js",
-      "lib/internal/cluster/primary.js",
-      "lib/internal/cluster/round_robin_handle.js",
-      "lib/internal/cluster/shared_handle.js",
-      "lib/internal/cluster/utils.js",
-      "lib/internal/cluster/worker.js",
-      "lib/internal/console/constructor.js",
-      "lib/internal/console/global.js",
-      "lib/internal/constants.js",
-      "lib/internal/crypto/aes.js",
-      "lib/internal/crypto/certificate.js",
-      "lib/internal/crypto/cfrg.js",
-      "lib/internal/crypto/cipher.js",
-      "lib/internal/crypto/diffiehellman.js",
-      "lib/internal/crypto/ec.js",
-      "lib/internal/crypto/hash.js",
-      "lib/internal/crypto/hashnames.js",
-      "lib/internal/crypto/hkdf.js",
-      "lib/internal/crypto/keygen.js",
-      "lib/internal/crypto/keys.js",
-      "lib/internal/crypto/mac.js",
-      "lib/internal/crypto/pbkdf2.js",
-      "lib/internal/crypto/random.js",
-      "lib/internal/crypto/rsa.js",
-      "lib/internal/crypto/scrypt.js",
-      "lib/internal/crypto/sig.js",
-      "lib/internal/crypto/util.js",
-      "lib/internal/crypto/webcrypto.js",
-      "lib/internal/crypto/x509.js",
-      "lib/internal/debugger/inspect.js",
-      "lib/internal/debugger/inspect_client.js",
-      "lib/internal/debugger/inspect_repl.js",
-      "lib/internal/dgram.js",
-      "lib/internal/dns/callback_resolver.js",
-      "lib/internal/dns/promises.js",
-      "lib/internal/dns/utils.js",
-      "lib/internal/dtrace.js",
-      "lib/internal/encoding.js",
-      "lib/internal/error_serdes.js",
-      "lib/internal/errors.js",
-      "lib/internal/event_target.js",
-      "lib/internal/file.js",
-      "lib/internal/fixed_queue.js",
-      "lib/internal/freelist.js",
-      "lib/internal/freeze_intrinsics.js",
-      "lib/internal/fs/cp/cp-sync.js",
-      "lib/internal/fs/cp/cp.js",
-      "lib/internal/fs/dir.js",
-      "lib/internal/fs/promises.js",
-      "lib/internal/fs/read_file_context.js",
-      "lib/internal/fs/recursive_watch.js",
-      "lib/internal/fs/rimraf.js",
-      "lib/internal/fs/streams.js",
-      "lib/internal/fs/sync_write_stream.js",
-      "lib/internal/fs/utils.js",
-      "lib/internal/fs/watchers.js",
-      "lib/internal/heap_utils.js",
-      "lib/internal/histogram.js",
-      "lib/internal/http.js",
-      "lib/internal/http2/compat.js",
-      "lib/internal/http2/core.js",
-      "lib/internal/http2/util.js",
-      "lib/internal/idna.js",
-      "lib/internal/inspector_async_hook.js",
-      "lib/internal/js_stream_socket.js",
-      "lib/internal/legacy/processbinding.js",
-      "lib/internal/linkedlist.js",
-      "lib/internal/main/check_syntax.js",
-      "lib/internal/main/environment.js",
-      "lib/internal/main/eval_stdin.js",
-      "lib/internal/main/eval_string.js",
-      "lib/internal/main/inspect.js",
-      "lib/internal/main/mksnapshot.js",
-      "lib/internal/main/print_help.js",
-      "lib/internal/main/prof_process.js",
-      "lib/internal/main/repl.js",
-      "lib/internal/main/run_main_module.js",
-      "lib/internal/main/test_runner.js",
-      "lib/internal/main/watch_mode.js",
-      "lib/internal/main/worker_thread.js",
-      "lib/internal/mime.js",
-      "lib/internal/modules/cjs/helpers.js",
-      "lib/internal/modules/cjs/loader.js",
-      "lib/internal/modules/esm/assert.js",
-      "lib/internal/modules/esm/create_dynamic_module.js",
-      "lib/internal/modules/esm/fetch_module.js",
-      "lib/internal/modules/esm/formats.js",
-      "lib/internal/modules/esm/get_format.js",
-      "lib/internal/modules/esm/handle_process_exit.js",
-      "lib/internal/modules/esm/initialize_import_meta.js",
-      "lib/internal/modules/esm/load.js",
-      "lib/internal/modules/esm/loader.js",
-      "lib/internal/modules/esm/module_job.js",
-      "lib/internal/modules/esm/module_map.js",
-      "lib/internal/modules/esm/package_config.js",
-      "lib/internal/modules/esm/resolve.js",
-      "lib/internal/modules/esm/translators.js",
-      "lib/internal/modules/package_json_reader.js",
-      "lib/internal/modules/run_main.js",
-      "lib/internal/net.js",
-      "lib/internal/options.js",
-      "lib/internal/per_context/domexception.js",
-      "lib/internal/per_context/messageport.js",
-      "lib/internal/per_context/primordials.js",
-      "lib/internal/perf/event_loop_delay.js",
-      "lib/internal/perf/event_loop_utilization.js",
-      "lib/internal/perf/nodetiming.js",
-      "lib/internal/perf/observe.js",
-      "lib/internal/perf/performance.js",
-      "lib/internal/perf/performance_entry.js",
-      "lib/internal/perf/resource_timing.js",
-      "lib/internal/perf/timerify.js",
-      "lib/internal/perf/usertiming.js",
-      "lib/internal/perf/utils.js",
-      "lib/internal/policy/manifest.js",
-      "lib/internal/policy/sri.js",
-      "lib/internal/priority_queue.js",
-      "lib/internal/process/esm_loader.js",
-      "lib/internal/process/execution.js",
-      "lib/internal/process/per_thread.js",
-      "lib/internal/process/policy.js",
-      "lib/internal/process/pre_execution.js",
-      "lib/internal/process/promises.js",
-      "lib/internal/process/report.js",
-      "lib/internal/process/signal.js",
-      "lib/internal/process/task_queues.js",
-      "lib/internal/process/warning.js",
-      "lib/internal/process/worker_thread_only.js",
-      "lib/internal/promise_hooks.js",
-      "lib/internal/querystring.js",
-      "lib/internal/readline/callbacks.js",
-      "lib/internal/readline/emitKeypressEvents.js",
-      "lib/internal/readline/interface.js",
-      "lib/internal/readline/promises.js",
-      "lib/internal/readline/utils.js",
-      "lib/internal/repl.js",
-      "lib/internal/repl/await.js",
-      "lib/internal/repl/history.js",
-      "lib/internal/repl/utils.js",
-      "lib/internal/socket_list.js",
-      "lib/internal/socketaddress.js",
-      "lib/internal/source_map/prepare_stack_trace.js",
-      "lib/internal/source_map/source_map.js",
-      "lib/internal/source_map/source_map_cache.js",
-      "lib/internal/stream_base_commons.js",
-      "lib/internal/streams/add-abort-signal.js",
-      "lib/internal/streams/buffer_list.js",
-      "lib/internal/streams/compose.js",
-      "lib/internal/streams/destroy.js",
-      "lib/internal/streams/duplex.js",
-      "lib/internal/streams/duplexify.js",
-      "lib/internal/streams/end-of-stream.js",
-      "lib/internal/streams/from.js",
-      "lib/internal/streams/lazy_transform.js",
-      "lib/internal/streams/legacy.js",
-      "lib/internal/streams/operators.js",
-      "lib/internal/streams/passthrough.js",
-      "lib/internal/streams/pipeline.js",
-      "lib/internal/streams/readable.js",
-      "lib/internal/streams/state.js",
-      "lib/internal/streams/transform.js",
-      "lib/internal/streams/utils.js",
-      "lib/internal/streams/writable.js",
-      "lib/internal/structured_clone.js",
-      "lib/internal/test/binding.js",
-      "lib/internal/test/transfer.js",
-      "lib/internal/test_runner/harness.js",
-      "lib/internal/test_runner/mock.js",
-      "lib/internal/test_runner/runner.js",
-      "lib/internal/test_runner/tap_checker.js",
-      "lib/internal/test_runner/tap_lexer.js",
-      "lib/internal/test_runner/tap_parser.js",
-      "lib/internal/test_runner/tap_stream.js",
-      "lib/internal/test_runner/test.js",
-      "lib/internal/test_runner/utils.js",
-      "lib/internal/test_runner/yaml_parser.js",
-      "lib/internal/timers.js",
-      "lib/internal/tls/secure-context.js",
-      "lib/internal/tls/secure-pair.js",
-      "lib/internal/trace_events_async_hooks.js",
-      "lib/internal/tty.js",
-      "lib/internal/url.js",
-      "lib/internal/util.js",
-      "lib/internal/util/colors.js",
-      "lib/internal/util/comparisons.js",
-      "lib/internal/util/debuglog.js",
-      "lib/internal/util/inspect.js",
-      "lib/internal/util/inspector.js",
-      "lib/internal/util/iterable_weak_map.js",
-      "lib/internal/util/parse_args/parse_args.js",
-      "lib/internal/util/parse_args/utils.js",
-      "lib/internal/util/types.js",
-      "lib/internal/v8/startup_snapshot.js",
-      "lib/internal/v8_prof_polyfill.js",
-      "lib/internal/v8_prof_processor.js",
-      "lib/internal/validators.js",
-      "lib/internal/vm.js",
-      "lib/internal/vm/module.js",
-      "lib/internal/wasm_web_api.js",
-      "lib/internal/watch_mode/files_watcher.js",
-      "lib/internal/watchdog.js",
-      "lib/internal/webstreams/adapters.js",
-      "lib/internal/webstreams/compression.js",
-      "lib/internal/webstreams/encoding.js",
-      "lib/internal/webstreams/queuingstrategies.js",
-      "lib/internal/webstreams/readablestream.js",
-      "lib/internal/webstreams/transfer.js",
-      "lib/internal/webstreams/transformstream.js",
-      "lib/internal/webstreams/util.js",
-      "lib/internal/webstreams/writablestream.js",
-      "lib/internal/worker.js",
-      "lib/internal/worker/io.js",
-      "lib/internal/worker/js_transferable.js",
-      "lib/module.js",
-      "lib/net.js",
-      "lib/os.js",
-      "lib/path.js",
-      "lib/path/posix.js",
-      "lib/path/win32.js",
-      "lib/perf_hooks.js",
-      "lib/process.js",
-      "lib/punycode.js",
-      "lib/querystring.js",
-      "lib/readline.js",
-      "lib/readline/promises.js",
-      "lib/repl.js",
-      "lib/stream.js",
-      "lib/stream/consumers.js",
-      "lib/stream/promises.js",
-      "lib/stream/web.js",
-      "lib/string_decoder.js",
-      "lib/sys.js",
-      "lib/test.js",
-      "lib/timers.js",
-      "lib/timers/promises.js",
-      "lib/tls.js",
-      "lib/trace_events.js",
-      "lib/tty.js",
-      "lib/url.js",
-      "lib/util.js",
-      "lib/util/types.js",
-      "lib/v8.js",
-      "lib/vm.js",
-      "lib/wasi.js",
-      "lib/worker_threads.js",
-      "lib/zlib.js"
-    ],
-    "node_module_version": 108,
-    "node_no_browser_globals": "false",
-    "node_prefix": "/",
-    "node_release_urlbase": "https://nodejs.org/download/release/",
-    "node_shared": "false",
-    "node_shared_brotli": "false",
-    "node_shared_cares": "false",
-    "node_shared_http_parser": "false",
-    "node_shared_libuv": "false",
-    "node_shared_nghttp2": "false",
-    "node_shared_nghttp3": "false",
-    "node_shared_ngtcp2": "false",
-    "node_shared_openssl": "false",
-    "node_shared_zlib": "false",
-    "node_tag": "",
-    "node_target_type": "executable",
-    "node_use_bundled_v8": "true",
-    "node_use_dtrace": "true",
-    "node_use_etw": "false",
-    "node_use_node_code_cache": "true",
-    "node_use_node_snapshot": "true",
-    "node_use_openssl": "true",
-    "node_use_v8_platform": "true",
-    "node_with_ltcg": "false",
-    "node_without_node_options": "false",
-    "openssl_is_fips": "false",
-    "openssl_quic": "true",
-    "ossfuzz": "false",
-    "shlib_suffix": "108.dylib",
-    "target_arch": "arm64",
-    "v8_enable_31bit_smis_on_64bit_arch": 0,
-    "v8_enable_gdbjit": 0,
-    "v8_enable_hugepage": 0,
-    "v8_enable_i18n_support": 1,
-    "v8_enable_inspector": 1,
-    "v8_enable_javascript_promise_hooks": 1,
-    "v8_enable_lite_mode": 0,
-    "v8_enable_object_print": 1,
-    "v8_enable_pointer_compression": 0,
-    "v8_enable_shared_ro_heap": 1,
-    "v8_enable_webassembly": 1,
-    "v8_no_strict_aliasing": 1,
-    "v8_optimized_debug": 1,
-    "v8_promise_internal_field_count": 1,
-    "v8_random_seed": 0,
-    "v8_trace_maps": 0,
-    "v8_use_siphash": 1,
-    "want_separate_host_toolset": 0,
-    "xcode_version": "12.0",
-    "nodedir": "/Users/alvarosabu/Library/Caches/node-gyp/18.14.1",
-    "standalone_static_library": 1
-  }
-}

packages/tres/build/node_gyp_bins/python3

@@ -1 +0,0 @@
-/Library/Developer/CommandLineTools/usr/bin/python3

packages/tres/src/App.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { useTweakPane } from '@tresjs/cientos'
 import TresCanvas from './components/TresCanvas'
 // import TheEvents from '/@/components/TheEvents.vue'
-
-useTweakPane()
+const gl = {
+  antialias: true,
+  alpha: true,
+  clearColor: '#82DBC5',
+}
+function click(e) {
+  console.log('click', e)
+}
 </script>
 
 <template>
   <Suspense>
-    <TresCanvas window-size>
-      <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" :position="[0, 2, 8]" />
-      <TresAmbientLight />
-      <TresDirectionalLight :intensity="1" color="yellow" :position="[-2, 0, 3]" />
+    <TresCanvas v-bind="gl">
+      <TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" :position="[0, 2, 7]"></TresPerspectiveCamera>
       <TresGridHelper :args="[4, 4]"></TresGridHelper>
-      <TresMesh>
-        <TresSphereGeometry :args="[2, 32, 16]" />
-        <TresMeshToonMaterial color="teal" />
+      <TresMesh @click="click">
+        <TresBoxGeometry :args="[1, 1, 1]"></TresBoxGeometry>
+        <TresMeshBasicMaterial color="teal"></TresMeshBasicMaterial>
       </TresMesh>
     </TresCanvas>
   </Suspense>
@@ -32,6 +35,5 @@ body {
 #app {
   height: 100%;
   width: 100%;
-  background-color: #000;
 }
 </style>

packages/tres/src/components/TresCanvas.ts

@@ -1,11 +1,10 @@
-import { useRenderLoop } from '@tresjs/core'
 import { defineComponent, h, onUnmounted, PropType, provide, ref, watch, watchEffect } from 'vue'
 /* eslint-disable vue/one-component-per-file */
 import * as THREE from 'three'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
 /* import { OrbitControls } from '@tresjs/cientos' */
 import { createTres } from '/@/core/renderer'
-import { useCamera, useRenderer, useTres } from '/@/composables'
+import { useCamera, useRenderer, useTres, useRenderLoop } from '/@/composables'
 
 export const TresCanvas = defineComponent({
   name: 'TresCanvas',
@@ -32,62 +31,65 @@ export const TresCanvas = defineComponent({
     clearColor: String,
     windowSize: { type: Boolean, default: false },
   },
-  setup(props, { slots, attrs, expose }) {
+  setup(props, { slots, expose }) {
     const container = ref<HTMLElement>()
     const canvas = ref<HTMLCanvasElement>()
-    const { state, setState } = useTres()
+    /*   const { state, setState } = useTres() */
 
-    const { renderer, aspectRatio } = useRenderer(canvas, container, props)
-    const { activeCamera } = useCamera()
+    /* const { renderer, aspectRatio } = useRenderer(canvas, container, props) */
+    /*    const { activeCamera } = useCamera()
 
     provide('aspect-ratio', aspectRatio)
-    provide('renderer', renderer)
-    /*  const renderer = new THREE.WebGLRenderer({
-        canvas: canvas.value,
-        antialias: true,
-        alpha: true,
-        powerPreference: 'high-performance',
-      })
-      renderer.outputEncoding = THREE.sRGBEncoding
-      renderer.toneMapping = THREE.ACESFilmicToneMapping
-      renderer.setSize(window.innerWidth, window.innerHeight) */
+    provide('renderer', renderer) */
+    watch(canvas, () => {
+      const { renderer, aspectRatio } = useRenderer(canvas, container, props)
+      const { activeCamera } = useCamera()
 
-    /* const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight)
-      camera.position.set(0, 2, 7) */
+      provide('aspect-ratio', aspectRatio)
+      provide('renderer', renderer)
 
-    /* const controls = new OrbitControls(camera, renderer.domElement)
-      controls.enableDamping = true */
+      /* const controls = new OrbitControls(camera, renderer.domElement)
+        controls.enableDamping = true */
 
-    const scene = new THREE.Scene()
+      const scene = new THREE.Scene()
 
-    const { onLoop } = useRenderLoop()
+      /*    window.addEventListener('resize', () => {
+        renderer.setSize(window.innerWidth, window.innerHeight)
+        camera.aspect = window.innerWidth / window.innerHeight
+        camera.updateProjectionMatrix()
+      })
 
-    onLoop(() => {
-      if (!activeCamera.value) return
-      renderer.value?.render(scene, activeCamera.value)
-    })
+      renderer.setAnimationLoop(() => {
+        renderer.render(scene, camera)
+      }) */
 
-    const internal = slots?.default() || []
+      const { onLoop } = useRenderLoop()
 
-    const internalComponent = defineComponent({
-      name: 'Wrapper',
-      setup() {
-        return () => internal
-      },
-    })
+      onLoop(() => {
+        if (!activeCamera.value) return
 
-    const app = createTres(internalComponent)
-    app.mount(scene)
+        /* raycaster.value.setFromCamera(pointer.value, activeCamera.value) */
+        renderer.value?.render(scene, activeCamera.value)
+      })
 
-    console.log(scene)
+      const internal = slots?.default() || []
 
-    expose({
-      scene,
-      app,
-    })
+      const internalComponent = defineComponent({
+        name: 'Wrapper',
+        setup() {
+          return () => internal
+        },
+      })
+
+      const app = createTres(internalComponent)
+      app.mount(scene)
 
-    onUnmounted(() => {
-      app.unmount()
+      console.log(scene)
+
+      expose({
+        scene,
+        app,
+      })
     })
 
     return () => {
@@ -103,7 +105,6 @@ export const TresCanvas = defineComponent({
 
               pointerEvents: 'auto',
               touchAction: 'none',
-              ...(attrs.style as Record<string, unknown>),
             },
           },
           [

packages/tres/src/core/nodeOps.ts

@@ -1,10 +1,21 @@
-import { useCamera } from '/@/composables'
+import { useCamera, useRaycaster, useRenderLoop } from '/@/composables'
 import { RendererOptions } from 'vue'
 import { useLogger } from '../iternal'
 import { catalogue } from './catalogue'
+import { Mesh } from 'three'
+import { useEventListener } from '@vueuse/core'
 
 const { logWarning } = useLogger()
 
+function hasEvents(obj) {
+  for (var prop in obj) {
+    if (prop.indexOf('on') === 0) {
+      return true
+    }
+  }
+  return false
+}
+
 export const nodeOps: RendererOptions<Node, Element> = {
   createElement(type, _isSVG, _isCustomizedBuiltIn, props) {
     if (type === 'template') return null
@@ -53,6 +64,43 @@ export const nodeOps: RendererOptions<Node, Element> = {
       child.__previousAttach = child[parent.attach]
       parent[child.attach] = child
     }
+
+    const { onLoop } = useRenderLoop()
+
+    // RayCasting
+    let prevInstance: TresEvent | null = null
+    let currentInstance: TresEvent | null = null
+
+    const { raycaster } = useRaycaster()
+    if (child && child instanceof Mesh && hasEvents(child)) {
+      onLoop(() => {
+        if (parent.children && child && raycaster) {
+          const intersects = raycaster.value.intersectObjects(parent.children)
+
+          if (intersects.length > 0 && intersects[0].object.uuid === child.uuid) {
+            currentInstance = intersects[0]
+
+            if (prevInstance === null || prevInstance.object.uuid !== currentInstance?.object.uuid) {
+              child.onPointerEnter?.(currentInstance)
+            }
+
+            child.onPointerMove?.(currentInstance)
+          } else {
+            currentInstance = null
+            if (prevInstance !== null) {
+              child.onPointerLeave?.(prevInstance)
+            }
+          }
+
+          prevInstance = currentInstance
+        }
+      })
+
+      useEventListener(window, 'click', () => {
+        if (currentInstance === null) return
+        child.onClick?.(currentInstance)
+      })
+    }
   },
   remove(node) {
     const parent = node.parent

packages/tres/vite.config.ts

@@ -31,6 +31,11 @@ export default defineConfig({
   plugins: [
     vue({
       isProduction: false,
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+        },
+      },
     }),
     dts({
       insertTypesEntry: true,

pnpm-lock.yaml

@@ -76,23 +76,6 @@ importers:
       vite-plugin-banner: 0.7.0
       vite-plugin-dts: 2.0.0-beta.1_vite@4.1.4
 
-  packages/renderer:
-    specifiers:
-      '@vitejs/plugin-vue': ^4.0.0
-      three: ^0.150.1
-      typescript: ^4.9.3
-      vite: ^4.1.0
-      vue: ^3.2.45
-      vue-tsc: ^1.0.24
-    dependencies:
-      three: 0.150.1
-      vue: 3.2.47
-    devDependencies:
-      '@vitejs/plugin-vue': 4.0.0_vite@4.1.4+vue@3.2.47
-      typescript: 4.9.5
-      vite: 4.1.4
-      vue-tsc: 1.2.0_typescript@4.9.5
-
   packages/tres:
     specifiers:
       '@alvarosabu/utils': ^2.3.0
@@ -338,10 +321,12 @@ packages:
   /@babel/helper-string-parser/7.19.4:
     resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
     engines: {node: '>=6.9.0'}
+    dev: true
 
   /@babel/helper-validator-identifier/7.19.1:
     resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
     engines: {node: '>=6.9.0'}
+    dev: true
 
   /@babel/highlight/7.18.6:
     resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
@@ -358,6 +343,7 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.21.0
+    dev: true
 
   /@babel/runtime/7.21.0:
     resolution: {integrity: sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==}
@@ -399,6 +385,7 @@ packages:
       '@babel/helper-string-parser': 7.19.4
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
+    dev: true
 
   /@bcoe/v8-coverage/0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -1577,45 +1564,6 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@volar/language-core/1.3.0-alpha.0:
-    resolution: {integrity: sha512-W3uMzecHPcbwddPu4SJpUcPakRBK/y/BP+U0U6NiPpUX1tONLC4yCawt+QBJqtgJ+sfD6ztf5PyvPL3hQRqfOA==}
-    dependencies:
-      '@volar/source-map': 1.3.0-alpha.0
-    dev: true
-
-  /@volar/source-map/1.3.0-alpha.0:
-    resolution: {integrity: sha512-jSdizxWFvDTvkPYZnO6ew3sBZUnS0abKCbuopkc0JrIlFbznWC/fPH3iPFIMS8/IIkRxq1Jh9VVG60SmtsdaMQ==}
-    dependencies:
-      muggle-string: 0.2.2
-    dev: true
-
-  /@volar/typescript/1.3.0-alpha.0:
-    resolution: {integrity: sha512-5UItyW2cdH2mBLu4RrECRNJRgtvvzKrSCn2y3v/D61QwIDkGx4aeil6x8RFuUL5TFtV6QvVHXnsOHxNgd+sCow==}
-    dependencies:
-      '@volar/language-core': 1.3.0-alpha.0
-    dev: true
-
-  /@volar/vue-language-core/1.2.0:
-    resolution: {integrity: sha512-w7yEiaITh2WzKe6u8ZdeLKCUz43wdmY/OqAmsB/PGDvvhTcVhCJ6f0W/RprZL1IhqH8wALoWiwEh/Wer7ZviMQ==}
-    dependencies:
-      '@volar/language-core': 1.3.0-alpha.0
-      '@volar/source-map': 1.3.0-alpha.0
-      '@vue/compiler-dom': 3.2.47
-      '@vue/compiler-sfc': 3.2.47
-      '@vue/reactivity': 3.2.47
-      '@vue/shared': 3.2.47
-      minimatch: 6.2.0
-      muggle-string: 0.2.2
-      vue-template-compiler: 2.7.14
-    dev: true
-
-  /@volar/vue-typescript/1.2.0:
-    resolution: {integrity: sha512-zjmRi9y3J1EkG+pfuHp8IbHmibihrKK485cfzsHjiuvJMGrpkWvlO5WVEk8oslMxxeGC5XwBFE9AOlvh378EPA==}
-    dependencies:
-      '@volar/typescript': 1.3.0-alpha.0
-      '@volar/vue-language-core': 1.2.0
-    dev: true
-
   /@vue/compiler-core/3.2.47:
     resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
     dependencies:
@@ -1623,12 +1571,14 @@ packages:
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       source-map: 0.6.1
+    dev: true
 
   /@vue/compiler-dom/3.2.47:
     resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
     dependencies:
       '@vue/compiler-core': 3.2.47
       '@vue/shared': 3.2.47
+    dev: true
 
   /@vue/compiler-sfc/3.2.47:
     resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
@@ -1643,12 +1593,14 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.21
       source-map: 0.6.1
+    dev: true
 
   /@vue/compiler-ssr/3.2.47:
     resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
     dependencies:
       '@vue/compiler-dom': 3.2.47
       '@vue/shared': 3.2.47
+    dev: true
 
   /@vue/devtools-api/6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -1662,17 +1614,20 @@ packages:
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       magic-string: 0.25.9
+    dev: true
 
   /@vue/reactivity/3.2.47:
     resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
     dependencies:
       '@vue/shared': 3.2.47
+    dev: true
 
   /@vue/runtime-core/3.2.47:
     resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==}
     dependencies:
       '@vue/reactivity': 3.2.47
       '@vue/shared': 3.2.47
+    dev: true
 
   /@vue/runtime-dom/3.2.47:
     resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==}
@@ -1680,6 +1635,7 @@ packages:
       '@vue/runtime-core': 3.2.47
       '@vue/shared': 3.2.47
       csstype: 2.6.21
+    dev: true
 
   /@vue/server-renderer/3.2.47:
     resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
@@ -1699,9 +1655,11 @@ packages:
       '@vue/compiler-ssr': 3.2.47
       '@vue/shared': 3.2.47
       vue: 3.2.47
+    dev: true
 
   /@vue/shared/3.2.47:
     resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
+    dev: true
 
   /@vue/test-utils/2.3.0:
     resolution: {integrity: sha512-S8/9Z+B4VSsTUNtZtzS7J1TfxJbf10n+gcH9X8cASbG0Tp7qD6vqs/sUNlmpzk6i7+pP00ptauJp9rygyW89Ww==}
@@ -2485,6 +2443,7 @@ packages:
 
   /csstype/2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: true
 
   /csv-generate/3.4.3:
     resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}
@@ -2530,10 +2489,6 @@ packages:
     resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==}
     dev: true
 
-  /de-indent/1.0.2:
-    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
-    dev: true
-
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -2997,6 +2952,7 @@ packages:
 
   /estree-walker/2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
 
   /esutils/2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -4068,6 +4024,7 @@ packages:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
       sourcemap-codec: 1.4.8
+    dev: true
 
   /magic-string/0.27.0:
     resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
@@ -4194,13 +4151,6 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
-  /minimatch/6.2.0:
-    resolution: {integrity: sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==}
-    engines: {node: '>=10'}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: true
-
   /minimist-options/4.1.0:
     resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
     engines: {node: '>= 6'}
@@ -4252,14 +4202,11 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
-  /muggle-string/0.2.2:
-    resolution: {integrity: sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==}
-    dev: true
-
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
+    dev: true
 
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -4586,6 +4533,7 @@ packages:
 
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: true
 
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -4637,6 +4585,7 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
 
   /potpack/1.0.2:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
@@ -5052,6 +5001,7 @@ packages:
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /source-map-support/0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -5063,6 +5013,7 @@ packages:
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /source-map/0.7.4:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
@@ -5072,6 +5023,7 @@ packages:
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
+    dev: true
 
   /spawndamnit/2.0.0:
     resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==}
@@ -5326,6 +5278,7 @@ packages:
 
   /three/0.150.1:
     resolution: {integrity: sha512-5C1MqKUWaHYo13BX0Q64qcdwImgnnjSOFgBscOzAo8MYCzEtqfQqorEKMcajnA3FHy1yVlIe9AmaMQ0OQracNA==}
+    dev: true
 
   /through/2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
@@ -5372,6 +5325,7 @@ packages:
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
+    dev: true
 
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -5948,24 +5902,6 @@ packages:
       - supports-color
     dev: true
 
-  /vue-template-compiler/2.7.14:
-    resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
-    dependencies:
-      de-indent: 1.0.2
-      he: 1.2.0
-    dev: true
-
-  /vue-tsc/1.2.0_typescript@4.9.5:
-    resolution: {integrity: sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==}
-    hasBin: true
-    peerDependencies:
-      typescript: '*'
-    dependencies:
-      '@volar/vue-language-core': 1.2.0
-      '@volar/vue-typescript': 1.2.0
-      typescript: 4.9.5
-    dev: true
-
   /vue/3.2.47:
     resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
     dependencies:
@@ -5974,6 +5910,7 @@ packages:
       '@vue/runtime-dom': 3.2.47
       '@vue/server-renderer': 3.2.47_vue@3.2.47
       '@vue/shared': 3.2.47
+    dev: true
 
   /w3c-xmlserializer/4.0.0:
     resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}