feat: expose state from TresCanvas

package.json

@@ -67,37 +67,37 @@
     "@stackblitz/sdk": "^1.8.1",
     "@tresjs/cientos": "2.0.0-alpha.5",
     "@types/three": "latest",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-c8": "^0.29.2",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitest/coverage-c8": "^0.29.8",
     "@vitest/ui": "^0.29.2",
-    "@vue/test-utils": "^2.3.1",
-    "eslint": "^8.26.0",
+    "@vue/test-utils": "^2.3.2",
+    "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vue": "^9.10.0",
     "gsap": "^3.11.4",
     "happy-dom": "^8.7.1",
     "jsdom": "^21.1.0",
     "kolorist": "^1.7.0",
     "pathe": "^1.1.0",
-    "prettier": "^2.8.6",
-    "release-it": "^15.9.1",
+    "prettier": "^2.8.7",
+    "release-it": "^15.10.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "three": "latest",
-    "unocss": "^0.48.0",
+    "unocss": "^0.50.6",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.1.4",
+    "vite": "^4.2.1",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "2.1.0",
-    "vite-plugin-inspect": "^0.7.16",
-    "vite-plugin-require-transform": "^1.0.9",
+    "vite-plugin-dts": "2.2.0",
+    "vite-plugin-inspect": "^0.7.18",
+    "vite-plugin-require-transform": "^1.0.12",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-alpha.38",
-    "vitest": "^0.29.2",
+    "vitepress": "1.0.0-alpha.65",
+    "vitest": "^0.29.8",
     "vue-demi": "^0.13.11"
   }
 }

playground/src/components/TheExperience.vue

@@ -13,21 +13,16 @@ import {
   ACESFilmicToneMapping,
   CustomToneMapping,
 } from 'three'
+import { TresCanvas } from '/@/'
 import { reactive, ref } from 'vue'
-import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos/'
-import { useCamera } from '../core'
-import { TresCanvas } from '../core/useRenderer/component'
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
-
-const { updateCamera } = useCamera()
+import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
 
-updateCamera
+/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
-const state = reactive({
+const gl = reactive({
   clearColor: '#201919',
   shadows: true,
   alpha: false,
-  useLegacyLights: true,
   shadowMapType: BasicShadowMap,
   outputEncoding: sRGBEncoding,
   toneMapping: NoToneMapping,
@@ -37,16 +32,13 @@ const sphereRef = ref()
 
 const { pane } = useTweakPane()
 
-pane.addInput(state, 'clearColor', {
+pane.addInput(gl, 'clearColor', {
   label: 'Background Color',
   colorMode: 'hex',
 })
-pane.addInput(state, 'shadows', {
+pane.addInput(gl, 'shadows', {
   label: 'Shadows',
 })
-pane.addInput(state, 'useLegacyLights', {
-  label: 'useLegacyLights',
-})
 
 pane
   .addBlade({
@@ -59,7 +51,7 @@ pane
     value: sRGBEncoding,
   })
   .on('change', ev => {
-    state.outputEncoding = ev.value
+    gl.outputEncoding = ev.value
   })
 
 pane
@@ -75,7 +67,7 @@ pane
     value: BasicShadowMap,
   })
   .on('change', ev => {
-    state.shadowMapType = ev.value
+    gl.shadowMapType = ev.value
   })
 
 pane
@@ -94,50 +86,33 @@ pane
   })
   .on('change', ev => {
     console.log(ev.value)
-    state.toneMapping = ev.value
+    gl.toneMapping = ev.value
   })
 
-function onPointerEnter(ev) {
-  console.log('onPointerEnter', ev)
-}
-
-function onPointerMove(ev) {
-  console.log('onPointerMove', ev)
-}
+const canvasRef = ref(null)
 
-function onPointerLeave(ev) {
-  console.log('onPointerLeave', ev)
-}
-function onClick(ev) {
-  console.log('click', ev)
-}
+watchEffect(() => {
+  if (canvasRef.value) {
+    console.log(canvasRef.value)
+  }
+})
 </script>
 <template>
-  <TresCanvas v-bind="state">
+  <TresCanvas v-bind="gl" ref="canvasRef">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <OrbitControls make-default />
-    <TresScene>
-      <TresAmbientLight :intensity="0.5" />
-      <TransformControls mode="scale" :object="sphereRef" />
+    <TresAmbientLight :intensity="0.5" />
+    <TransformControls mode="scale" :object="sphereRef" />
 
-      <TresMesh
-        ref="sphereRef"
-        :position="[0, 4, 0]"
-        cast-shadow
-        @pointer-enter="onPointerEnter"
-        @pointer-move="onPointerMove"
-        @pointer-leave="onPointerLeave"
-        @click="onClick"
-      >
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
+    <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
+      <TresSphereGeometry />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial />
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
   </TresCanvas>
 </template>

playground/src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <AnimatedModel />
+    <MultipleCanvas />
   </Suspense>
 </template>

src/components/TresCanvas.ts

@@ -40,8 +40,10 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     'windowSize',
     'preset',
   ] as unknown as undefined,
-  setup(props, { slots }) {
-    useTresProvider()
+  setup(props, { slots, expose }) {
+    const tres = useTresProvider()
+
+    expose(tres)
 
     return () => h(TresScene, props, slots)
   },

src/composables/useTres/index.ts

@@ -1,7 +1,7 @@
 import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three'
 import { generateUUID } from 'three/src/math/MathUtils'
 import { computed, ComputedRef, inject, provide, shallowReactive, toRefs } from 'vue'
-import { Camera, useLogger } from '/@/composables'
+import { Camera } from '/@/composables'
 
 export interface TresState {
   /**
@@ -151,10 +151,14 @@ export function useTresProvider() {
 }
 
 export const useTres = () => {
-  const context = inject<UseTresReturn>(TRES_CONTEXT_KEY)
-  const { logError } = useLogger()
-
-  if (!context) logError('useTres must be used together with useTresProvider')
+  const context = inject<Partial<UseTresReturn>>(TRES_CONTEXT_KEY, {
+    state: shallowReactive({
+      camera: undefined,
+      cameras: [],
+      scene: undefined,
+      renderer: undefined,
+    }),
+  })
 
   return context as UseTresReturn
 }