From 44e290f475d1b234dcfa87e16f644ce279d7af5b Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sat, 3 Oct 2020 15:57:32 +0200 Subject: [PATCH] wip --- src/core/Renderer.js | 10 +++++++++- src/core/Scene.js | 10 +++++++++- src/meshes/Gem.js | 6 ++++-- src/meshes/Mesh.js | 2 +- src/meshes/MirrorMesh.js | 9 +++++---- 5 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/core/Renderer.js b/src/core/Renderer.js index 8866952..1583753 100644 --- a/src/core/Renderer.js +++ b/src/core/Renderer.js @@ -38,15 +38,18 @@ export default { width: String, height: String, }, - setup(props) { + setup() { return { three: useThree(), raf: true, + onMountedCallbacks: [], }; }, provide() { return { three: this.three, + // renderer: this.three.renderer, + rendererComponent: this, }; }, mounted() { @@ -68,12 +71,17 @@ export default { if (this.three.composer) this.animateC(); else this.animate(); }; + + this.onMountedCallbacks.forEach(c => c()); }, beforeUnmount() { this.raf = false; this.three.dispose(); }, methods: { + onMounted(callback) { + this.onMountedCallbacks.push(callback); + }, onBeforeRender(callback) { this.three.onBeforeRender(callback); }, diff --git a/src/core/Scene.js b/src/core/Scene.js index c53b685..3bc8965 100644 --- a/src/core/Scene.js +++ b/src/core/Scene.js @@ -7,7 +7,7 @@ export default { id: String, background: [String, Number], }, - setup (props) { + setup(props) { const scene = new Scene(); if (props.background) scene.background = new Color(props.background); watch(() => props.background, (value) => { scene.background = new Color(value); }); @@ -23,6 +23,14 @@ export default { this.three.scene = this.scene; } }, + methods: { + // add(o) { + // this.scene.add(o); + // }, + // remove(o) { + // this.scene.remove(o); + // }, + }, render() { if (this.$slots.default) { return this.$slots.default(); diff --git a/src/meshes/Gem.js b/src/meshes/Gem.js index 2787464..69bc79a 100644 --- a/src/meshes/Gem.js +++ b/src/meshes/Gem.js @@ -17,13 +17,15 @@ export default { cubeRTSize: { type: Number, default: 512 }, cubeCameraNear: { type: Number, default: 0.1 }, cubeCameraFar: { type: Number, default: 2000 }, + cubeRTAutoUpdate: Boolean, }, mounted() { this.initGem(); - this.three.onBeforeRender(this.updateCubeRT); + if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT); + else this.rendererComponent.onMounted(this.updateCubeRT); }, unmounted() { - this.three.offBeforeRender(this.upateCubeRT); + this.three.offBeforeRender(this.updateCubeRT); }, methods: { initGem() { diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js index 88c6efe..a095acd 100644 --- a/src/meshes/Mesh.js +++ b/src/meshes/Mesh.js @@ -3,7 +3,7 @@ import { watch } from 'vue'; import useBindProp from '../use/useBindProp.js'; export default { - inject: ['three', 'scene'], + inject: ['three', 'scene', 'rendererComponent'], emits: ['ready'], props: { materialId: String, diff --git a/src/meshes/MirrorMesh.js b/src/meshes/MirrorMesh.js index ac8627f..8ccb568 100644 --- a/src/meshes/MirrorMesh.js +++ b/src/meshes/MirrorMesh.js @@ -14,13 +14,15 @@ export default { cubeRTSize: { type: Number, default: 512 }, cubeCameraNear: { type: Number, default: 0.1 }, cubeCameraFar: { type: Number, default: 2000 }, + cubeRTAutoUpdate: Boolean, }, mounted() { this.initMirrorMesh(); - this.three.onBeforeRender(this.upateCubeRT); + if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT); + else this.rendererComponent.onMounted(this.updateCubeRT); }, unmounted() { - this.three.offBeforeRender(this.upateCubeRT); + this.three.offBeforeRender(this.updateCubeRT); }, methods: { initMirrorMesh() { @@ -32,11 +34,10 @@ export default { this.material.envMap = cubeRT.texture; this.material.needsUpdate = true; }, - upateCubeRT() { + updateCubeRT() { this.mesh.visible = false; this.cubeCamera.update(this.three.renderer, this.scene); this.mesh.visible = true; - console.log('upateCubeRT'); }, }, __hmrId: 'MirrorMesh',