From 9438b79b56eb65b9312fe44538517e07f0562c2d Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sun, 7 Mar 2021 11:45:25 +0100 Subject: [PATCH] refactor: bindProp --- src/core/Object3D.js | 14 +++++++------- src/core/OrthographicCamera.js | 6 +++--- src/core/PerspectiveCamera.js | 6 +++--- src/effects/TiltShiftPass.js | 6 +++--- src/effects/ZoomBlurPass.js | 6 +++--- src/lights/Light.js | 2 +- src/materials/StandardMaterial.js | 9 ++++----- src/meshes/Gem.js | 8 ++++---- src/meshes/RefractionMesh.js | 2 +- src/tools.js | 23 ++++++++++------------- 10 files changed, 39 insertions(+), 43 deletions(-) diff --git a/src/core/Object3D.js b/src/core/Object3D.js index 4b20eb3..02b7ec2 100644 --- a/src/core/Object3D.js +++ b/src/core/Object3D.js @@ -4,14 +4,13 @@ import { bindProp } from '../tools.js'; export default { inject: ['three', 'scene', 'rendererComponent'], props: { - position: Object, - rotation: Object, - scale: Object, + 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 }, }, // can't use setup because it will not be used in sub components // setup() {}, - created() {}, unmounted() { if (this.$parent.remove) this.$parent.remove(this.o3d); }, @@ -19,10 +18,11 @@ export default { initObject3D(o3d) { this.o3d = o3d; - bindProp(this, 'position', this.o3d.position); - bindProp(this, 'rotation', this.o3d.rotation); - bindProp(this, 'scale', this.o3d.scale); + bindProp(this, 'position', this.o3d); + bindProp(this, 'rotation', this.o3d); + bindProp(this, 'scale', this.o3d); + // fix lookat.x if (this.lookAt) this.o3d.lookAt(this.lookAt.x, this.lookAt.y, this.lookAt.z); watch(() => this.lookAt, (v) => { this.o3d.lookAt(v.x, v.y, v.z); }, { deep: true }); diff --git a/src/core/OrthographicCamera.js b/src/core/OrthographicCamera.js index 7f7006a..a22370c 100644 --- a/src/core/OrthographicCamera.js +++ b/src/core/OrthographicCamera.js @@ -1,4 +1,4 @@ -import { OrthographicCamera, Vector3 } from 'three'; +import { OrthographicCamera } from 'three'; import { watch } from 'vue'; import { bindProp } from '../tools.js'; @@ -12,11 +12,11 @@ export default { near: { type: Number, default: 0.1 }, far: { type: Number, default: 2000 }, zoom: { type: Number, default: 1 }, - position: { type: [Object, Vector3], default: { x: 0, y: 0, z: 0 } }, + position: { type: Object, default: { x: 0, y: 0, z: 0 } }, }, created() { this.camera = new OrthographicCamera(this.left, this.right, this.top, this.bottom, this.near, this.far); - bindProp(this, 'position', this.camera.position); + bindProp(this, 'position', this.camera); ['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom'].forEach(p => { watch(() => this[p], () => { diff --git a/src/core/PerspectiveCamera.js b/src/core/PerspectiveCamera.js index e77272c..515612b 100644 --- a/src/core/PerspectiveCamera.js +++ b/src/core/PerspectiveCamera.js @@ -9,12 +9,12 @@ export default { far: { type: Number, default: 2000 }, fov: { type: Number, default: 50 }, near: { type: Number, default: 0.1 }, - position: { type: [Object, Vector3], default: { x: 0, y: 0, z: 0 } }, - lookAt: { type: [Object, Vector3], default: null }, + position: { type: Object, default: { x: 0, y: 0, z: 0 } }, + lookAt: { type: Object, default: null }, }, created() { this.camera = new PerspectiveCamera(this.fov, this.aspect, this.near, this.far); - bindProp(this, 'position', this.camera.position); + bindProp(this, 'position', this.camera); if (this.lookAt) this.camera.lookAt(this.lookAt.x, this.lookAt.y, this.lookAt.z); watch(() => this.lookAt, (v) => { this.camera.lookAt(v.x, v.y, v.z); }, { deep: true }); diff --git a/src/effects/TiltShiftPass.js b/src/effects/TiltShiftPass.js index d636281..7046969 100644 --- a/src/effects/TiltShiftPass.js +++ b/src/effects/TiltShiftPass.js @@ -3,7 +3,7 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'; import { watch } from 'vue'; import EffectPass from './EffectPass.js'; import TiltShift from '../shaders/TiltShift.js'; -import { bindPropValue } from '../tools.js'; +import { bindProp } from '../tools.js'; export default { extends: EffectPass, @@ -28,8 +28,8 @@ export default { uniforms1.end = uniforms.end; uniforms1.texSize = uniforms.texSize; - bindPropValue(this, 'blurRadius', uniforms.blurRadius); - bindPropValue(this, 'gradientRadius', uniforms.gradientRadius); + bindProp(this, 'blurRadius', uniforms.blurRadius, 'value'); + bindProp(this, 'gradientRadius', uniforms.gradientRadius, 'value'); this.updateFocusLine(); ['start', 'end'].forEach(p => { diff --git a/src/effects/ZoomBlurPass.js b/src/effects/ZoomBlurPass.js index e7c2022..b492af5 100644 --- a/src/effects/ZoomBlurPass.js +++ b/src/effects/ZoomBlurPass.js @@ -1,7 +1,7 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'; import EffectPass from './EffectPass.js'; import ZoomBlur from '../shaders/ZoomBlur.js'; -import { bindProp, bindPropValue } from '../tools.js'; +import { bindProp } from '../tools.js'; export default { extends: EffectPass, @@ -14,8 +14,8 @@ export default { this.passes.push(this.pass); const uniforms = this.uniforms = this.pass.uniforms; - bindProp(this, 'center', uniforms.center.value); - bindPropValue(this, 'strength', uniforms.strength); + bindProp(this, 'center', uniforms.center, 'value'); + bindProp(this, 'strength', uniforms.strength, 'value'); }, __hmrId: 'ZoomBlurPass', }; diff --git a/src/lights/Light.js b/src/lights/Light.js index f8faed5..a9e0827 100644 --- a/src/lights/Light.js +++ b/src/lights/Light.js @@ -19,7 +19,7 @@ export default { methods: { initLight() { if (this.light.target) { - bindProp(this, 'target', this.light.target.position); + bindProp(this, 'target', this.light.target, 'position'); } if (this.light.shadow) { diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js index 3f42f15..562a1da 100644 --- a/src/materials/StandardMaterial.js +++ b/src/materials/StandardMaterial.js @@ -1,7 +1,6 @@ -import { MeshStandardMaterial, Vector2 } from 'three'; +import { MeshStandardMaterial } from 'three'; import { watch } from 'vue'; -import { propsValues } from '../tools.js'; -import { bindProp } from '../tools.js'; +import { bindProp, propsValues } from '../tools.js'; import Material from './Material'; const props = { @@ -14,7 +13,7 @@ const props = { envMapIntensity: { type: Number, default: 1 }, lightMapIntensity: { type: Number, default: 1 }, metalness: { type: Number, default: 0 }, - normalScale: { type: Object, default: () => new Vector2(1, 1) }, + normalScale: { type: Object, default: { x: 1, y: 1 } }, roughness: { type: Number, default: 1 }, refractionRatio: { type: Number, default: 0.98 }, wireframe: Boolean, @@ -39,7 +38,7 @@ export default { } }); }); - bindProp(this, 'normalScale', this.material.normalScale); + bindProp(this, 'normalScale', this.material); }, }, __hmrId: 'StandardMaterial', diff --git a/src/meshes/Gem.js b/src/meshes/Gem.js index c578a05..71f90f1 100644 --- a/src/meshes/Gem.js +++ b/src/meshes/Gem.js @@ -32,7 +32,7 @@ export default { initGem() { const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter }); this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT); - bindProp(this, 'position', this.cubeCamera.position); + bindProp(this, 'position', this.cubeCamera); this.$parent.add(this.cubeCamera); this.material.side = FrontSide; @@ -54,9 +54,9 @@ export default { this.meshBack = new TMesh(this.geometry, this.materialBack); - bindProp(this, 'position', this.meshBack.position); - bindProp(this, 'rotation', this.meshBack.rotation); - bindProp(this, 'scale', this.meshBack.scale); + bindProp(this, 'position', this.meshBack); + bindProp(this, 'rotation', this.meshBack); + bindProp(this, 'scale', this.meshBack); this.$parent.add(this.meshBack); }, updateCubeRT() { diff --git a/src/meshes/RefractionMesh.js b/src/meshes/RefractionMesh.js index 9d69e8c..431a5f4 100644 --- a/src/meshes/RefractionMesh.js +++ b/src/meshes/RefractionMesh.js @@ -30,7 +30,7 @@ export default { initMirrorMesh() { const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { mapping: CubeRefractionMapping, format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter }); this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT); - bindProp(this, 'position', this.cubeCamera.position); + bindProp(this, 'position', this.cubeCamera); this.$parent.add(this.cubeCamera); this.material.envMap = cubeRT.texture; diff --git a/src/tools.js b/src/tools.js index c4c25b6..428b97a 100644 --- a/src/tools.js +++ b/src/tools.js @@ -8,19 +8,16 @@ export function setFromProp(o, prop) { } }; -export function bindProp(comp, prop, object) { - const ref = toRef(comp, prop); - setFromProp(object, ref.value); - watch(ref, () => { - setFromProp(object, ref.value); - }, { deep: true }); -}; - -export function bindPropValue(src, srcProp, dst, dstProp = 'value') { - dst[dstProp] = src[srcProp]; - watch(() => src[srcProp], (value) => { - dst[dstProp] = value; - }); +export function bindProp(src, srcProp, dst, dstProp) { + if (!dstProp) dstProp = srcProp; + const ref = toRef(src, srcProp); + if (ref.value instanceof Object) { + setFromProp(dst[dstProp], ref.value); + watch(ref, (value) => { setFromProp(dst[dstProp], value); }, { deep: true }); + } else { + if (ref.value) dst[dstProp] = src[srcProp]; + watch(ref, (value) => { dst[dstProp] = value; }); + } }; export function propsValues(props, exclude) {