From d15b90e4b2ed7a2b3945b5d4e92f88e7d80fe141 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Thu, 22 Apr 2021 00:46:52 +0200 Subject: [PATCH] cs --- src/components/liquid/LiquidEffect.js | 1 - src/components/liquid/LiquidPlane.js | 49 +++---- src/components/meshes/Gem.js | 82 +++++------ src/components/meshes/MirrorMesh.js | 34 ++--- src/components/meshes/RefractionMesh.js | 40 +++--- src/components/misc/Stats.js | 30 ++-- src/components/misc/VRButton.vue | 40 +++--- src/components/noisy/NoisyImage.js | 1 - src/components/noisy/NoisyPlane.js | 82 +++++------ src/components/noisy/NoisySphere.js | 46 +++--- src/components/noisy/NoisyText.js | 46 +++--- src/components/physics/CannonWorld.js | 50 +++---- src/components/physics/useCannon.js | 184 ++++++++++++------------ src/components/sliders/AnimatedPlane.js | 148 +++++++++---------- src/components/sliders/Slider1.vue | 144 +++++++++---------- src/components/sliders/Slider2.vue | 146 +++++++++---------- src/components/sliders/ZoomBlurImage.js | 44 +++--- 17 files changed, 583 insertions(+), 584 deletions(-) diff --git a/src/components/liquid/LiquidEffect.js b/src/components/liquid/LiquidEffect.js index 7aa52a8..512b74e 100644 --- a/src/components/liquid/LiquidEffect.js +++ b/src/components/liquid/LiquidEffect.js @@ -8,7 +8,6 @@ import { ShaderMaterial, Uniform, Vector2, - WebGLRenderer, WebGLRenderTarget, } from 'three' diff --git a/src/components/liquid/LiquidPlane.js b/src/components/liquid/LiquidPlane.js index ae26a2b..e65eead 100644 --- a/src/components/liquid/LiquidPlane.js +++ b/src/components/liquid/LiquidPlane.js @@ -1,8 +1,8 @@ -import { defineComponent, watch } from 'vue'; -import { DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry } from 'three'; -import Object3D from '../../core/Object3D'; -import { bindProps } from '../../tools'; -import LiquidEffect from './LiquidEffect.js'; +import { defineComponent, watch } from 'vue' +import { DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry } from 'three' +import Object3D from '../../core/Object3D' +import { bindProps } from '../../tools' +import LiquidEffect from './LiquidEffect.js' export default defineComponent({ extends: Object3D, @@ -16,39 +16,40 @@ export default defineComponent({ roughness: { type: Number, default: 0.25 }, }, mounted() { - this.liquidEffect = new LiquidEffect(this.renderer.renderer); + this.liquidEffect = new LiquidEffect(this.renderer.renderer) this.renderer.onMounted(() => { - this.liquidEffect.renderer = this.renderer.renderer; - this.renderer.onBeforeRender(this.update); - }); + this.liquidEffect.renderer = this.renderer.renderer + this.renderer.onBeforeRender(this.update) + }) - this.material = new MeshStandardMaterial({ color: this.color, side: DoubleSide, metalness: this.metalness, roughness: this.roughness, + this.material = new MeshStandardMaterial({ + color: this.color, side: DoubleSide, metalness: this.metalness, roughness: this.roughness, onBeforeCompile: shader => { - shader.uniforms.hmap = { value: this.liquidEffect.hMap.texture }; - shader.vertexShader = "uniform sampler2D hmap;\n" + shader.vertexShader; - const token = '#include '; + shader.uniforms.hmap = { value: this.liquidEffect.hMap.texture } + shader.vertexShader = "uniform sampler2D hmap;\n" + shader.vertexShader + const token = '#include ' const customTransform = ` vec3 transformed = vec3(position); vec4 info = texture2D(hmap, uv); vNormal = vec3(info.b, sqrt(1.0 - dot(info.ba, info.ba)), info.a).xzy; transformed.z = 20. * info.r; - `; - shader.vertexShader = shader.vertexShader.replace(token, customTransform); + ` + shader.vertexShader = shader.vertexShader.replace(token, customTransform) }, - }); - bindProps(this, ['metalness', 'roughness'], this.material); - watch(() => this.color, (value) => this.material.color.set(value)); + }) + bindProps(this, ['metalness', 'roughness'], this.material) + watch(() => this.color, (value) => this.material.color.set(value)) - this.geometry = new PlaneGeometry(this.width, this.height, this.widthSegments, this.heightSegments); - this.mesh = new Mesh(this.geometry, this.material); - this.initObject3D(this.mesh); + this.geometry = new PlaneGeometry(this.width, this.height, this.widthSegments, this.heightSegments) + this.mesh = new Mesh(this.geometry, this.material) + this.initObject3D(this.mesh) }, unmounted() { - this.renderer.offBeforeRender(this.update); + this.renderer.offBeforeRender(this.update) }, methods: { update() { - this.liquidEffect.update(); + this.liquidEffect.update() }, }, -}); +}) diff --git a/src/components/meshes/Gem.js b/src/components/meshes/Gem.js index c6098a3..d7efed7 100644 --- a/src/components/meshes/Gem.js +++ b/src/components/meshes/Gem.js @@ -1,4 +1,4 @@ -import { defineComponent } from 'vue'; +import { defineComponent } from 'vue' import { BackSide, CubeCamera, @@ -7,9 +7,9 @@ import { Mesh as TMesh, RGBFormat, WebGLCubeRenderTarget, -} from 'three'; -import Mesh from '../../meshes/Mesh'; -import { bindProp } from '../../tools'; +} from 'three' +import Mesh from '../../meshes/Mesh' +import { bindProp } from '../../tools' export default defineComponent({ extends: Mesh, @@ -20,54 +20,54 @@ export default defineComponent({ autoUpdate: Boolean, }, mounted() { - this.initGem(); - if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT); - else this.renderer.onMounted(this.updateCubeRT); + this.initGem() + if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT) + else this.renderer.onMounted(this.updateCubeRT) }, unmounted() { - this.renderer.offBeforeRender(this.updateCubeRT); - if (this.cubeCamera) this.removeFromParent(this.cubeCamera); - if (this.meshBack) this.removeFromParent(this.meshBack); - if (this.materialBack) this.materialBack.dispose(); + this.renderer.offBeforeRender(this.updateCubeRT) + if (this.cubeCamera) this.removeFromParent(this.cubeCamera) + if (this.meshBack) this.removeFromParent(this.meshBack) + if (this.materialBack) this.materialBack.dispose() }, methods: { 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); - this.addToParent(this.cubeCamera); + 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) + this.addToParent(this.cubeCamera) - this.material.side = FrontSide; - this.material.envMap = cubeRT.texture; - this.material.envMapIntensity = 10; - this.material.metalness = 0; - this.material.roughness = 0; - this.material.opacity = 0.75; - this.material.transparent = true; - this.material.premultipliedAlpha = true; - this.material.needsUpdate = true; + this.material.side = FrontSide + this.material.envMap = cubeRT.texture + this.material.envMapIntensity = 10 + this.material.metalness = 0 + this.material.roughness = 0 + this.material.opacity = 0.75 + this.material.transparent = true + this.material.premultipliedAlpha = true + this.material.needsUpdate = true - this.materialBack = this.material.clone(); - this.materialBack.side = BackSide; - this.materialBack.envMapIntensity = 5; - this.materialBack.metalness = 1; - this.materialBack.roughness = 0; - this.materialBack.opacity = 0.5; + this.materialBack = this.material.clone() + this.materialBack.side = BackSide + this.materialBack.envMapIntensity = 5 + this.materialBack.metalness = 1 + this.materialBack.roughness = 0 + this.materialBack.opacity = 0.5 - this.meshBack = new TMesh(this.geometry, this.materialBack); + this.meshBack = new TMesh(this.geometry, this.materialBack) - bindProp(this, 'position', this.meshBack); - bindProp(this, 'rotation', this.meshBack); - bindProp(this, 'scale', this.meshBack); - this.addToParent(this.meshBack); + bindProp(this, 'position', this.meshBack) + bindProp(this, 'rotation', this.meshBack) + bindProp(this, 'scale', this.meshBack) + this.addToParent(this.meshBack) }, updateCubeRT() { - this.mesh.visible = false; - this.meshBack.visible = false; - this.cubeCamera.update(this.renderer.renderer, this.scene); - this.mesh.visible = true; - this.meshBack.visible = true; + this.mesh.visible = false + this.meshBack.visible = false + this.cubeCamera.update(this.renderer.renderer, this.scene) + this.mesh.visible = true + this.meshBack.visible = true }, }, __hmrId: 'Gem', -}); +}) diff --git a/src/components/meshes/MirrorMesh.js b/src/components/meshes/MirrorMesh.js index ac72a17..203d422 100644 --- a/src/components/meshes/MirrorMesh.js +++ b/src/components/meshes/MirrorMesh.js @@ -1,11 +1,11 @@ -import { defineComponent } from 'vue'; +import { defineComponent } from 'vue' import { CubeCamera, LinearMipmapLinearFilter, RGBFormat, WebGLCubeRenderTarget, -} from 'three'; -import Mesh from '../../meshes/Mesh'; +} from 'three' +import Mesh from '../../meshes/Mesh' export default defineComponent({ extends: Mesh, @@ -16,28 +16,28 @@ export default defineComponent({ autoUpdate: Boolean, }, mounted() { - this.initMirrorMesh(); - if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT); - else this.renderer.onMounted(this.updateCubeRT); + this.initMirrorMesh() + if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT) + else this.renderer.onMounted(this.updateCubeRT) }, unmounted() { - this.renderer.offBeforeRender(this.updateCubeRT); - if (this.cubeCamera) this.removeFromParent(this.cubeCamera); + this.renderer.offBeforeRender(this.updateCubeRT) + if (this.cubeCamera) this.removeFromParent(this.cubeCamera) }, methods: { initMirrorMesh() { - const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter }); - this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT); - this.addToParent(this.cubeCamera); + const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter }) + this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT) + this.addToParent(this.cubeCamera) - this.material.envMap = cubeRT.texture; - this.material.needsUpdate = true; + this.material.envMap = cubeRT.texture + this.material.needsUpdate = true }, updateCubeRT() { - this.mesh.visible = false; - this.cubeCamera.update(this.renderer.renderer, this.scene); - this.mesh.visible = true; + this.mesh.visible = false + this.cubeCamera.update(this.renderer.renderer, this.scene) + this.mesh.visible = true }, }, __hmrId: 'MirrorMesh', -}); +}) diff --git a/src/components/meshes/RefractionMesh.js b/src/components/meshes/RefractionMesh.js index 81232fe..ad4df31 100644 --- a/src/components/meshes/RefractionMesh.js +++ b/src/components/meshes/RefractionMesh.js @@ -1,13 +1,13 @@ -import { defineComponent } from 'vue'; +import { defineComponent } from 'vue' import { CubeCamera, CubeRefractionMapping, LinearMipmapLinearFilter, RGBFormat, WebGLCubeRenderTarget, -} from 'three'; -import Mesh from '../../meshes/Mesh'; -import { bindProp } from '../../tools'; +} from 'three' +import Mesh from '../../meshes/Mesh' +import { bindProp } from '../../tools' export default defineComponent({ extends: Mesh, @@ -19,30 +19,30 @@ export default defineComponent({ autoUpdate: Boolean, }, mounted() { - this.initMirrorMesh(); - if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT); - else this.renderer.onMounted(this.updateCubeRT); + this.initMirrorMesh() + if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT) + else this.renderer.onMounted(this.updateCubeRT) }, unmounted() { - this.renderer.offBeforeRender(this.updateCubeRT); - if (this.cubeCamera) this.removeFromParent(this.cubeCamera); + this.renderer.offBeforeRender(this.updateCubeRT) + if (this.cubeCamera) this.removeFromParent(this.cubeCamera) }, methods: { 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); - this.addToParent(this.cubeCamera); + 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) + this.addToParent(this.cubeCamera) - this.material.envMap = cubeRT.texture; - this.material.refractionRatio = this.refractionRatio; - this.material.needsUpdate = true; + this.material.envMap = cubeRT.texture + this.material.refractionRatio = this.refractionRatio + this.material.needsUpdate = true }, updateCubeRT() { - this.mesh.visible = false; - this.cubeCamera.update(this.renderer.renderer, this.scene); - this.mesh.visible = true; + this.mesh.visible = false + this.cubeCamera.update(this.renderer.renderer, this.scene) + this.mesh.visible = true }, }, __hmrId: 'RefractionMesh', -}); +}) diff --git a/src/components/misc/Stats.js b/src/components/misc/Stats.js index d2b4dc2..774aad8 100644 --- a/src/components/misc/Stats.js +++ b/src/components/misc/Stats.js @@ -1,4 +1,4 @@ -import Stats from 'stats.js'; +import Stats from 'stats.js' export default { props: { @@ -7,40 +7,40 @@ export default { emits: ['created'], inject: ['renderer'], setup({ noSetup }) { - const stats = new Stats(); + const stats = new Stats() if (!noSetup) { - stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom - document.body.appendChild(stats.dom); + stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom + document.body.appendChild(stats.dom) } - return { stats }; + return { stats } }, mounted() { if (!this.noSetup) { - this.renderer.onBeforeRender(this.begin); - this.renderer.onAfterRender(this.end); + this.renderer.onBeforeRender(this.begin) + this.renderer.onAfterRender(this.end) } - this.$emit('created', { stats: this.stats }); + this.$emit('created', { stats: this.stats }) }, methods: { begin() { if (this.stats) { - this.stats.begin(); + this.stats.begin() } }, end() { if (this.stats) { - this.stats.end(); + this.stats.end() } }, }, unmounted() { if (this.stats && this.stats.dom) { - this.stats.dom.parentElement.removeChild(this.stats.dom); + this.stats.dom.parentElement.removeChild(this.stats.dom) } - this.renderer.offBeforeRender(this.begin); - this.renderer.offAfterRender(this.end); + this.renderer.offBeforeRender(this.begin) + this.renderer.offAfterRender(this.end) }, render() { - return this.$slots.default ? this.$slots.default() : []; + return this.$slots.default ? this.$slots.default() : [] }, -}; +} diff --git a/src/components/misc/VRButton.vue b/src/components/misc/VRButton.vue index 33fbb2e..b04efd7 100644 --- a/src/components/misc/VRButton.vue +++ b/src/components/misc/VRButton.vue @@ -14,57 +14,57 @@ export default { error: '', xrSupport: false, currentSession: null, - }; + } }, computed: { message() { if (this.xrSupport) { - return this.currentSession ? this.exitMessage : this.enterMessage; + return this.currentSession ? this.exitMessage : this.enterMessage } else if (this.error) { - return this.error; + return this.error } - return ''; + return '' }, }, created() { if ('xr' in navigator) { navigator.xr.isSessionSupported('immersive-vr').then((supported) => { - this.xrSupport = supported; - }); + this.xrSupport = supported + }) } else { if (window.isSecureContext === false) { - this.error = 'WEBXR NEEDS HTTPS'; + this.error = 'WEBXR NEEDS HTTPS' } else { - this.error = 'WEBXR NOT AVAILABLE'; + this.error = 'WEBXR NOT AVAILABLE' } } }, methods: { init(renderer) { - this.renderer = renderer; + this.renderer = renderer }, onClick() { - if (!this.xrSupport) return; - if (!this.renderer) return; + if (!this.xrSupport) return + if (!this.renderer) return if (this.currentSession) { - this.currentSession.end(); + this.currentSession.end() } else { - const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking'] }; - navigator.xr.requestSession('immersive-vr', sessionInit).then(this.onSessionStarted); + const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking'] } + navigator.xr.requestSession('immersive-vr', sessionInit).then(this.onSessionStarted) } }, async onSessionStarted(session) { - session.addEventListener('end', this.onSessionEnded); - await this.renderer.xr.setSession(session); - this.currentSession = session; + session.addEventListener('end', this.onSessionEnded) + await this.renderer.xr.setSession(session) + this.currentSession = session }, onSessionEnded() { - this.currentSession.removeEventListener('end', this.onSessionEnded); - this.currentSession = null; + this.currentSession.removeEventListener('end', this.onSessionEnded) + this.currentSession = null }, }, -}; +}