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 { export default {
inject: ['three', 'scene', 'rendererComponent'], inject: ['three', 'scene', 'rendererComponent'],
props: { props: {
position: Object, position: { type: Object, default: { x: 0, y: 0, z: 0 } },
rotation: Object, rotation: { type: Object, default: { x: 0, y: 0, z: 0 } },
scale: Object, scale: { type: Object, default: { x: 1, y: 1, z: 1 } },
lookAt: { type: Object, default: null }, lookAt: { type: Object, default: null },
}, },
// can't use setup because it will not be used in sub components // can't use setup because it will not be used in sub components
// setup() {}, // setup() {},
created() {},
unmounted() { unmounted() {
if (this.$parent.remove) this.$parent.remove(this.o3d); if (this.$parent.remove) this.$parent.remove(this.o3d);
}, },
@ -19,10 +18,11 @@ export default {
initObject3D(o3d) { initObject3D(o3d) {
this.o3d = o3d; this.o3d = o3d;
bindProp(this, 'position', this.o3d.position); bindProp(this, 'position', this.o3d);
bindProp(this, 'rotation', this.o3d.rotation); bindProp(this, 'rotation', this.o3d);
bindProp(this, 'scale', this.o3d.scale); bindProp(this, 'scale', this.o3d);
// fix lookat.x
if (this.lookAt) this.o3d.lookAt(this.lookAt.x, this.lookAt.y, this.lookAt.z); 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 }); 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 { watch } from 'vue';
import { bindProp } from '../tools.js'; import { bindProp } from '../tools.js';
@ -12,11 +12,11 @@ export default {
near: { type: Number, default: 0.1 }, near: { type: Number, default: 0.1 },
far: { type: Number, default: 2000 }, far: { type: Number, default: 2000 },
zoom: { type: Number, default: 1 }, 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() { created() {
this.camera = new OrthographicCamera(this.left, this.right, this.top, this.bottom, this.near, this.far); 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 => { ['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom'].forEach(p => {
watch(() => this[p], () => { watch(() => this[p], () => {

6
src/core/PerspectiveCamera.js
View File

@ -9,12 +9,12 @@ export default {
far: { type: Number, default: 2000 }, far: { type: Number, default: 2000 },
fov: { type: Number, default: 50 }, fov: { type: Number, default: 50 },
near: { type: Number, default: 0.1 }, near: { type: Number, default: 0.1 },
position: { type: [Object, Vector3], default: { x: 0, y: 0, z: 0 } }, position: { type: Object, default: { x: 0, y: 0, z: 0 } },
lookAt: { type: [Object, Vector3], default: null }, lookAt: { type: Object, default: null },
}, },
created() { created() {
this.camera = new PerspectiveCamera(this.fov, this.aspect, this.near, this.far); 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); 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 }); 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 { watch } from 'vue';
import EffectPass from './EffectPass.js'; import EffectPass from './EffectPass.js';
import TiltShift from '../shaders/TiltShift.js'; import TiltShift from '../shaders/TiltShift.js';
import { bindPropValue } from '../tools.js'; import { bindProp } from '../tools.js';
export default { export default {
extends: EffectPass, extends: EffectPass,
@ -28,8 +28,8 @@ export default {
uniforms1.end = uniforms.end; uniforms1.end = uniforms.end;
uniforms1.texSize = uniforms.texSize; uniforms1.texSize = uniforms.texSize;
bindPropValue(this, 'blurRadius', uniforms.blurRadius); bindProp(this, 'blurRadius', uniforms.blurRadius, 'value');
bindPropValue(this, 'gradientRadius', uniforms.gradientRadius); bindProp(this, 'gradientRadius', uniforms.gradientRadius, 'value');
this.updateFocusLine(); this.updateFocusLine();
['start', 'end'].forEach(p => { ['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 { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import EffectPass from './EffectPass.js'; import EffectPass from './EffectPass.js';
import ZoomBlur from '../shaders/ZoomBlur.js'; import ZoomBlur from '../shaders/ZoomBlur.js';
import { bindProp, bindPropValue } from '../tools.js'; import { bindProp } from '../tools.js';
export default { export default {
extends: EffectPass, extends: EffectPass,
@ -14,8 +14,8 @@ export default {
this.passes.push(this.pass); this.passes.push(this.pass);
const uniforms = this.uniforms = this.pass.uniforms; const uniforms = this.uniforms = this.pass.uniforms;
bindProp(this, 'center', uniforms.center.value); bindProp(this, 'center', uniforms.center, 'value');
bindPropValue(this, 'strength', uniforms.strength); bindProp(this, 'strength', uniforms.strength, 'value');
}, },
__hmrId: 'ZoomBlurPass', __hmrId: 'ZoomBlurPass',
}; };

2
src/lights/Light.js
View File

@ -19,7 +19,7 @@ export default {
methods: { methods: {
initLight() { initLight() {
if (this.light.target) { if (this.light.target) {
bindProp(this, 'target', this.light.target.position); bindProp(this, 'target', this.light.target, 'position');
} }
if (this.light.shadow) { 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 { watch } from 'vue';
import { propsValues } from '../tools.js'; import { bindProp, propsValues } from '../tools.js';
import { bindProp } from '../tools.js';
import Material from './Material'; import Material from './Material';
const props = { const props = {
@ -14,7 +13,7 @@ const props = {
envMapIntensity: { type: Number, default: 1 }, envMapIntensity: { type: Number, default: 1 },
lightMapIntensity: { type: Number, default: 1 }, lightMapIntensity: { type: Number, default: 1 },
metalness: { type: Number, default: 0 }, 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 }, roughness: { type: Number, default: 1 },
refractionRatio: { type: Number, default: 0.98 }, refractionRatio: { type: Number, default: 0.98 },
wireframe: Boolean, wireframe: Boolean,
@ -39,7 +38,7 @@ export default {
} }
}); });
}); });
bindProp(this, 'normalScale', this.material.normalScale); bindProp(this, 'normalScale', this.material);
}, },
}, },
__hmrId: 'StandardMaterial', __hmrId: 'StandardMaterial',

8
src/meshes/Gem.js
View File

@ -32,7 +32,7 @@ export default {
initGem() { initGem() {
const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter }); const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT); 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.$parent.add(this.cubeCamera);
this.material.side = FrontSide; this.material.side = FrontSide;
@ -54,9 +54,9 @@ export default {
this.meshBack = new TMesh(this.geometry, this.materialBack); this.meshBack = new TMesh(this.geometry, this.materialBack);
bindProp(this, 'position', this.meshBack.position); bindProp(this, 'position', this.meshBack);
bindProp(this, 'rotation', this.meshBack.rotation); bindProp(this, 'rotation', this.meshBack);
bindProp(this, 'scale', this.meshBack.scale); bindProp(this, 'scale', this.meshBack);
this.$parent.add(this.meshBack); this.$parent.add(this.meshBack);
}, },
updateCubeRT() { updateCubeRT() {

2
src/meshes/RefractionMesh.js
View File

@ -30,7 +30,7 @@ export default {
initMirrorMesh() { initMirrorMesh() {
const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { mapping: CubeRefractionMapping, format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter }); const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { mapping: CubeRefractionMapping, format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT); 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.$parent.add(this.cubeCamera);
this.material.envMap = cubeRT.texture; 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) { export function bindProp(src, srcProp, dst, dstProp) {
const ref = toRef(comp, prop); if (!dstProp) dstProp = srcProp;
setFromProp(object, ref.value); const ref = toRef(src, srcProp);
watch(ref, () => { if (ref.value instanceof Object) {
setFromProp(object, ref.value); setFromProp(dst[dstProp], ref.value);
}, { deep: true }); watch(ref, (value) => { setFromProp(dst[dstProp], value); }, { deep: true });
}; } else {
if (ref.value) dst[dstProp] = src[srcProp];
export function bindPropValue(src, srcProp, dst, dstProp = 'value') { watch(ref, (value) => { dst[dstProp] = value; });
dst[dstProp] = src[srcProp]; }
watch(() => src[srcProp], (value) => {
dst[dstProp] = value;
});
}; };
export function propsValues(props, exclude) { export function propsValues(props, exclude) {