浏览代码

feat(cientos): Refactor OrbitControls to use new extend API

Alvaro 2 年之前
父节点
当前提交
7251b6085c
共有 3 个文件被更改,包括 74 次插入3 次删除
  1. 52 3
      packages/cientos/src/core/OrbitControls.vue
  2. 10 0
      packages/cientos/src/core/useCientos.ts
  3. 12 0
      packages/cientos/src/env.d.ts

+ 52 - 3
packages/cientos/src/core/OrbitControls.vue

@@ -1,9 +1,57 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import { Camera, Vector3, WebGLRenderer } from 'three'
+import { OrbitControls } from 'three-stdlib'
+import { inject, ref, type Ref } from 'vue'
+
+import { useCientos } from './useCientos'
+
+const props = withDefaults(
+  defineProps<{
+    makeDefault?: boolean
+    camera?: Camera
+    domElement?: HTMLElement
+    target?: Ref<Vector3>
+    enableDamping?: boolean
+  }>(),
+  {
+    makeDefault: false,
+  },
+)
+
+const controls = ref(null)
+const camera = inject<Ref<Camera>>('camera')
+const renderer = inject<Ref<WebGLRenderer>>('renderer')
+
+const { extend } = useCientos()
+extend({ OrbitControls })
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="camera && renderer"
+    ref="controls"
+    :args="[camera, renderer?.domElement]"
+    :enabling-dampling="enableDamping"
+  />
+</template>
+
+<!-- <script setup lang="ts">
 import { useRenderLoop } from '@tresjs/core'
-import { Camera, WebGLRenderer } from 'three'
+import { Camera, Vector3, WebGLRenderer } from 'three'
 import { OrbitControls as OrbitControlsImp } from 'three-stdlib'
 import { inject, type Ref, unref, watch } from 'vue'
 
+const props = withDefaults(
+  defineProps<{
+    makeDefault?: boolean
+    camera?: Camera
+    domElement?: HTMLElement
+    target?: Ref<Vector3>
+  }>(),
+  {
+    makeDefault: false,
+  },
+)
 let controls: OrbitControlsImp
 
 const camera = inject<Ref<Camera>>('camera')
@@ -19,7 +67,7 @@ watch(
       const { onLoop } = useRenderLoop()
 
       onLoop(() => {
-        if (controls) {
+        if (controls.enabled) {
           controls.update()
         }
       })
@@ -30,3 +78,4 @@ watch(
   },
 )
 </script>
+ -->

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

@@ -0,0 +1,10 @@
+import { useCatalogue } from '@tresjs/core'
+
+export function useCientos() {
+  const { catalogue, extend } = useCatalogue(window.__TRES__.app)
+
+  return {
+    catalogue,
+    extend,
+  }
+}

+ 12 - 0
packages/cientos/src/env.d.ts

@@ -1,3 +1,4 @@
+import { App } from 'vue'
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
@@ -6,3 +7,14 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare global {
+  // Define the window interface, with type annotations for the properties and methods of the window object
+  interface Window {
+    // Define the location property, with a type of Location
+    __TRES__: {
+      app: App
+      version: string
+    }
+  }
+}