wip

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

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,

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);

src/effects/BokehPass.js

@@ -46,4 +46,5 @@ export default {
     this.passes.push(pass);
     this.pass = pass;
   },
+  __hmrId: 'BokehPass',
 };

src/effects/EffectComposer.js

@@ -24,4 +24,5 @@ export default {
   render() {
     return this.$slots.default();
   },
+  __hmrId: 'EffectComposer',
 };

src/effects/EffectPass.js

@@ -8,4 +8,5 @@ export default {
   render() {
     return [];
   },
+  __hmrId: 'EffectPass',
 };

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',
+};

src/effects/RenderPass.js

@@ -14,4 +14,5 @@ export default {
     this.passes.push(pass);
     this.pass = pass;
   },
+  __hmrId: 'RenderPass',
 };

src/effects/UnrealBloomPass.js

@@ -35,4 +35,5 @@ export default {
     this.passes.push(pass);
     this.pass = pass;
   },
+  __hmrId: 'UnrealBloomPass',
 };

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() {

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');

src/plugin.js

@@ -33,8 +33,10 @@ export const TroisJSVuePlugin = {
       'InstancedMesh',
       'Sprite',
 
+      // 'BloomPass',
       'BokehPass',
       'EffectComposer',
+      'FilmPass',
       'RenderPass',
       'UnrealBloomPass',