From d2006b1f2c7202fb7f94e723133b478dfdc441d8 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Fri, 16 Apr 2021 01:56:52 +0200 Subject: [PATCH] wip --- index.html | 2 +- src/components/liquid/LiquidPlane.js | 10 +- src/components/meshes/Gem.js | 6 +- src/components/meshes/MirrorMesh.js | 6 +- src/components/meshes/RefractionMesh.js | 6 +- src/components/misc/Stats.js | 10 +- src/components/noisy/NoisyImage.js | 4 +- src/components/noisy/NoisyPlane.js | 4 +- src/components/noisy/NoisySphere.js | 4 +- src/components/noisy/NoisyText.js | 4 +- src/components/physics/CannonWorld.js | 6 +- src/components/sliders/Slider1.vue | 2 +- src/components/sliders/Slider2.vue | 2 +- src/components/viewers/GLTFViewer.vue | 2 +- src/core/{Camera.js => Camera.ts} | 8 +- src/core/Group.js | 13 -- src/core/Group.ts | 17 +++ src/core/Object3D.js | 70 ----------- src/core/Object3D.ts | 71 +++++++++++ ...graphicCamera.js => OrthographicCamera.ts} | 2 +- ...spectiveCamera.js => PerspectiveCamera.ts} | 2 +- src/core/{Raycaster.js => Raycaster.ts} | 8 +- src/core/Renderer.js | 105 ---------------- src/core/Renderer.ts | 113 ++++++++++++++++++ src/core/{Scene.js => Scene.ts} | 0 src/core/index.js | 16 +-- src/core/{useRaycaster.js => useRaycaster.ts} | 0 src/core/useThree.ts | 18 +-- src/lights/Light.js | 2 +- src/main.js | 7 -- src/main.ts | 7 ++ src/meshes/Mesh.js | 2 +- src/meshes/Sprite.js | 2 +- src/models/Model.js | 2 +- src/{plugin.js => plugin.ts} | 0 src/tools.js | 81 ------------- src/tools.ts | 84 +++++++++++++ 37 files changed, 357 insertions(+), 341 deletions(-) rename src/core/{Camera.js => Camera.ts} (60%) delete mode 100644 src/core/Group.js create mode 100644 src/core/Group.ts delete mode 100644 src/core/Object3D.js create mode 100644 src/core/Object3D.ts rename src/core/{OrthographicCamera.js => OrthographicCamera.ts} (96%) rename src/core/{PerspectiveCamera.js => PerspectiveCamera.ts} (97%) rename src/core/{Raycaster.js => Raycaster.ts} (84%) delete mode 100644 src/core/Renderer.js create mode 100644 src/core/Renderer.ts rename src/core/{Scene.js => Scene.ts} (100%) rename src/core/{useRaycaster.js => useRaycaster.ts} (100%) delete mode 100644 src/main.js create mode 100644 src/main.ts rename src/{plugin.js => plugin.ts} (100%) delete mode 100644 src/tools.js create mode 100644 src/tools.ts diff --git a/index.html b/index.html index 883edf9..0626100 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@
- + diff --git a/src/components/liquid/LiquidPlane.js b/src/components/liquid/LiquidPlane.js index 9a7d455..eb1a916 100644 --- a/src/components/liquid/LiquidPlane.js +++ b/src/components/liquid/LiquidPlane.js @@ -1,6 +1,6 @@ import { defineComponent, watch } from 'vue'; import { DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry } from 'three'; -import Object3D from '../../core/Object3D.js'; +import Object3D from '../../core/Object3D'; import { bindProps } from '../../tools'; import LiquidEffect from './LiquidEffect.js'; @@ -17,9 +17,9 @@ export default defineComponent({ }, mounted() { this.liquidEffect = new LiquidEffect(this.three.renderer); - this.rendererComponent.onMounted(() => { - this.liquidEffect.renderer = this.rendererComponent.renderer; - this.rendererComponent.onBeforeRender(this.update); + this.renderer.onMounted(() => { + 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, @@ -44,7 +44,7 @@ export default defineComponent({ this.initObject3D(this.mesh); }, unmounted() { - this.rendererComponent.offBeforeRender(this.update); + this.renderer.offBeforeRender(this.update); }, methods: { update() { diff --git a/src/components/meshes/Gem.js b/src/components/meshes/Gem.js index 1e05486..cb26e92 100644 --- a/src/components/meshes/Gem.js +++ b/src/components/meshes/Gem.js @@ -21,11 +21,11 @@ export default defineComponent({ }, mounted() { this.initGem(); - if (this.autoUpdate) this.rendererComponent.onBeforeRender(this.updateCubeRT); - else this.rendererComponent.onMounted(this.updateCubeRT); + if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT); + else this.renderer.onMounted(this.updateCubeRT); }, unmounted() { - this.rendererComponent.offBeforeRender(this.updateCubeRT); + 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(); diff --git a/src/components/meshes/MirrorMesh.js b/src/components/meshes/MirrorMesh.js index bef5dd6..c81980d 100644 --- a/src/components/meshes/MirrorMesh.js +++ b/src/components/meshes/MirrorMesh.js @@ -17,11 +17,11 @@ export default defineComponent({ }, mounted() { this.initMirrorMesh(); - if (this.autoUpdate) this.rendererComponent.onBeforeRender(this.updateCubeRT); - else this.rendererComponent.onMounted(this.updateCubeRT); + if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT); + else this.renderer.onMounted(this.updateCubeRT); }, unmounted() { - this.rendererComponent.offBeforeRender(this.updateCubeRT); + this.renderer.offBeforeRender(this.updateCubeRT); if (this.cubeCamera) this.removeFromParent(this.cubeCamera); }, methods: { diff --git a/src/components/meshes/RefractionMesh.js b/src/components/meshes/RefractionMesh.js index 891633c..41fad69 100644 --- a/src/components/meshes/RefractionMesh.js +++ b/src/components/meshes/RefractionMesh.js @@ -20,11 +20,11 @@ export default defineComponent({ }, mounted() { this.initMirrorMesh(); - if (this.autoUpdate) this.rendererComponent.onBeforeRender(this.updateCubeRT); - else this.rendererComponent.onMounted(this.updateCubeRT); + if (this.autoUpdate) this.renderer.onBeforeRender(this.updateCubeRT); + else this.renderer.onMounted(this.updateCubeRT); }, unmounted() { - this.rendererComponent.offBeforeRender(this.updateCubeRT); + this.renderer.offBeforeRender(this.updateCubeRT); if (this.cubeCamera) this.removeFromParent(this.cubeCamera); }, methods: { diff --git a/src/components/misc/Stats.js b/src/components/misc/Stats.js index 5ef9d95..d2b4dc2 100644 --- a/src/components/misc/Stats.js +++ b/src/components/misc/Stats.js @@ -5,7 +5,7 @@ export default { noSetup: { type: Boolean, default: false }, }, emits: ['created'], - inject: ['rendererComponent'], + inject: ['renderer'], setup({ noSetup }) { const stats = new Stats(); if (!noSetup) { @@ -16,8 +16,8 @@ export default { }, mounted() { if (!this.noSetup) { - this.rendererComponent.onBeforeRender(this.begin); - this.rendererComponent.onAfterRender(this.end); + this.renderer.onBeforeRender(this.begin); + this.renderer.onAfterRender(this.end); } this.$emit('created', { stats: this.stats }); }, @@ -37,8 +37,8 @@ export default { if (this.stats && this.stats.dom) { this.stats.dom.parentElement.removeChild(this.stats.dom); } - this.rendererComponent.offBeforeRender(this.begin); - this.rendererComponent.offAfterRender(this.end); + this.renderer.offBeforeRender(this.begin); + this.renderer.offAfterRender(this.end); }, render() { return this.$slots.default ? this.$slots.default() : []; diff --git a/src/components/noisy/NoisyImage.js b/src/components/noisy/NoisyImage.js index aed547a..3bd2f53 100644 --- a/src/components/noisy/NoisyImage.js +++ b/src/components/noisy/NoisyImage.js @@ -29,10 +29,10 @@ export default defineComponent({ }, mounted() { this.startTime = Date.now(); - this.rendererComponent.onBeforeRender(this.updateTime); + this.renderer.onBeforeRender(this.updateTime); }, unmounted() { - this.rendererComponent.offBeforeRender(this.updateTime); + this.renderer.offBeforeRender(this.updateTime); }, methods: { createGeometry() { diff --git a/src/components/noisy/NoisyPlane.js b/src/components/noisy/NoisyPlane.js index e08a7cb..51083cc 100644 --- a/src/components/noisy/NoisyPlane.js +++ b/src/components/noisy/NoisyPlane.js @@ -30,10 +30,10 @@ export default defineComponent({ watch(() => this.displacementScale, (value) => { this.material.displacementScale = value; }); this.startTime = Date.now(); - this.rendererComponent.onBeforeRender(this.update); + this.renderer.onBeforeRender(this.update); }, unmounted() { - this.rendererComponent.offBeforeRender(this.update); + this.renderer.offBeforeRender(this.update); this.fsQuad.dispose(); this.dispRT.dispose(); this.dispMat.dispose(); diff --git a/src/components/noisy/NoisySphere.js b/src/components/noisy/NoisySphere.js index 870b2bb..23e2e4c 100644 --- a/src/components/noisy/NoisySphere.js +++ b/src/components/noisy/NoisySphere.js @@ -28,10 +28,10 @@ export default defineComponent({ this.updateMaterial(); this.startTime = Date.now(); - this.rendererComponent.onBeforeRender(this.updateTime); + this.renderer.onBeforeRender(this.updateTime); }, unmounted() { - this.rendererComponent.offBeforeRender(this.updateTime); + this.renderer.offBeforeRender(this.updateTime); }, methods: { updateMaterial() { diff --git a/src/components/noisy/NoisyText.js b/src/components/noisy/NoisyText.js index 0454aaf..3909c52 100644 --- a/src/components/noisy/NoisyText.js +++ b/src/components/noisy/NoisyText.js @@ -25,10 +25,10 @@ export default defineComponent({ this.updateMaterial(); this.startTime = Date.now(); - this.rendererComponent.onBeforeRender(this.updateTime); + this.renderer.onBeforeRender(this.updateTime); }, unmounted() { - this.rendererComponent.offBeforeRender(this.updateTime); + this.renderer.offBeforeRender(this.updateTime); }, methods: { updateMaterial() { diff --git a/src/components/physics/CannonWorld.js b/src/components/physics/CannonWorld.js index efb3eae..3d38726 100644 --- a/src/components/physics/CannonWorld.js +++ b/src/components/physics/CannonWorld.js @@ -3,7 +3,7 @@ import useCannon from './useCannon.js'; // import { bindProp } from '../../tools'; export default defineComponent({ - inject: ['three', 'scene', 'rendererComponent'], + inject: ['three', 'scene', 'renderer'], props: { gravity: { type: Object, default: () => ({ x: 0, y: 0, z: -9.82 }) }, broadphase: { type: String }, @@ -16,10 +16,10 @@ export default defineComponent({ this.cannon = useCannon({ gravity: this.gravity, broadphase: this.broadphase }); }, mounted() { - this.rendererComponent.onBeforeRender(this.step); + this.renderer.onBeforeRender(this.step); }, unmounted() { - this.rendererComponent.offBeforeRender(this.step); + this.renderer.offBeforeRender(this.step); }, methods: { step() { diff --git a/src/components/sliders/Slider1.vue b/src/components/sliders/Slider1.vue index d176bb9..bc91cae 100644 --- a/src/components/sliders/Slider1.vue +++ b/src/components/sliders/Slider1.vue @@ -11,7 +11,7 @@ import { defineComponent } from 'vue'; import { Object3D } from 'three'; import { gsap, Power4 } from 'gsap'; -import Camera from '../../core/PerspectiveCamera.js'; +import Camera from '../../core/PerspectiveCamera'; import Renderer from '../../core/Renderer.js'; import Scene from '../../core/Scene.js'; diff --git a/src/components/sliders/Slider2.vue b/src/components/sliders/Slider2.vue index d8a4008..859d383 100644 --- a/src/components/sliders/Slider2.vue +++ b/src/components/sliders/Slider2.vue @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; import { Vector2 } from 'three'; import { gsap, Power4 } from 'gsap'; -import OrthographicCamera from '../../core/OrthographicCamera.js'; +import OrthographicCamera from '../../core/OrthographicCamera'; import Renderer from '../../core/Renderer.js'; import Scene from '../../core/Scene.js'; diff --git a/src/components/viewers/GLTFViewer.vue b/src/components/viewers/GLTFViewer.vue index a3028b3..439521c 100644 --- a/src/components/viewers/GLTFViewer.vue +++ b/src/components/viewers/GLTFViewer.vue @@ -10,7 +10,7 @@