diff --git a/src/materials/Material.js b/src/materials/Material.js index fd584fa..20e556e 100644 --- a/src/materials/Material.js +++ b/src/materials/Material.js @@ -1,11 +1,41 @@ +import { FrontSide } from 'three'; + export default { inject: ['three'], props: { id: String, color: { - type: String, + type: [String, Number], default: '#ffffff', }, + depthTest: { + type: Boolean, + default: true, + }, + depthWrite: { + type: Boolean, + default: true, + }, + fog: { + type: Boolean, + default: false, + }, + opacity: { + type: Number, + default: 1, + }, + side: { + type: Number, + default: FrontSide, + }, + transparent: { + type: Boolean, + default: false, + }, + vertexColors: { + type: Boolean, + default: false, + }, }, mounted() { this.three.materials[this.id] = this.material; @@ -13,6 +43,15 @@ export default { unmounted() { this.material.dispose(); }, + methods: { + propsValues() { + const props = {}; + for (const [key, value] of Object.entries(this.$props)) { + if (key !== 'id') props[key] = value; + } + return props; + }, + }, render() { return []; }, diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js index c7b942d..bd382d8 100644 --- a/src/materials/StandardMaterial.js +++ b/src/materials/StandardMaterial.js @@ -3,9 +3,25 @@ import Material from './Material'; export default { extends: Material, + props: { + emissive: { + type: [Number, String], + default: 0, + }, + emissiveIntensity: { + type: Number, + default: 1, + }, + metalness: { + type: Number, + default: 0, + }, + roughness: { + type: Number, + default: 1, + }, + }, created() { - this.material = new MeshStandardMaterial({ - color: this.color, - }); + this.material = new MeshStandardMaterial(this.propsValues()); }, };