feat(nuxt): runtime plugin add provides there

packages/cientos/src/components/OrbitControls.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { Camera, Vector3 } from 'three'
+import { OrbitControls } from 'three-stdlib'
+import { ref, watch, unref, 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 { state, setState, extend } = useCientos()
+
+const controls = ref(null)
+
+extend({ OrbitControls })
+
+watch(controls, value => {
+  if (value && props.makeDefault) {
+    setState('controls', value)
+  } else {
+    setState('controls', null)
+  }
+})
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="state.camera && state.renderer"
+    ref="controls"
+    :args="[unref(state.camera), state.renderer?.domElement]"
+    :enabling-dampling="enableDamping"
+  />
+</template>

packages/cientos/src/components/index.ts

@@ -0,0 +1,3 @@
+import OrbitControls from './OrbitControls.vue'
+
+export { OrbitControls }

packages/nuxt/package.json

@@ -39,6 +39,7 @@
     "changelogen": "^0.4.1",
     "eslint": "^8.35.0",
     "nuxt": "^3.2.3",
+    "vite-plugin-glsl": "^1.1.2",
     "vitest": "^0.29.1"
   }
 }

packages/nuxt/playground/components/TheExperience.vue → packages/nuxt/playground/components/TheExperience.client.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
+import { useTexture } from '@tresjs/core'
+import { Text3D } from '@tresjs/cientos'
 import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
 const state = reactive({
   clearColor: '#82DBC5',
@@ -9,11 +10,13 @@ const state = reactive({
   outputEncoding: sRGBEncoding,
   toneMapping: NoToneMapping,
 })
+
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
 </script>
 <template>
   <TresCanvas v-bind="state">
-    <!-- <OrbitControls make-default /> -->
-    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+    <!--     <OrbitControls make-default /> -->
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
 
     <TresScene>
       <TresAmbientLight :intensity="1" />
@@ -22,6 +25,13 @@ const state = reactive({
         <TresSphereGeometry />
         <TresMeshToonMaterial color="#FBB03B" />
       </TresMesh>
+      <Text3D
+        :position="[-1, 0, 0]"
+        font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json"
+      >
+        TresJS
+        <TresMeshMatcapMaterial :matcap="matcapTexture" />
+      </Text3D>
     </TresScene>
   </TresCanvas>
 </template>

packages/nuxt/playground/nuxt.config.ts

@@ -1,4 +1,6 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  myModule: {}
+  tres: {
+    modules: ['cientos'],
+  },
 })

packages/nuxt/src/module.ts

@@ -9,11 +9,12 @@ import {
   addImportsDir,
 } from '@nuxt/kit'
 import * as THREE from 'three'
-
+import glsl from 'vite-plugin-glsl'
 // Module options TypeScript inteface definition
 export interface ModuleOptions {
   prefix?: string
   modules?: string[]
+  shaders?: boolean
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -29,6 +30,7 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     prefix: 'Tres',
     modules: [],
+    shaders: false,
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)
@@ -36,18 +38,37 @@ export default defineNuxtModule<ModuleOptions>({
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     addPlugin(resolver.resolve('./runtime/plugin'))
 
+    for (const comp in THREE) {
+      if (comp === 'Scene') continue
+      addTemplate({
+        filename: `tres/three/${comp}.ts`,
+        getContents: () => `
+        import { ref } from 'vue'
+        import createComponentInstances from '../instance-creator'
+        import { ${comp} } from 'three'
+        const component = /* #__PURE__ */ createComponentInstances(ref({ ${comp} }))
+        export default component[0][1]
+        `,
+      })
+      addComponent({
+        name: `${options.prefix}${comp}`,
+        filePath: `#build/tres/three/${comp}.ts`,
+        /* mode: 'client', */
+      })
+    }
+
     // Register core components
     addComponent({
       name: `${options.prefix}Canvas`,
       filePath: '@tresjs/core',
       export: 'TresCanvas',
-      mode: 'client',
+      /* mode: 'client', */
     })
     addComponent({
       name: `${options.prefix}Scene`,
       filePath: '@tresjs/core',
       export: 'TresScene',
-      mode: 'client',
+      /* mode: 'client', */
     })
 
     addTemplate({
@@ -59,34 +80,19 @@ export default defineNuxtModule<ModuleOptions>({
       `,
     })
 
-    for (const comp in THREE) {
-      if (comp === 'SCENE') continue
-      addTemplate({
-        filename: `tres/three/${comp}.ts`,
-        getContents: () => `
-        import { ref } from 'vue'
-        import createComponentInstances from '../instance-creator'
-        import { ${comp} } from 'three'
-        const component = /* #__PURE__ */ createComponentInstances(ref({ ${comp} }))
-        console.log({component})
-        export default component[0][1]
-        `,
-      })
-      addComponent({
-        name: `${options.prefix}${comp}`,
-        filePath: `#build/tres/three/${comp}.ts`,
-        mode: 'client',
-      })
-    }
-
-    for (const module of options.modules || []) {
+    // Add other modules
+    /* for (const module of options.modules || []) {
       nuxt.options.build.transpile.push(`@tresjs/${module}`)
       addComponentsDir({
-        path: `@tresjs/${module}/components`,
+        path: `@tresjs/${module}/src/components`,
       })
-      addImportsDir(`@tresjs/${module}/composables`)
+      console.log({
+        module,
+      })
+      addImportsDir(`@tresjs/${module}/src/composables`)
+    } */
+    if (options.shaders) {
+      addVitePlugin(glsl())
     }
-
-    // addVitePlugin()
   },
 })

packages/nuxt/src/runtime/plugin.ts

@@ -1,9 +1,10 @@
-import Tres from '@tresjs/core'
 import { defineNuxtPlugin } from '#app'
+import { useCatalogue } from '@tresjs/core'
 
 export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.provide('catalogue', ref({}))
-  nuxtApp.vueApp.provide('extends', () => {})
+  const { catalogue, extend } = useCatalogue(nuxtApp.vueApp, 'Tres')
+  nuxtApp.vueApp.provide('catalogue', catalogue)
+  nuxtApp.vueApp.provide('extend', extend)
   // nuxtApp.vueApp.use(Tres)
   // const prefix = options?.prefix || 'Tres'
   // // Register core components

packages/tres/package.json

@@ -69,7 +69,6 @@
     "vite": "^4.1.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.0.0-beta.1",
-    "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-inspect": "^0.7.15",
     "vite-plugin-require-transform": "^1.0.9",
     "vitest": "^0.28.5",

packages/tres/src/core/index.ts

@@ -8,3 +8,7 @@ export * from './useLoader'
 export * from './useTexture'
 export * from './useTres'
 export * from './useRaycaster'
+import { TresCanvas } from './useRenderer/component'
+import { Scene as TresScene } from './useScene/component'
+
+export { TresCanvas, TresScene }

packages/tres/src/index.ts

@@ -5,7 +5,6 @@ import { useCatalogue, useInstanceCreator, useTres } from '/@/core'
 export * from '/@/core'
 export * from './keys'
 export * from './types'
-export { TresCanvas, Scene }
 
 export interface TresOptions {
   prefix?: string

pnpm-lock.yaml

@@ -88,6 +88,7 @@ importers:
       eslint: ^8.35.0
       nuxt: ^3.2.3
       three: ^0.150.1
+      vite-plugin-glsl: ^1.1.2
       vitest: ^0.29.1
     dependencies:
       '@nuxt/kit': 3.2.3
@@ -101,6 +102,7 @@ importers:
       changelogen: 0.4.1
       eslint: 8.35.0
       nuxt: 3.2.3_eslint@8.35.0
+      vite-plugin-glsl: 1.1.2
       vitest: 0.29.2
 
   packages/nuxt/playground:
@@ -9643,6 +9645,17 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-glsl/1.1.2:
+    resolution: {integrity: sha512-zmXsfc1vn2MlYve9t3FAoWuhLyoCkNS1TuQL+TkXZL7tGmBjRErp10eNYxcse5tK9oUC5MyJpNc4ElpQnx8DoA==}
+    engines: {node: '>= 16.15.1', npm: '>= 8.11.0'}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /vite-plugin-glsl/1.1.2_vite@4.1.4:
     resolution: {integrity: sha512-zmXsfc1vn2MlYve9t3FAoWuhLyoCkNS1TuQL+TkXZL7tGmBjRErp10eNYxcse5tK9oUC5MyJpNc4ElpQnx8DoA==}
     engines: {node: '>= 16.15.1', npm: '>= 8.11.0'}