From 9ba757228c2b4e9e111c9ae467dcd004de05e15e Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sat, 3 Oct 2020 14:41:08 +0200 Subject: [PATCH] wip --- src/components/noisy/NoisyImage.js | 12 +++++--- src/components/noisy/NoisyPlane.js | 12 +++++--- src/components/noisy/NoisySphere.js | 12 +++++--- src/components/noisy/NoisyText.js | 12 +++++--- src/core/useThree.js | 32 +++++++++++++++------ src/meshes/MirrorMesh.js | 43 +++++++++++++++++++++++++++++ src/meshes/Torus.js | 2 +- src/meshes/TorusKnot.js | 2 +- src/meshes/index.js | 1 + src/plugin.js | 1 + 10 files changed, 102 insertions(+), 27 deletions(-) create mode 100644 src/meshes/MirrorMesh.js diff --git a/src/components/noisy/NoisyImage.js b/src/components/noisy/NoisyImage.js index da8e8d3..ed29beb 100644 --- a/src/components/noisy/NoisyImage.js +++ b/src/components/noisy/NoisyImage.js @@ -28,10 +28,11 @@ export default { }; }, mounted() { - const startTime = Date.now(); - this.three.onBeforeRender(() => { - this.uTime.value = (Date.now() - startTime) * this.timeCoef; - }); + this.startTime = Date.now(); + this.three.onBeforeRender(this.updateTime); + }, + unmounted() { + this.three.offBeforeRender(this.updateTime); }, methods: { createGeometry() { @@ -80,6 +81,9 @@ export default { this.materialShader = shader; }; }, + updateTime() { + this.uTime.value = (Date.now() - this.startTime) * this.timeCoef; + }, }, __hmrId: 'NoisyImage', }; diff --git a/src/components/noisy/NoisyPlane.js b/src/components/noisy/NoisyPlane.js index 6c19647..ae98d9d 100644 --- a/src/components/noisy/NoisyPlane.js +++ b/src/components/noisy/NoisyPlane.js @@ -23,10 +23,11 @@ export default { }, mounted() { this.updateMaterial(); - const startTime = Date.now(); - this.three.onBeforeRender(() => { - this.uTime.value = (Date.now() - startTime) * this.timeCoef; - }); + this.startTime = Date.now(); + this.three.onBeforeRender(this.updateTime); + }, + unmounted() { + this.three.offBeforeRender(this.updateTime); }, methods: { updateMaterial() { @@ -55,6 +56,9 @@ export default { }; this.material.needsupdate = true; }, + updateTime() { + this.uTime.value = (Date.now() - this.startTime) * this.timeCoef; + }, }, __hmrId: 'NoisyPlane', }; diff --git a/src/components/noisy/NoisySphere.js b/src/components/noisy/NoisySphere.js index 4802e44..c129751 100644 --- a/src/components/noisy/NoisySphere.js +++ b/src/components/noisy/NoisySphere.js @@ -27,10 +27,11 @@ export default { mounted() { this.updateMaterial(); - const startTime = Date.now(); - this.three.onBeforeRender(() => { - this.uTime.value = (Date.now() - startTime) * this.timeCoef; - }); + this.startTime = Date.now(); + this.three.onBeforeRender(this.updateTime); + }, + unmounted() { + this.three.offBeforeRender(this.updateTime); }, methods: { updateMaterial() { @@ -59,6 +60,9 @@ export default { }; this.material.needsupdate = true; }, + updateTime() { + this.uTime.value = (Date.now() - this.startTime) * this.timeCoef; + }, }, __hmrId: 'NoisySphere', }; diff --git a/src/components/noisy/NoisyText.js b/src/components/noisy/NoisyText.js index 2727bac..a317ca4 100644 --- a/src/components/noisy/NoisyText.js +++ b/src/components/noisy/NoisyText.js @@ -24,10 +24,11 @@ export default { mounted() { this.updateMaterial(); - const startTime = Date.now(); - this.three.onBeforeRender(() => { - this.uTime.value = (Date.now() - startTime) * this.timeCoef; - }); + this.startTime = Date.now(); + this.three.onBeforeRender(this.updateTime); + }, + unmounted() { + this.three.offBeforeRender(this.updateTime); }, methods: { updateMaterial() { @@ -56,6 +57,9 @@ export default { }; this.material.needsupdate = true; }, + updateTime() { + this.uTime.value = (Date.now() - this.startTime) * this.timeCoef; + }, }, __hmrId: 'NoisyText', }; diff --git a/src/core/useThree.js b/src/core/useThree.js index 3c3dc0a..4057fd0 100644 --- a/src/core/useThree.js +++ b/src/core/useThree.js @@ -34,9 +34,9 @@ export default function useThree() { }; // handlers - const afterInitHandlers = []; - const afterResizeHandlers = []; - const beforeRenderHandlers = []; + let afterInitHandlers = []; + let afterResizeHandlers = []; + let beforeRenderHandlers = []; // mouse tracking const mouse = new Vector2(); @@ -60,8 +60,8 @@ export default function useThree() { renderC, setSize, onAfterInit, - onAfterResize, - onBeforeRender, + onAfterResize, offAfterResize, + onBeforeRender, offBeforeRender, }; /** @@ -119,26 +119,40 @@ export default function useThree() { }; /** - * add after init handler + * add after init callback */ function onAfterInit(callback) { afterInitHandlers.push(callback); } /** - * add after resize handler + * add after resize callback */ function onAfterResize(callback) { afterResizeHandlers.push(callback); } /** - * add before render handler + * remove after resize callback + */ + function offAfterResize(callback) { + afterResizeHandlers = afterResizeHandlers.filter(c => c !== callback); + } + + /** + * add before render callback */ function onBeforeRender(callback) { beforeRenderHandlers.push(callback); } + /** + * remove before render callback + */ + function offBeforeRender(callback) { + beforeRenderHandlers = beforeRenderHandlers.filter(c => c !== callback); + } + /** * default render */ @@ -161,7 +175,7 @@ export default function useThree() { * remove listeners */ function dispose() { - beforeRenderHandlers.splice(0); + beforeRenderHandlers = []; window.removeEventListener('resize', onResize); if (obj.mouse_move_element) { obj.mouse_move_element.removeEventListener('mousemove', onMousemove); diff --git a/src/meshes/MirrorMesh.js b/src/meshes/MirrorMesh.js new file mode 100644 index 0000000..ac8627f --- /dev/null +++ b/src/meshes/MirrorMesh.js @@ -0,0 +1,43 @@ +import { + CubeCamera, + LinearMipmapLinearFilter, + RGBFormat, + WebGLCubeRenderTarget, +} from 'three'; +// import { watch } from 'vue'; +import Mesh from './Mesh.js'; +import useBindProp from '../use/useBindProp.js'; + +export default { + extends: Mesh, + props: { + cubeRTSize: { type: Number, default: 512 }, + cubeCameraNear: { type: Number, default: 0.1 }, + cubeCameraFar: { type: Number, default: 2000 }, + }, + mounted() { + this.initMirrorMesh(); + this.three.onBeforeRender(this.upateCubeRT); + }, + unmounted() { + this.three.offBeforeRender(this.upateCubeRT); + }, + methods: { + initMirrorMesh() { + const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter }); + this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT); + useBindProp(this, 'position', this.cubeCamera.position); + this.scene.add(this.cubeCamera); + + this.material.envMap = cubeRT.texture; + this.material.needsUpdate = true; + }, + upateCubeRT() { + this.mesh.visible = false; + this.cubeCamera.update(this.three.renderer, this.scene); + this.mesh.visible = true; + console.log('upateCubeRT'); + }, + }, + __hmrId: 'MirrorMesh', +}; diff --git a/src/meshes/Torus.js b/src/meshes/Torus.js index 6211331..89dfcf7 100644 --- a/src/meshes/Torus.js +++ b/src/meshes/Torus.js @@ -5,7 +5,7 @@ import Mesh from './Mesh.js'; export default { extends: Mesh, props: { - radius: { type: Number, default: 1 }, + radius: { type: Number, default: 0.5 }, tube: { type: Number, default: 0.4 }, radialSegments: { type: Number, default: 8 }, tubularSegments: { type: Number, default: 6 }, diff --git a/src/meshes/TorusKnot.js b/src/meshes/TorusKnot.js index f020a54..fa4d179 100644 --- a/src/meshes/TorusKnot.js +++ b/src/meshes/TorusKnot.js @@ -5,7 +5,7 @@ import Mesh from './Mesh.js'; export default { extends: Mesh, props: { - radius: { type: Number, default: 1 }, + radius: { type: Number, default: 0.5 }, tube: { type: Number, default: 0.4 }, radialSegments: { type: Number, default: 64 }, tubularSegments: { type: Number, default: 8 }, diff --git a/src/meshes/index.js b/src/meshes/index.js index 323110b..1a74094 100644 --- a/src/meshes/index.js +++ b/src/meshes/index.js @@ -20,4 +20,5 @@ export { default as Tube } from './Tube.js'; export { default as Image } from './Image.js'; export { default as InstancedMesh } from './InstancedMesh.js'; +export { default as MirrorMesh } from './MirrorMesh.js'; export { default as Sprite } from './Sprite.js'; diff --git a/src/plugin.js b/src/plugin.js index cb74d42..438bf6c 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -58,6 +58,7 @@ export const TroisJSVuePlugin = { 'Image', 'InstancedMesh', + 'MirrorMesh', 'Sprite', 'BokehPass',