瀏覽代碼

feat(cientos): access core state via provide inject api

alvarosabu 2 年之前
父節點
當前提交
e08c19ab8e
共有 2 個文件被更改,包括 11 次插入8 次删除
  1. 6 8
      packages/cientos/src/core/OrbitControls.vue
  2. 5 0
      packages/cientos/src/core/useCientos.ts

+ 6 - 8
packages/cientos/src/core/OrbitControls.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useTres } from '@tresjs/core'
-import { Camera, Vector3, WebGLRenderer } from 'three'
+import { Camera, Vector3 } from 'three'
 import { OrbitControls } from 'three-stdlib'
-import { inject, ref, watch, type Ref } from 'vue'
+import { ref, watch, type Ref } from 'vue'
 
 import { useCientos } from './useCientos'
 
@@ -19,13 +18,12 @@ const props = withDefaults(
   },
 )
 
-const { setState } = useTres()
+const { state, setState } = useCientos()
 
 const controls = ref(null)
-const camera = inject<Ref<Camera>>('camera')
-const renderer = inject<Ref<WebGLRenderer>>('renderer')
 
 const { extend } = useCientos()
+
 extend({ OrbitControls })
 
 watch(controls, value => {
@@ -39,9 +37,9 @@ watch(controls, value => {
 
 <template>
   <TresOrbitControls
-    v-if="camera && renderer"
+    v-if="state.camera && state.renderer"
     ref="controls"
-    :args="[camera, renderer?.domElement]"
+    :args="[state.camera, state.renderer?.domElement]"
     :enabling-dampling="enableDamping"
   />
 </template>

+ 5 - 0
packages/cientos/src/core/useCientos.ts

@@ -1,3 +1,4 @@
+import { useTres } from '@tresjs/core'
 import { inject } from 'vue'
 
 export function useCientos() {
@@ -6,7 +7,11 @@ export function useCientos() {
     (() => {
       console.warn('No extend function provided')
     })
+
+  const { state, setState } = inject('useTres', useTres())
   return {
+    state,
+    setState,
     extend,
   }
 }