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

materials refactoring

Browse Source
This commit is contained in:
Kevin Levron 2020-10-03 12:34:14 +02:00
parent 13de74ec35
commit a66d4816b2
8 changed files with 82 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/materials/BasicMaterial.js
View File

@ -4,9 +4,10 @@ import Material from './Material';
export default {
extends: Material,
setup(props) {
const material = new MeshBasicMaterial(propsValues(props, ['id']));
return { material };
methods: {
createMaterial() {
this.material = new MeshBasicMaterial(propsValues(this.$props, ['id']));
},
},
__hmrId: 'BasicMaterial',
};

7
src/materials/LambertMaterial.js
View File

@ -4,9 +4,10 @@ import Material from './Material';
export default {
extends: Material,
setup(props) {
const material = new MeshLambertMaterial(propsValues(props, ['id']));
return { material };
methods: {
createMaterial() {
this.material = new MeshLambertMaterial(propsValues(this.$props, ['id']));
},
},
__hmrId: 'LambertMaterial',
};

26
src/materials/Material.js
View File

@ -15,24 +15,32 @@ export default {
transparent: Boolean,
vertexColors: Boolean,
},
created() {
beforeMount() {
this.createMaterial();
if (this.id) this.three.materials[this.id] = this.material;
if (this.mesh) this.mesh.material = this.material;
// won't work for flatShading
['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'transparent'].forEach(p => {
this.mesh.setMaterial(this.material);
},
mounted() {
this._addWatchers();
if (this.addWatchers) this.addWatchers();
},
unmounted() {
this.material.dispose();
if (this.id) delete this.three.materials[this.id];
},
methods: {
_addWatchers() {
// don't work for flatShading
['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(p => {
watch(() => this[p], () => {
if (p === 'color') {
this.material.color = new Color(this.color);
this.material.color.set(this.color);
} else {
this.material[p] = this[p];
}
});
});
},
unmounted() {
this.material.dispose();
delete this.three.materials[this.id];
},
render() {
return [];

7
src/materials/PhongMaterial.js
View File

@ -4,9 +4,10 @@ import Material from './Material';
export default {
extends: Material,
setup(props) {
const material = new MeshPhongMaterial(propsValues(props, ['id']));
return { material };
methods: {
createMaterial() {
this.material = new MeshPhongMaterial(propsValues(this.$props, ['id']));
},
},
__hmrId: 'PhongMaterial',
};

19
src/materials/PhysicalMaterial.js
View File

@ -1,22 +1,13 @@
import { Color, MeshPhysicalMaterial } from 'three';
import { watch } from 'vue';
import { MeshPhysicalMaterial } from 'three';
import { propsValues } from '../tools.js';
import StandardMaterial from './StandardMaterial';
export default {
extends: StandardMaterial,
setup(props) {
const material = new MeshPhysicalMaterial(propsValues(props, ['id']));
['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => {
watch(() => props[p], (value) => {
if (p === 'emissive') {
material.emissive = new Color(value);
} else {
material[p] = value;
}
});
});
return { material };
methods: {
createMaterial() {
this.material = new MeshPhysicalMaterial(propsValues(this.$props, ['id']));
},
},
__hmrId: 'PhysicalMaterial',
};

13
src/materials/ShaderMaterial.js
View File

@ -1,19 +1,22 @@
import { ShaderMaterial } from 'three';
export default {
inject: ['three'],
inject: ['three', 'mesh'],
props: {
id: String,
uniforms: Object,
vertexShader: String,
fragmentShader: String,
},
beforeMount() {
this.createMaterial();
if (this.id) this.three.materials[this.id] = this.material;
this.mesh.setMaterial(this.material);
},
mounted() {
this.three.materials[this.id] = this.material;
if (this.addWatchers) this.addWatchers();
},
unmounted() {
this.material.dispose();
delete this.three.materials[this.id];
if (this.id) delete this.three.materials[this.id];
},
render() {
return [];

15
src/materials/StandardMaterial.js
View File

@ -11,18 +11,21 @@ export default {
metalness: { type: Number, default: 0 },
roughness: { type: Number, default: 1 },
},
setup(props) {
const material = new MeshStandardMaterial(propsValues(props, ['id']));
methods: {
createMaterial() {
this.material = new MeshStandardMaterial(propsValues(this.$props, ['id']));
},
addWatchers() {
['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => {
watch(() => props[p], (value) => {
watch(() => this[p], (value) => {
if (p === 'emissive') {
material.emissive = new Color(value);
this.material.emissive = new Color(value);
} else {
material[p] = value;
this.material[p] = value;
}
});
});
return { material };
},
},
__hmrId: 'StandardMaterial',
};

12
src/materials/SubSurfaceMaterial.js
View File

@ -1,6 +1,6 @@
import { Color, ShaderMaterial as TShaderMaterial, UniformsUtils } from 'three';
import SubsurfaceScatteringShader from './SubsurfaceScatteringShader.js';
import ShaderMaterial from './ShaderMaterial.js';
import ShaderMaterial from './ShaderMaterial';
export default {
extends: ShaderMaterial,
@ -16,10 +16,11 @@ export default {
opacity: { type: Number, default: 1 },
vertexColors: { type: Boolean, default: false },
},
setup(props) {
methods: {
createMaterial() {
const params = SubsurfaceScatteringShader;
const uniforms = UniformsUtils.clone(params.uniforms);
Object.entries(props).forEach(([key, value]) => {
Object.entries(this.$props).forEach(([key, value]) => {
if (key === 'diffuse' || key === 'thicknessColor') {
value = new Color(value);
}
@ -28,15 +29,14 @@ export default {
}
});
const material = new TShaderMaterial({
this.material = new TShaderMaterial({
...params,
uniforms,
lights: true,
transparent: this.transparent,
vertexColors: this.vertexColors,
});
return { material };
},
},
__hmrId: 'SubSurfaceMaterial',
};