Merge pull request #66 from Tresjs/feature/65-vector-2-support

feat: add vector 2 support

playground/src/pages/folders.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Vector3 } from 'three'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Vector3, Vector2 } from 'three'
 
 import { OrbitControls, Sphere } from '@tresjs/cientos'
 
@@ -17,12 +17,13 @@ const gl = {
 }
 
 const { position } = useControls('camera', {
-  position: new Vector3(3, 3, 3),
+  position: new Vector3(3, 2, 3),
+  /*  delay: new Vector2(1.5, 3.5), */
 })
 
-const { position: lightPosition } = useControls('light', {
+/* const { position: lightPosition } = useControls('light', {
   position: new Vector3(3, 3, 3),
-})
+}) */
 </script>
 
 <template>
@@ -36,10 +37,10 @@ const { position: lightPosition } = useControls('light', {
     <Sphere>
       <TresMeshToonMaterial />
     </Sphere>
-    <TresDirectionalLight
+    <!-- <TresDirectionalLight
       :args="[0xffffff, 1]"
       :position-x="lightPosition.x"
-    />
+    /> -->
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>

playground/src/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Vector3 } from 'three'
+import { Vector3, Vector2 } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 

src/components/VectorControl.vue

@@ -115,8 +115,8 @@ watch(mouse.x, (newValue) => {
       <div
         v-for="(_subcontrol, $index) in vector"
         :key="label + $index"
-        class="flex items-center w-1/3 bg-gray-100 rounded"
-        :class="{ 'w-2/5': focused === $index }" 
+        class="flex items-center bg-gray-100 rounded"
+        :class="{ 'w-2/5': focused === $index, 'w-1/3': isVector3(control.value), 'w-1/2': isVector2(control.value) }" 
       >
         <span
           v-if="labels[$index] && isVector"

src/utils/is.ts

@@ -1,5 +1,5 @@
-export function isVector2(obj: { x: number; y: number; z: number }) {
-  return obj && typeof obj.x === 'number' && typeof obj.y === 'number' && typeof obj.z === 'undefined'
+export function isVector2(obj: { x: number; y: number }) {
+  return obj && typeof obj.x === 'number' && typeof obj.y === 'number'
 }
 
 export function isVector3(obj: { x: number; y: number; z: number }) {

src/utils/normalize.ts

@@ -1,6 +1,7 @@
-import { isVector3 } from '.'
+import { isVector2, isVector3 } from '.'
 
 export interface Vector3Prop { x: number; y: number; z: number }
+export interface Vector2Prop { x: number; y: number }
 export type SizeFlexibleParams =
   | number[]
   | {
@@ -29,6 +30,10 @@ export function normalizeVectorFlexibleParam(value: VectorFlexibleParams): Array
     const { x, y, z } = value as Vector3Prop
     return [x, y, z]
   }
+  if (isVector2(value as Vector2Prop)) {
+    const { x, y } = value as Vector2Prop
+    return [x, y]
+  }
   return value as Array<number>
 }