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 ShaderMaterial

Browse Source
This commit is contained in:
Kevin LEVRON 2021-03-12 22:58:41 +01:00 committed by GitHub
parent f29435f1fa
commit 8dab3a6b74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/materials/ShaderMaterial.js
View File

@ -1,18 +1,23 @@
import { ShaderMaterial } from 'three' import { ShaderMaterial } from 'three';
import { watch } from 'vue'; import { watch } from 'vue';
import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js'; import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js';
export default { export default {
inject: ['three', 'mesh'], inject: ['three', 'mesh'],
props: { props: {
uniforms: { type: Object, default: () => { } }, uniforms: { type: Object, default: () => {} },
vertexShader: { type: String, default: defaultVertexShader }, vertexShader: { type: String, default: defaultVertexShader },
fragmentShader: { type: String, default: defaultFragmentShader }, fragmentShader: { type: String, default: defaultFragmentShader },
}, },
created() { created() {
this.createMaterial(); this.createMaterial();
this.mesh.setMaterial(this.material); ['vertexShader', 'fragmentShader'].forEach(p => {
if (this.addWatchers) this.addWatchers(); watch(() => this[p], () => {
// recreate material if we change either shader
this.material.dispose();
this.createMaterial();
});
});
}, },
unmounted() { unmounted() {
this.material.dispose(); this.material.dispose();
@ -20,22 +25,7 @@ export default {
methods: { methods: {
createMaterial() { createMaterial() {
this.material = new ShaderMaterial(propsValues(this.$props)); this.material = new ShaderMaterial(propsValues(this.$props));
}, this.mesh.setMaterial(this.material);
addWatchers() {
['uniforms', 'vertexShader', 'fragmentShader'].forEach(p => {
watch(() => this[p], (value) => {
this.material[p] = value;
if (p === 'vertexShader' || p === 'fragmentShader') {
// recreate material if we change either shader
this.material.dispose();
this.createMaterial();
}
},
// only watch deep on uniforms
{ deep: p === 'uniforms' }
);
});
}, },
}, },
render() { render() {