feat(nuxt): lot of awesome stuff from Daniel 🤩

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

@@ -12,7 +12,7 @@ const state = reactive({
 </script>
 <template>
   <TresCanvas v-bind="state">
-    <OrbitControls make-default />
+    <!-- <OrbitControls make-default /> -->
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
 
     <TresScene>

packages/nuxt/src/module.ts

@@ -1,23 +1,92 @@
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import {
+  defineNuxtModule,
+  addPlugin,
+  createResolver,
+  addComponent,
+  addTemplate,
+  addVitePlugin,
+  addComponentsDir,
+  addImportsDir,
+} from '@nuxt/kit'
+import * as THREE from 'three'
 
 // Module options TypeScript inteface definition
-export interface ModuleOptions {}
+export interface ModuleOptions {
+  prefix?: string
+  modules?: string[]
+}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: '@tresjs/nuxt',
-    configKey: 'tresjs',
+    configKey: 'tres',
     compatibility: {
       // Semver version of supported nuxt versions
       nuxt: '^3.0.0',
     },
   },
   // Default configuration options of the Nuxt module
-  defaults: {},
+  defaults: {
+    prefix: 'Tres',
+    modules: [],
+  },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     addPlugin(resolver.resolve('./runtime/plugin'))
+
+    // Register core components
+    addComponent({
+      name: `${options.prefix}Canvas`,
+      filePath: '@tresjs/core',
+      export: 'TresCanvas',
+      mode: 'client',
+    })
+    addComponent({
+      name: `${options.prefix}Scene`,
+      filePath: '@tresjs/core',
+      export: 'TresScene',
+      mode: 'client',
+    })
+
+    addTemplate({
+      filename: 'tres/instance-creator.ts',
+      getContents: () => `
+      import { useInstanceCreator } from '@tresjs/core'
+      const { createComponentInstances } = useInstanceCreator('${options.prefix}')
+      export default createComponentInstances
+      `,
+    })
+
+    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 || []) {
+      nuxt.options.build.transpile.push(`@tresjs/${module}`)
+      addComponentsDir({
+        path: `@tresjs/${module}/components`,
+      })
+      addImportsDir(`@tresjs/${module}/composables`)
+    }
+
+    // addVitePlugin()
   },
 })

packages/nuxt/src/runtime/plugin.ts

@@ -2,5 +2,22 @@ import Tres from '@tresjs/core'
 import { defineNuxtPlugin } from '#app'
 
 export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(Tres)
+  nuxtApp.vueApp.provide('catalogue', ref({}))
+  nuxtApp.vueApp.provide('extends', () => {})
+  // nuxtApp.vueApp.use(Tres)
+  // const prefix = options?.prefix || 'Tres'
+  // // Register core components
+  // app.component(`${prefix}Canvas`, TresCanvas)
+  // app.component(`${prefix}Scene`, Scene)
+  // // Initialize catalogue
+  // const { catalogue, extend } = useCatalogue(app, prefix)
+  // app.provide('catalogue', catalogue)
+  // app.provide('extend', extend)
+  // app.provide('useTres', useTres())
+  // // Create components from catalogue
+  // const { createComponentInstances } = useInstanceCreator(prefix)
+  // const components = createComponentInstances(catalogue)
+  // components.forEach(([key, cmp]) => {
+  //   app.component(key as string, cmp as Component)
+  // })
 })

packages/tres/src/components/Shapes.vue

@@ -16,7 +16,7 @@ import {
   Circle,
   Cone,
   OrbitControls,
-} from '../../../cientos/src/'
+} from '@tresjs/cientos'
 
 const state = reactive({
   clearColor: '#82DBC5',
@@ -92,7 +92,7 @@ const tubePath = new CubicBezierCurve3(
       <Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>
         <TresMeshToonMaterial color="teal" />
       </Plane>
-      <Box ref="boxRef" :arg0s="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
+      <Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
         <TresMeshToonMaterial color="orange" />
       </Box>
       <Sphere ref="sphereRef" :args="[1, 32, 16]" :position="[2, 6, 0]" cast-shadow>

packages/tres/src/components/TheEnvironment.vue

@@ -29,12 +29,12 @@ watch(environmentTexture, ({ getTexture }) => {
   <!--   <TresCanvas v-bind="state"> -->
   <TresCanvas preset="realistic">
     <TresPerspectiveCamera :position="[10, 10, 18]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <PamCameraMouse :factor="2" />
+
     <TresScene>
       <Environment
         ref="environmentTexture"
-        background
         :files="environmentFiles"
+        background
         :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
       />
       <!--  <Environment ref="environmentTexture" background preset="sunset" /> -->

packages/tres/src/index.ts

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