From 9c41f1db6d7aa4ec866f8c4fd43e991fd4242709 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Fri, 23 Apr 2021 23:29:56 +0200 Subject: [PATCH] improve props types --- src/core/Object3D.ts | 29 ++++++++++++++++++++++------- src/core/OrthographicCamera.ts | 5 +++-- src/core/PerspectiveCamera.ts | 12 ++++++------ src/effects/EffectPass.ts | 2 +- src/geometries/Geometry.ts | 7 ++----- src/lights/Light.ts | 2 +- src/main.ts | 4 ++-- src/materials/Material.ts | 2 +- 8 files changed, 38 insertions(+), 25 deletions(-) diff --git a/src/core/Object3D.ts b/src/core/Object3D.ts index d2117e7..edf312d 100644 --- a/src/core/Object3D.ts +++ b/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 }) }, - rotation: { type: Object, default: () => ({ x: 0, y: 0, z: 0 }) }, - scale: { type: Object, default: () => ({ x: 1, y: 1, z: 1 }) }, - lookAt: { type: Object, default: null }, + position: { type: Object as PropType, default: () => ({ x: 0, y: 0, z: 0 }) }, + rotation: { type: Object as PropType, default: () => ({ x: 0, y: 0, z: 0 }) }, + scale: { type: Object as PropType, default: () => ({ x: 1, y: 1, z: 1, order: 'XYZ' }) }, + lookAt: { type: Object as PropType, 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) - watch(() => this.lookAt, (v) => { o3d.lookAt(v.x, v.y, v.z) }, { deep: true }) + if (this.lookAt) o3d.lookAt(this.lookAt.x ?? 0, this.lookAt.y, this.lookAt.z) + 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) diff --git a/src/core/OrthographicCamera.ts b/src/core/OrthographicCamera.ts index 3c6bc83..b5cc63b 100644 --- a/src/core/OrthographicCamera.ts +++ b/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, 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) diff --git a/src/core/PerspectiveCamera.ts b/src/core/PerspectiveCamera.ts index 708dfb1..62f1586 100644 --- a/src/core/PerspectiveCamera.ts +++ b/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 }) }, - lookAt: { type: Object, default: null }, + position: { type: Object as PropType, default: () => ({ x: 0, y: 0, z: 0 }) }, + lookAt: { type: Object as PropType, 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, props.lookAt.y, props.lookAt.z) - watch(() => props.lookAt, (v) => { camera.lookAt(v.x, v.y, v.z) }, { deep: true }) + if (props.lookAt) camera.lookAt(props.lookAt.x ?? 0, props.lookAt.y, props.lookAt.z) + watch(() => props.lookAt, (v) => { camera.lookAt(v.x ?? 0, v.y, v.z) }, { deep: true }) const watchProps = ['aspect', 'far', 'fov', 'near'] watchProps.forEach(p => { diff --git a/src/effects/EffectPass.ts b/src/effects/EffectPass.ts index 5204cb6..dcb72e8 100644 --- a/src/effects/EffectPass.ts +++ b/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 diff --git a/src/geometries/Geometry.ts b/src/geometries/Geometry.ts index 9c861f6..28a8f68 100644 --- a/src/geometries/Geometry.ts +++ b/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 { - setGeometry(geometry: BufferGeometry): void -} - -interface GeometryInterface { +export interface GeometryInterface { geometry?: BufferGeometry mesh?: MeshInterface watchProps: string[] diff --git a/src/lights/Light.ts b/src/lights/Light.ts index 46cfd48..e40b9b2 100644 --- a/src/lights/Light.ts +++ b/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 } diff --git a/src/main.ts b/src/main.ts index d2da221..daeef61 100644 --- a/src/main.ts +++ b/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') diff --git a/src/materials/Material.ts b/src/materials/Material.ts index 76ae45f..fa5e0c7 100644 --- a/src/materials/Material.ts +++ b/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