diff --git a/README.md b/README.md index 9a3f08c..01f830d 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,10 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects - [x] Material : color, depthTest, depthWrite, fog, opacity, transparent - [x] StandardMaterial : emissive, emissiveIntensity, metalness, roughness - [x] Mesh : position, rotation, scale, castShadow, receiveShadow + - [x] Box (geometry replace) : size, width, height, depth + - [x] Plane (geometry replace) : width, height, widthSegments, heightSegments + - [x] Sphere (geometry replace) : radius, widthSegments, heightSegments + - [x] Text (geometry replace) : all props except fontSrc (wip) - [ ] ... ## Features diff --git a/src/effects/index.js b/src/effects/index.js index a9dfc1d..e29909f 100644 --- a/src/effects/index.js +++ b/src/effects/index.js @@ -1,4 +1,5 @@ export { default as EffectComposer } from './EffectComposer.js'; export { default as RenderPass } from './RenderPass.js'; export { default as BokehPass } from './BokehPass.js'; +export { default as FilmPass } from './FilmPass.js'; export { default as UnrealBloomPass } from './UnrealBloomPass.js'; diff --git a/src/meshes/Box.js b/src/meshes/Box.js index 8bc0f78..387c8c1 100644 --- a/src/meshes/Box.js +++ b/src/meshes/Box.js @@ -20,12 +20,23 @@ export default { default: 1, }, }, + watch: { + size() { this.refreshGeometry(); }, + width() { this.refreshGeometry(); }, + height() { this.refreshGeometry(); }, + depth() { this.refreshGeometry(); }, + }, created() { - if (this.size) { - this.geometry = new BoxBufferGeometry(this.size, this.size, this.size); - } else { - this.geometry = new BoxBufferGeometry(this.width, this.height, this.depth); - } + this.createGeometry(); + }, + methods: { + createGeometry() { + if (this.size) { + this.geometry = new BoxBufferGeometry(this.size, this.size, this.size); + } else { + this.geometry = new BoxBufferGeometry(this.width, this.height, this.depth); + } + }, }, __hmrId: 'Box', }; diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js index e218e09..95e1d4a 100644 --- a/src/meshes/Mesh.js +++ b/src/meshes/Mesh.js @@ -46,6 +46,12 @@ export default { this.scene.add(this.mesh); this.$emit('ready'); }, + refreshGeometry() { + const oldGeo = this.geometry; + this.createGeometry(); + this.mesh.geometry = this.geometry; + oldGeo.dispose(); + }, }, render() { return []; diff --git a/src/meshes/Plane.js b/src/meshes/Plane.js index 658b63a..c7ebaf6 100644 --- a/src/meshes/Plane.js +++ b/src/meshes/Plane.js @@ -21,8 +21,19 @@ export default { default: 1, }, }, + watch: { + width() { this.refreshGeometry(); }, + height() { this.refreshGeometry(); }, + widthSegments() { this.refreshGeometry(); }, + heightSegments() { this.refreshGeometry(); }, + }, created() { - this.geometry = new PlaneBufferGeometry(this.width, this.height, this.widthSegments, this.heightSegments); + this.createGeometry(); + }, + methods: { + createGeometry() { + this.geometry = new PlaneBufferGeometry(this.width, this.height, this.widthSegments, this.heightSegments); + }, }, __hmrId: 'Plane', }; diff --git a/src/meshes/Sphere.js b/src/meshes/Sphere.js index 8e288fc..2d80ec9 100644 --- a/src/meshes/Sphere.js +++ b/src/meshes/Sphere.js @@ -14,8 +14,18 @@ export default { default: 12, }, }, + watch: { + radius() { this.refreshGeometry(); }, + widthSegments() { this.refreshGeometry(); }, + heightSegments() { this.refreshGeometry(); }, + }, created() { - this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments); + this.createGeometry(); + }, + methods: { + createGeometry() { + this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments); + }, }, __hmrId: 'Sphere', }; diff --git a/src/meshes/Sprite.js b/src/meshes/Sprite.js index 6b4f6d7..f17d757 100644 --- a/src/meshes/Sprite.js +++ b/src/meshes/Sprite.js @@ -31,7 +31,6 @@ export default { this.$emit('loaded'); }, updateUV() { - // console.log(this.texture); this.iWidth = this.texture.image.width; this.iHeight = this.texture.image.height; this.iRatio = this.iWidth / this.iHeight; diff --git a/src/meshes/Text.js b/src/meshes/Text.js index 3a5611b..5994f08 100644 --- a/src/meshes/Text.js +++ b/src/meshes/Text.js @@ -1,5 +1,6 @@ import { FontLoader, TextBufferGeometry } from 'three'; import Mesh from './Mesh.js'; +import { watch } from 'vue'; export default { extends: Mesh, @@ -18,11 +19,29 @@ export default { align: { type: [Boolean, String], default: false }, }, created() { + // add watchers + const watchProps = [ + 'text', 'size', 'height', 'curveSegments', + 'bevelEnabled', 'bevelThickness', 'bevelSize', 'bevelOffset', 'bevelSegments', + 'align', + ]; + watchProps.forEach(p => { + watch(() => this[p], () => { + if (this.font) this.refreshGeometry(); + }); + }); + const loader = new FontLoader(); loader.load(this.fontSrc, (font) => { this.font = font; + this.createGeometry(); + this.initMesh(); + }); + }, + methods: { + createGeometry() { this.geometry = new TextBufferGeometry(this.text, { - font, + font: this.font, size: this.size, height: this.height, depth: this.depth, @@ -37,8 +56,6 @@ export default { if (this.align === 'center') { this.geometry.center(); } - - this.initMesh(); - }); + }, }, };