From 10a11e152d8532b1d0e8b6918a6ac4e7658ee859 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sat, 19 Sep 2020 20:29:53 +0200 Subject: [PATCH] wip --- README.md | 2 +- src/core/Renderer.js | 5 +++++ src/core/useThree.js | 2 ++ src/effects/BokehPass.js | 1 + src/effects/EffectComposer.js | 1 + src/effects/EffectPass.js | 1 + src/effects/FilmPass.js | 36 ++++++++++++++++++++++++++++++++++ src/effects/RenderPass.js | 1 + src/effects/UnrealBloomPass.js | 1 + src/meshes/InstancedMesh.js | 13 ++++++++++-- src/meshes/Mesh.js | 4 ++++ src/plugin.js | 2 ++ 12 files changed, 66 insertions(+), 3 deletions(-) create mode 100644 src/effects/FilmPass.js diff --git a/README.md b/README.md index 45a296f..9a3f08c 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects - [x] SpotLight : angle, decay, distance, penumbra - [x] Material : color, depthTest, depthWrite, fog, opacity, transparent - [x] StandardMaterial : emissive, emissiveIntensity, metalness, roughness - - [x] Mesh : position, rotation, scale + - [x] Mesh : position, rotation, scale, castShadow, receiveShadow - [ ] ... ## Features diff --git a/src/core/Renderer.js b/src/core/Renderer.js index 68004c1..8866952 100644 --- a/src/core/Renderer.js +++ b/src/core/Renderer.js @@ -11,6 +11,10 @@ export default { type: Boolean, default: false, }, + autoClear: { + type: Boolean, + default: true, + }, shadow: { type: Boolean, default: false, @@ -50,6 +54,7 @@ export default { canvas: this.$refs.canvas, antialias: this.antialias, alpha: this.alpha, + autoClear: this.autoClear, orbit_ctrl: this.orbitCtrl, mouse_move: this.mouseMove, mouse_raycast: this.mouseRaycast, diff --git a/src/core/useThree.js b/src/core/useThree.js index 0c70549..3c3dc0a 100644 --- a/src/core/useThree.js +++ b/src/core/useThree.js @@ -17,6 +17,7 @@ export default function useThree() { canvas: null, antialias: true, alpha: false, + autoClear: true, orbit_ctrl: false, mouse_move: false, mouse_raycast: false, @@ -84,6 +85,7 @@ export default function useThree() { } obj.renderer = new WebGLRenderer({ canvas: conf.canvas, antialias: conf.antialias, alpha: conf.alpha }); + obj.renderer.autoClear = conf.autoClear; if (conf.orbit_ctrl) { obj.orbitCtrl = new OrbitControls(obj.camera, obj.renderer.domElement); diff --git a/src/effects/BokehPass.js b/src/effects/BokehPass.js index 2b6abd4..71aa06a 100644 --- a/src/effects/BokehPass.js +++ b/src/effects/BokehPass.js @@ -46,4 +46,5 @@ export default { this.passes.push(pass); this.pass = pass; }, + __hmrId: 'BokehPass', }; diff --git a/src/effects/EffectComposer.js b/src/effects/EffectComposer.js index a204291..3f71985 100644 --- a/src/effects/EffectComposer.js +++ b/src/effects/EffectComposer.js @@ -24,4 +24,5 @@ export default { render() { return this.$slots.default(); }, + __hmrId: 'EffectComposer', }; diff --git a/src/effects/EffectPass.js b/src/effects/EffectPass.js index 1a9790f..e992dfd 100644 --- a/src/effects/EffectPass.js +++ b/src/effects/EffectPass.js @@ -8,4 +8,5 @@ export default { render() { return []; }, + __hmrId: 'EffectPass', }; diff --git a/src/effects/FilmPass.js b/src/effects/FilmPass.js new file mode 100644 index 0000000..c199532 --- /dev/null +++ b/src/effects/FilmPass.js @@ -0,0 +1,36 @@ +import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass.js'; +import EffectPass from './EffectPass.js'; + +export default { + extends: EffectPass, + props: { + noiseIntensity: { + type: Number, + default: 0.5, + }, + scanlinesIntensity: { + type: Number, + default: 0.05, + }, + scanlinesCount: { + type: Number, + default: 4096, + }, + grayscale: { + type: Number, + default: 0, + }, + }, + watch: { + noiseIntensity() { this.pass.uniforms.nIntensity.value = this.noiseIntensity; }, + scanlinesIntensity() { this.pass.uniforms.sIntensity.value = this.scanlinesIntensity; }, + scanlinesCount() { this.pass.uniforms.sCount.value = this.scanlinesCount; }, + grayscale() { this.pass.uniforms.grayscale.value = this.grayscale; }, + }, + mounted() { + const pass = new FilmPass(this.noiseIntensity, this.scanlinesIntensity, this.scanlinesCount, this.grayscale); + this.passes.push(pass); + this.pass = pass; + }, + __hmrId: 'FilmPass', +}; diff --git a/src/effects/RenderPass.js b/src/effects/RenderPass.js index 510b953..9caab8f 100644 --- a/src/effects/RenderPass.js +++ b/src/effects/RenderPass.js @@ -14,4 +14,5 @@ export default { this.passes.push(pass); this.pass = pass; }, + __hmrId: 'RenderPass', }; diff --git a/src/effects/UnrealBloomPass.js b/src/effects/UnrealBloomPass.js index 331185e..027aec3 100644 --- a/src/effects/UnrealBloomPass.js +++ b/src/effects/UnrealBloomPass.js @@ -35,4 +35,5 @@ export default { this.passes.push(pass); this.pass = pass; }, + __hmrId: 'UnrealBloomPass', }; diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js index 8192079..1ef32e9 100644 --- a/src/meshes/InstancedMesh.js +++ b/src/meshes/InstancedMesh.js @@ -1,5 +1,6 @@ import { InstancedMesh } from 'three'; -import { setFromProp } from '../tools.js'; +import { watch } from 'vue'; +import useBindProp from '../use/useBindProp.js'; export default { inject: ['three', 'scene'], @@ -33,9 +34,17 @@ export default { }, mounted() { this.mesh = new InstancedMesh(this.conf.geometry, this.three.materials[this.materialId], this.count); - setFromProp(this.mesh.position, this.position); + + useBindProp(this, 'position', this.mesh.position); + useBindProp(this, 'rotation', this.mesh.rotation); + useBindProp(this, 'scale', this.mesh.scale); + this.mesh.castShadow = this.castShadow; this.mesh.receiveShadow = this.receiveShadow; + ['castShadow', 'receiveShadow'].forEach(p => { + watch(() => this[p], () => { this.mesh[p] = this[p]; }); + }); + this.scene.add(this.mesh); }, unmounted() { diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js index 45017d7..e218e09 100644 --- a/src/meshes/Mesh.js +++ b/src/meshes/Mesh.js @@ -1,4 +1,5 @@ import { Mesh } from 'three'; +import { watch } from 'vue'; import useBindProp from '../use/useBindProp.js'; export default { @@ -38,6 +39,9 @@ export default { this.mesh.castShadow = this.castShadow; this.mesh.receiveShadow = this.receiveShadow; + ['castShadow', 'receiveShadow'].forEach(p => { + watch(() => this[p], () => { this.mesh[p] = this[p]; }); + }); this.scene.add(this.mesh); this.$emit('ready'); diff --git a/src/plugin.js b/src/plugin.js index 11f5977..24f13e2 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -33,8 +33,10 @@ export const TroisJSVuePlugin = { 'InstancedMesh', 'Sprite', + // 'BloomPass', 'BokehPass', 'EffectComposer', + 'FilmPass', 'RenderPass', 'UnrealBloomPass',