Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

improve material hmr

Browse Source
This commit is contained in:
Kevin Levron 2020-09-19 18:06:09 +02:00
parent 0a0e495e2c
commit 9250eca910
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -21,9 +21,9 @@ I will try to rewrite some of my [WebGL demos](https://codepen.io/collection/AGZ
Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects when you update a template**. This means the result in your browser will be automatically updated without reloading all the stuff. **This is really helpful when you are creating a TroisJS Scene**. Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects when you update a template**. This means the result in your browser will be automatically updated without reloading all the stuff. **This is really helpful when you are creating a TroisJS Scene**.
- [ ] HMR - [ ] HMR
- [x] Camera : position - [x] PerspectiveCamera : aspect, far, fov, near, position
- [x] Light : position - [x] Light : position
- [x] Material : color - [x] Material : color, depthTest, depthWrite, fog, opacity, transparent
- [x] Mesh : position, rotation, scale - [x] Mesh : position, rotation, scale
- [ ] ... - [ ] ...

11
src/materials/Material.js
View File

@ -19,7 +19,7 @@ export default {
}, },
fog: { fog: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
opacity: { opacity: {
type: Number, type: Number,
@ -40,8 +40,15 @@ export default {
}, },
mounted() { mounted() {
this.three.materials[this.id] = this.material; this.three.materials[this.id] = this.material;
watch(() => this.color, () => {
['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'transparent'].forEach(p => {
watch(() => this[p], () => {
if (p === 'color') {
this.material.color = new Color(this.color); this.material.color = new Color(this.color);
} else {
this.material[p] = this[p];
}
});
}); });
}, },
unmounted() { unmounted() {