improve props types

src/core/Object3D.ts

@@ -1,5 +1,5 @@
 import { Object3D, Scene } from 'three'
-import { ComponentPublicInstance, defineComponent, inject, watch } from 'vue'
+import { ComponentPublicInstance, defineComponent, inject, PropType, watch } from 'vue'
 import { bindProp } from '../tools'
 import { RendererInterface } from './Renderer'
 
@@ -23,21 +23,36 @@ export function object3DSetup(): Object3DSetupInterface {
   return { scene, renderer }
 }
 
+export interface Vector2PropInterface {
+  x?: number
+  y?: number
+}
+
+export interface Vector3PropInterface extends Vector2PropInterface {
+  z?: number
+}
+
+export interface EulerPropInterface extends Vector3PropInterface {
+  order?: 'XYZ' | 'YZX' | 'ZXY' | 'XZY' | 'YXZ' | 'ZYX'
+}
+
 export default defineComponent({
   name: 'Object3D',
   inject: ['renderer', 'scene'],
   emits: ['created', 'ready'],
   props: {
-    position: { type: Object, default: () => ({ x: 0, y: 0, z: 0 }) },
+    position: { type: Object as PropType<Vector3PropInterface>, default: () => ({ x: 0, y: 0, z: 0 }) },
-    rotation: { type: Object, default: () => ({ x: 0, y: 0, z: 0 }) },
+    rotation: { type: Object as PropType<EulerPropInterface>, default: () => ({ x: 0, y: 0, z: 0 }) },
-    scale: { type: Object, default: () => ({ x: 1, y: 1, z: 1 }) },
+    scale: { type: Object as PropType<Vector3PropInterface>, default: () => ({ x: 1, y: 1, z: 1, order: 'XYZ' }) },
-    lookAt: { type: Object, default: null },
+    lookAt: { type: Object as PropType<Vector3PropInterface>, default: null },
     autoRemove: { type: Boolean, default: true },
     userData: { type: Object, default: () => ({}) },
   },
   setup() {
     return object3DSetup()
   },
+  computed: {
+  },
   unmounted() {
     if (this.autoRemove) this.removeFromParent()
   },
@@ -53,8 +68,8 @@ export default defineComponent({
       bindProp(this, 'userData', o3d.userData)
 
       // TODO : fix lookat.x
-      if (this.lookAt) o3d.lookAt(this.lookAt.x, this.lookAt.y, this.lookAt.z)
+      if (this.lookAt) o3d.lookAt(this.lookAt.x ?? 0, this.lookAt.y, this.lookAt.z)
-      watch(() => this.lookAt, (v) => { o3d.lookAt(v.x, v.y, v.z) }, { deep: true })
+      watch(() => this.lookAt, (v) => { o3d.lookAt(v.x ?? 0, v.y, v.z) }, { deep: true })
 
       this.parent = this.getParent()
       if (this.addToParent()) this.$emit('ready', this)

src/core/OrthographicCamera.ts

@@ -1,7 +1,8 @@
-import { defineComponent, watch } from 'vue'
+import { defineComponent, PropType, watch } from 'vue'
 import { OrthographicCamera } from 'three'
 import { bindProp } from '../tools'
 import Camera from './Camera'
+import { Vector3PropInterface } from './Object3D'
 
 export default defineComponent({
   extends: Camera,
@@ -14,7 +15,7 @@ export default defineComponent({
     near: { type: Number, default: 0.1 },
     far: { type: Number, default: 2000 },
     zoom: { type: Number, default: 1 },
-    position: { type: Object, default: () => ({ x: 0, y: 0, z: 0 }) },
+    position: { type: Object as PropType<Vector3PropInterface>, default: () => ({ x: 0, y: 0, z: 0 }) },
   },
   setup(props) {
     const camera = new OrthographicCamera(props.left, props.right, props.top, props.bottom, props.near, props.far)

src/core/PerspectiveCamera.ts

@@ -1,7 +1,8 @@
-import { defineComponent, watch } from 'vue'
+import { defineComponent, PropType, watch } from 'vue'
 import { PerspectiveCamera } from 'three'
 import { bindProp } from '../tools'
 import Camera from './Camera'
+import { Vector3PropInterface } from './Object3D'
 
 export default defineComponent({
   extends: Camera,
@@ -11,17 +12,16 @@ export default defineComponent({
     far: { type: Number, default: 2000 },
     fov: { type: Number, default: 50 },
     near: { type: Number, default: 0.1 },
-    position: { type: Object, default: () => ({ x: 0, y: 0, z: 0 }) },
+    position: { type: Object as PropType<Vector3PropInterface>, default: () => ({ x: 0, y: 0, z: 0 }) },
-    lookAt: { type: Object, default: null },
+    lookAt: { type: Object as PropType<Vector3PropInterface>, default: null },
   },
   setup(props) {
     const camera = new PerspectiveCamera(props.fov, props.aspect, props.near, props.far)
 
     bindProp(props, 'position', camera)
 
-    // TODO : fix lookAt x
+    if (props.lookAt) camera.lookAt(props.lookAt.x ?? 0, props.lookAt.y, props.lookAt.z)
-    if (props.lookAt) camera.lookAt(props.lookAt.x, props.lookAt.y, props.lookAt.z)
+    watch(() => props.lookAt, (v) => { camera.lookAt(v.x ?? 0, v.y, v.z) }, { deep: true })
-    watch(() => props.lookAt, (v) => { camera.lookAt(v.x, v.y, v.z) }, { deep: true })
 
     const watchProps = ['aspect', 'far', 'fov', 'near']
     watchProps.forEach(p => {

src/effects/EffectPass.ts

@@ -3,7 +3,7 @@ import { defineComponent, inject } from 'vue'
 import { RendererInterface } from '../core/Renderer'
 import { EffectComposerInterface } from './EffectComposer'
 
-interface EffectSetupInterface {
+export interface EffectSetupInterface {
   renderer: RendererInterface
   composer: EffectComposerInterface
   pass?: Pass

src/geometries/Geometry.ts

@@ -1,11 +1,8 @@
 import { BufferGeometry } from 'three'
 import { defineComponent, inject, watch } from 'vue'
+import { MeshInterface } from '../meshes/Mesh'
 
-interface MeshInterface {
+export interface GeometryInterface {
-  setGeometry(geometry: BufferGeometry): void
-}
-
-interface GeometryInterface {
   geometry?: BufferGeometry
   mesh?: MeshInterface
   watchProps: string[]

src/lights/Light.ts

@@ -3,7 +3,7 @@ import { defineComponent, watch } from 'vue'
 import Object3D from '../core/Object3D'
 import { bindProp, setFromProp } from '../tools'
 
-interface LightSetupInterface {
+export interface LightSetupInterface {
   light?: Light
 }
 

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import { TroisJSVuePlugin } from './plugin'
+// import { TroisJSVuePlugin } from './plugin'
 import App from './App.vue'
 
 const app = createApp(App)
-app.use(TroisJSVuePlugin)
+// app.use(TroisJSVuePlugin)
 app.mount('#app')

src/materials/Material.ts

@@ -2,7 +2,7 @@ import { defineComponent, watch } from 'vue'
 import { FrontSide, Material, Texture } from 'three'
 import { MeshInterface } from '../meshes/Mesh'
 
-interface MaterialSetupInterface {
+export interface MaterialSetupInterface {
   mesh?: MeshInterface
   material?: Material
   createMaterial?(): Material