Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

refactor: bindProp

Browse Source
This commit is contained in:
Kevin Levron 2021-03-07 11:45:25 +01:00
parent 9b85bc6cdd
commit 9438b79b56
10 changed files with 39 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/core/Object3D.js
View File

@ -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 });

6
src/core/OrthographicCamera.js
View File

@ -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], () => {

6
src/core/PerspectiveCamera.js
View File

@ -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 });

6
src/effects/TiltShiftPass.js
View File

@ -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 => {

6
src/effects/ZoomBlurPass.js
View File

@ -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',
};

2
src/lights/Light.js
View File

@ -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) {

9
src/materials/StandardMaterial.js
View File

@ -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',

8
src/meshes/Gem.js
View File

@ -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() {

2
src/meshes/RefractionMesh.js
View File

@ -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;

23
src/tools.js
View File

@ -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) {