feat(core): adding composables to the solution

docs/examples/text-3d.md

@@ -95,7 +95,7 @@ So the final code would be something like this:
 <script setup lang="ts">
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
-import { useCatalogue, useTexture } from '/@/core'
+import { useCatalogue, useTexture } from '/@/composables'
 const { extend } = useCatalogue()
 
 extend({ TextGeometry: TextGeometry })

packages/tres/src/App.vue

@@ -8,8 +8,8 @@ useTweakPane()
 
 <template>
   <Suspense>
-    <TresCanvas>
-      <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <TresCanvas window-size>
+      <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" :position="[0, 2, 8]" />
       <TresAmbientLight />
       <TresDirectionalLight :intensity="1" color="yellow" :position="[-2, 0, 3]" />
       <TresGridHelper :args="[4, 4]"></TresGridHelper>

packages/tres/src/components/TresCanvas.ts

@@ -1,9 +1,11 @@
-import { defineComponent, h, onUnmounted, PropType, ref, watchEffect } from 'vue'
+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 { extend, createTres } from '/@/core/renderer'
+import { createTres } from '/@/core/renderer'
+import { useCamera, useRenderer, useTres } from '/@/composables'
 
 export const TresCanvas = defineComponent({
   name: 'TresCanvas',
@@ -30,57 +32,62 @@ export const TresCanvas = defineComponent({
     clearColor: String,
     windowSize: { type: Boolean, default: false },
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { slots, attrs, expose }) {
     const container = ref<HTMLElement>()
     const canvas = ref<HTMLCanvasElement>()
+    const { state, setState } = useTres()
 
-    watchEffect(() => {
-      const renderer = new THREE.WebGLRenderer({
+    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)
+      renderer.setSize(window.innerWidth, window.innerHeight) */
 
-      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight)
-      camera.position.set(0, 2, 7)
+    /* const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight)
+      camera.position.set(0, 2, 7) */
 
-      /* const controls = new OrbitControls(camera, renderer.domElement)
+    /* const controls = new OrbitControls(camera, renderer.domElement)
       controls.enableDamping = true */
 
-      const scene = new THREE.Scene()
+    const scene = new THREE.Scene()
 
-      window.addEventListener('resize', () => {
-        renderer.setSize(window.innerWidth, window.innerHeight)
-        camera.aspect = window.innerWidth / window.innerHeight
-        camera.updateProjectionMatrix()
-      })
+    const { onLoop } = useRenderLoop()
 
-      renderer.setAnimationLoop(() => {
-        /* controls.update() */
-        renderer.render(scene, camera)
-      })
+    onLoop(() => {
+      if (!activeCamera.value) return
+      renderer.value?.render(scene, activeCamera.value)
+    })
 
-      const internal = slots?.default() || []
+    const internal = slots?.default() || []
 
-      const internalComponent = defineComponent({
-        name: 'Wrapper',
-        setup() {
-          return () => internal
-        },
-      })
+    const internalComponent = defineComponent({
+      name: 'Wrapper',
+      setup() {
+        return () => internal
+      },
+    })
 
-      const app = createTres(internalComponent)
-      app.mount(scene)
+    const app = createTres(internalComponent)
+    app.mount(scene)
 
-      console.log(app)
+    console.log(scene)
 
-      onUnmounted(() => {
-        app.unmount()
-      })
+    expose({
+      scene,
+      app,
+    })
+
+    onUnmounted(() => {
+      app.unmount()
     })
 
     return () => {

packages/tres/src/composables/useCamera/index.ts

@@ -1,7 +1,7 @@
-import { useTres } from '/@/core/'
+import { useTres } from '/@/composables/'
 import { PerspectiveCamera, OrthographicCamera } from 'three'
 
-import { toRef, watch, Ref, inject } from 'vue'
+import { toRef, watch, Ref, inject, watchEffect } from 'vue'
 
 export enum CameraType {
   Perspective = 'Perspective',
@@ -104,8 +104,8 @@ let camera: Camera
  * @return {*}  {UseCameraReturn}
  */
 export function useCamera(): UseCameraReturn {
-  const { state, setState } = useTres()
-  const aspectRatio = inject('aspect-ratio')
+  const { state, setState, aspectRatio } = useTres()
+  /* const aspectRatio = inject('aspect-ratio') */
   /**
    * Create camera and push to Tres `state.cameras` array
    *
@@ -182,9 +182,12 @@ export function useCamera(): UseCameraReturn {
   function clearCameras() {
     state.cameras = []
   }
-  if (aspectRatio) {
-    watch(aspectRatio, updateCamera)
-  }
+
+  watchEffect(() => {
+    if (aspectRatio?.value) {
+      updateCamera()
+    }
+  })
 
   return {
     activeCamera: toRef(state, 'camera'),

packages/tres/src/composables/useCatalogue/index.ts

@@ -1,6 +1,6 @@
 import { App, ref, Component, Ref } from 'vue'
 import * as THREE from 'three'
-import { useInstanceCreator } from '/@/core'
+import { useInstanceCreator } from '/@/composables'
 import { useLogger } from '../../iternal'
 import { TresCatalogue } from '/@/types'
 

packages/tres/src/composables/useInstanceCreator/index.ts

@@ -6,7 +6,7 @@ import { useEventListener } from '@vueuse/core'
 
 import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
 import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
-import { useCamera, useCatalogue, useRenderLoop, useTres } from '/@/core/'
+import { useCamera, useCatalogue, useRenderLoop, useTres } from '/@/composables/'
 import { useLogger } from '../../iternal'
 import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType, TresEvent } from '/@/types'
 

packages/tres/src/composables/useRaycaster/index.ts

@@ -1,6 +1,6 @@
 import { Raycaster, Vector2 } from 'three'
 import { onUnmounted, provide, Ref, ref, ShallowRef, shallowRef } from 'vue'
-import { useTres } from '/@/core'
+import { useTres } from '/@/composables'
 
 const raycaster = shallowRef(new Raycaster())
 const pointer = ref(new Vector2())

packages/tres/src/composables/useRenderer/index.ts

@@ -19,7 +19,7 @@ import {
   Clock,
 } from 'three'
 import type { TextureEncoding, ToneMapping } from 'three'
-import { useRenderLoop, useTres } from '/@/core/'
+import { useRenderLoop, useTres } from '/@/composables/'
 import { normalizeColor } from '/@/utils/normalize'
 import { TresColor } from '/@/types'
 import { rendererPresets, RendererPresetsType } from './const'

packages/tres/src/composables/useTres/index.ts

@@ -1,6 +1,6 @@
 import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three'
 import { computed, ComputedRef, shallowReactive, toRefs } from 'vue'
-import { Camera } from '/@/core'
+import { Camera } from '/@/composables'
 
 export interface TresState {
   /**

packages/tres/src/core/nodeOps.ts

@@ -1,7 +1,10 @@
-import { useCamera } from '@tresjs/core'
+import { useCamera } from '/@/composables'
 import { RendererOptions } from 'vue'
+import { useLogger } from '../iternal'
 import { catalogue } from './catalogue'
 
+const { logWarning } = useLogger()
+
 export const nodeOps: RendererOptions<Node, Element> = {
   createElement(type, _isSVG, _isCustomizedBuiltIn, props) {
     if (type === 'template') return null
@@ -18,6 +21,11 @@ export const nodeOps: RendererOptions<Node, Element> = {
     }
 
     if (instance.isCamera) {
+      // Let users know that camera is in the center of the scene
+      logWarning(
+        // eslint-disable-next-line max-len
+        'Camera is positioned at the center of the scene, if this is not intentional try setting a position if your scene seems empty 🤗',
+      )
       const { pushCamera } = useCamera()
       pushCamera(instance)
     }
@@ -76,10 +84,10 @@ export const nodeOps: RendererOptions<Node, Element> = {
     }
 
     let value = nextValue
-    try {
+    /*   try {
       const num = parseFloat(value)
-      value = isNaN(num) ? JSON.parse(value) : num
-    } catch (_) {}
+      value = isNaN(num) ? value : num
+    } catch (_) {} */
 
     // Set prop, prefer atomic methods if applicable
     if (!target?.set) root[key] = value

packages/tres/src/demos/TestSphere.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Ref, ref } from 'vue'
-import { useRenderLoop, useTexture } from '/@/core/'
+import { useRenderLoop, useTexture } from '/@/composables/'
 import { TresInstance } from '../types'
 
 const sphereRef: Ref<TresInstance | null> = ref(null)

packages/tres/src/demos/Text3D.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
-import { useCatalogue, useTexture } from '/@/core'
+import { useCatalogue, useTexture } from '/@/composables'
 const { extend } = useCatalogue()
 
 extend({ TextGeometry: TextGeometry })

packages/tres/src/demos/TheGroups.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRenderLoop } from '/@/core/useRenderLoop'
+import { useRenderLoop } from '/@/composables/useRenderLoop'
 import { ref } from 'vue'
 import { OrbitControls } from '../../../cientos/src/'
 

packages/tres/src/index.ts

@@ -1,8 +1,8 @@
 import { App, Component } from 'vue'
-import { TresCanvas } from '/@/core/useRenderer/component'
-import { Scene } from '/@/core/useScene/component'
-import { useCatalogue, useInstanceCreator, useTres } from '/@/core'
-export * from '/@/core'
+import { TresCanvas } from '/@/composables/useRenderer/component'
+import { Scene } from '/@/composables/useScene/component'
+import { useCatalogue, useInstanceCreator, useTres } from '/@/composables'
+export * from '/@/composables'
 export * from './keys'
 export * from './types'