juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix material system not working on dom to load

Browse Source
This commit is contained in:
Kevin Ngo
2018-12-09 03:51:44 -08:00
parent 409b69853b
commit ddf2f2bbb0
1 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/materials.js
View File

@@ -1,15 +1,25 @@
const stageNormalShaders = require('../../assets/shaders/stageNormal.js');
const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js');
const flatShaders = require('../../assets/shaders/flat.js');
const COLORS = require('../constants/colors.js'); const COLORS = require('../constants/colors.js');
const flatShaders = require('../../assets/shaders/flat.js');
const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js');
const stageNormalShaders = require('../../assets/shaders/stageNormal.js');
AFRAME.registerSystem('materials', { AFRAME.registerSystem('materials', {
init: function () { init: function () {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', this.createMaterials.bind(this));
} else {
this.createMaterials();
}
},
createMaterials: function () {
this.stageNormal = new THREE.ShaderMaterial({ this.stageNormal = new THREE.ShaderMaterial({
uniforms: { uniforms: {
skyColor: {value: new THREE.Color(COLORS.SKY_BLUE)}, skyColor: {value: new THREE.Color(COLORS.SKY_BLUE)},
backglowColor: {value: new THREE.Color(COLORS.BG_BLUE)}, backglowColor: {value: new THREE.Color(COLORS.BG_BLUE)},
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)}, src: {
value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)
},
}, },
vertexShader: stageNormalShaders.vertexShader, vertexShader: stageNormalShaders.vertexShader,
fragmentShader: stageNormalShaders.fragmentShader, fragmentShader: stageNormalShaders.fragmentShader,
@@ -24,7 +34,9 @@ AFRAME.registerSystem('materials', {
leftLaser: {value: new THREE.Color(COLORS.NEON_BLUE)}, leftLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
rightLaser: {value: new THREE.Color(COLORS.NEON_BLUE)}, rightLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
textGlow: {value: new THREE.Color(COLORS.TEXT_OFF)}, textGlow: {value: new THREE.Color(COLORS.TEXT_OFF)},
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)}, src: {
value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)
},
}, },
vertexShader: stageAdditiveShaders.vertexShader, vertexShader: stageAdditiveShaders.vertexShader,
fragmentShader: stageAdditiveShaders.fragmentShader, fragmentShader: stageAdditiveShaders.fragmentShader,
@@ -35,7 +47,9 @@ AFRAME.registerSystem('materials', {
this.logo = new THREE.ShaderMaterial({ this.logo = new THREE.ShaderMaterial({
uniforms: { uniforms: {
src: {value: new THREE.TextureLoader().load(document.getElementById('logotexImg').src)}, src: {
value: new THREE.TextureLoader().load(document.getElementById('logotexImg').src)
},
}, },
vertexShader: flatShaders.vertexShader, vertexShader: flatShaders.vertexShader,
fragmentShader: flatShaders.fragmentShader, fragmentShader: flatShaders.fragmentShader,
@@ -46,7 +60,9 @@ AFRAME.registerSystem('materials', {
this.logoadditive = new THREE.ShaderMaterial({ this.logoadditive = new THREE.ShaderMaterial({
uniforms: { uniforms: {
src: {value: new THREE.TextureLoader().load(document.getElementById('logotexImg').src)}, src: {
value: new THREE.TextureLoader().load(document.getElementById('logotexImg').src)
},
}, },
vertexShader: flatShaders.vertexShader, vertexShader: flatShaders.vertexShader,
fragmentShader: flatShaders.fragmentShader, fragmentShader: flatShaders.fragmentShader,
@@ -82,14 +98,15 @@ AFRAME.registerComponent('materials', {
}, },
update: function () { update: function () {
if (this.data.name === "") return; if (this.data.name === '') { return; }
var mesh;
var material = this.system[this.data.name]; const material = this.system[this.data.name];
if (!material) { if (!material) {
console.warn(`undefined material "${this.system[this.data.name]}"`); console.warn(`undefined material "${this.system[this.data.name]}"`);
return; return;
} }
mesh = this.el.getObject3D('mesh');
const mesh = this.el.getObject3D('mesh');
if (!mesh) { if (!mesh) {
this.el.addEventListener('model-loaded', this.applyMaterial.bind(this)); this.el.addEventListener('model-loaded', this.applyMaterial.bind(this));
} else { } else {
@@ -98,7 +115,7 @@ AFRAME.registerComponent('materials', {
}, },
applyMaterial: function (obj) { applyMaterial: function (obj) {
var material = this.system[this.data.name]; const material = this.system[this.data.name];
if (obj['detail']) { obj = obj.detail.model; } if (obj['detail']) { obj = obj.detail.model; }
if (this.data.recursive) { if (this.data.recursive) {
obj.traverse(o => { obj.traverse(o => {