Merge pull request #210 from Tresjs/bugfix/209-usetres-doesnt-get-updated-on-subcomponent

fix: 209 usetres doesnt get updated on subcomponent

playground/components.d.ts

@@ -38,6 +38,7 @@ declare module '@vue/runtime-core' {
     TheParticles: typeof import('./src/components/TheParticles.vue')['default']
     ThePortal: typeof import('./src/components/portal-journey/ThePortal.vue')['default']
     TheSmallExperience: typeof import('./src/components/TheSmallExperience.vue')['default']
+    TheSphere: typeof import('./src/components/TheSphere.vue')['default']
     VectorSetProps: typeof import('./src/components/VectorSetProps.vue')['default']
   }
 }

playground/src/components/TheExperience.vue

@@ -1,118 +1,42 @@
 <script setup lang="ts">
-import {
-  sRGBEncoding,
-  LinearEncoding,
-  BasicShadowMap,
-  PCFShadowMap,
-  PCFSoftShadowMap,
-  VSMShadowMap,
-  NoToneMapping,
-  LinearToneMapping,
-  ReinhardToneMapping,
-  CineonToneMapping,
-  ACESFilmicToneMapping,
-  CustomToneMapping,
-} from 'three'
+import { reactive, ref, watchEffect, provide } from 'vue'
+import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
 import { TresCanvas } from '/@/'
-import { reactive, ref } from 'vue'
-import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
+import TheSphere from './TheSphere.vue'
+import { OrbitControls } from '@tresjs/cientos'
 
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
-
-const gl = reactive({
-  clearColor: '#201919',
+const gl = {
+  clearColor: '#82DBC5',
   shadows: true,
   alpha: false,
   shadowMapType: BasicShadowMap,
   outputEncoding: sRGBEncoding,
   toneMapping: NoToneMapping,
-})
-
-const sphereRef = ref()
-
-const { pane } = useTweakPane()
-
-pane.addInput(gl, 'clearColor', {
-  label: 'Background Color',
-  colorMode: 'hex',
-})
-pane.addInput(gl, 'shadows', {
-  label: 'Shadows',
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'outputEncoding',
-    options: [
-      { text: 'sRGBEncoding', value: sRGBEncoding },
-      { text: 'LinearEncoding', value: LinearEncoding },
-    ],
-    value: sRGBEncoding,
-  })
-  .on('change', ev => {
-    gl.outputEncoding = ev.value
-  })
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'ShadowMap Type',
-    options: [
-      { text: 'BasicShadowMap', value: BasicShadowMap },
-      { text: 'PCFShadowMap', value: PCFShadowMap },
-      { text: 'PCFSoftShadowMap', value: PCFSoftShadowMap },
-      { text: 'VSMShadowMap', value: VSMShadowMap },
-    ],
-    value: BasicShadowMap,
-  })
-  .on('change', ev => {
-    gl.shadowMapType = ev.value
-  })
+}
 
-pane
-  .addBlade({
-    view: 'list',
-    label: 'toneMapping',
-    options: [
-      { text: 'NoToneMapping', value: NoToneMapping },
-      { text: 'LinearToneMapping', value: LinearToneMapping },
-      { text: 'ReinhardToneMapping', value: ReinhardToneMapping },
-      { text: 'CineonToneMapping', value: CineonToneMapping },
-      { text: 'ACESFilmicToneMapping', value: ACESFilmicToneMapping },
-      { text: 'CustomToneMapping', value: CustomToneMapping },
-    ],
-    value: NoToneMapping,
-  })
-  .on('change', ev => {
-    console.log(ev.value)
-    gl.toneMapping = ev.value
-  })
-
-const canvasRef = ref(null)
+const context = ref()
 
 watchEffect(() => {
-  if (canvasRef.value) {
-    console.log(canvasRef.value)
+  if (context.value) {
+    console.log({ context: context.value })
   }
 })
 </script>
-<template>
-  <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 />
-    <TresAmbientLight :intensity="0.5" />
-    <TransformControls mode="scale" :object="sphereRef" />
 
-    <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
-      <TresSphereGeometry />
-      <TresMeshToonMaterial color="#FBB03B" />
+<template>
+  <TresCanvas v-bind="gl" ref="context">
+    <TresPerspectiveCamera :position="[7, 7, 7]" :look-at="[0, 4, 0]" />
+    <OrbitControls />
+    <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
+      <TresConeGeometry :args="[1, 1.5, 3]" />
+      <TresMeshToonMaterial color="#82DBC5" />
     </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 :position="[0, 4, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
     </TresMesh>
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
+    <TheSphere />
+    <TresAxesHelper :args="[1]" />
+    <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
   </TresCanvas>
 </template>

playground/src/components/TheSphere.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useTres } from '/@/'
+import { watchEffect } from 'vue'
+
+const { state } = useTres()
+
+watchEffect(() => {
+  console.log(state)
+})
+</script>
+<template>
+  <TresMesh :position="[2, 2, 0]" cast-shadow>
+    <TresSphereGeometry />
+    <TresMeshToonMaterial color="#FBB03B" />
+  </TresMesh>
+</template>

playground/src/pages/index.vue

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

src/components/TresScene.ts

@@ -1,8 +1,8 @@
-import { App, defineComponent, h, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { App, defineComponent, h, onMounted, onUnmounted, provide, ref, watchEffect } from 'vue'
 import * as THREE from 'three'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
 import { createTres } from '/@/core/renderer'
-import { useLogger } from '/@/composables'
+import { TRES_CONTEXT_KEY, useLogger } from '/@/composables'
 import { useCamera, useRenderer, useRenderLoop, useRaycaster, useTres } from '/@/composables'
 import { extend } from '/@/core/catalogue'
 import { RendererPresetsType } from '/@/composables/useRenderer/const'
@@ -133,10 +133,10 @@ export const TresScene = defineComponent<TresSceneProps>({
     function mountApp() {
       app = createTres(slots)
       app.provide('useTres', useTres())
+      app.provide(TRES_CONTEXT_KEY, useTres())
       app.provide('extend', extend)
       app.mount(scene as unknown as TresObject)
     }
-
     mountApp()
 
     expose({

src/composables/useTres/index.ts

@@ -98,7 +98,7 @@ export type UseTresReturn = {
   aspectRatio: ComputedRef<number>
 }
 
-const TRES_CONTEXT_KEY = Symbol()
+export const TRES_CONTEXT_KEY = Symbol()
 
 /**
  * The Tres state.