While trying to implement LineBasicMaterial in AFrame, I have encountered some issues:
1. Variables are being injected into the schema and cannot be removed without causing errors
I defined a box like this:
<a-box material="shader: linebasic;"></a-box>
Additionally, I registered a custom shader:
AFRAME.registerShader('linebasic', {
schema: {
blending: {default: THREE.NormalBlending},
color: {type: 'color', default: 0xffffff, is: 'uniform'},
depthTest: {default: true},
depthFunc: {default: THREE.LessEqualDepth},
depthWrite: {default: true},
fog: {default: false},
linewidth: {default: 10},
linecap: {default: 'round'},
linejoin: {default: 'round'},
needsUpdate: {default: true},
opacity: {default: 1},
side: {default: THREE.FrontSide},
transparent: {default: true},
vertexColors: {default: THREE.NoColors},
visible: {default: true}
},
init: function (data) {
console.log(data);
delete data.flatShading;
this.material = new THREE.LineBasicMaterial(data);
this.update(data);
},
update: function (data) {
this.material.clone(data);
}
});
Despite not having certain properties specified, such as flatShading or shader, they are still present in the data which causes errors. To resolve this, I had to manually remove them.
If I attempt to delete the 'shader' property, an error is thrown stating:
components:material:error Unknown shader schema undefined +0ms
If I keep the 'shader' property, a notice message appears saying:
THREE.LineBasicMaterial: 'shader' is not a property of this material.
It seems that something is amiss either way.
UPDATE of #1:
To address issue #1, I followed @ngokevin's suggestion:
AFRAME.registerShader('linebasic', {
schema: {
blending: {default: THREE.NormalBlending},
color: {type: 'color', default: 0xffffff, is: 'uniform'},
depthTest: {default: true},
depthFunc: {default: THREE.LessEqualDepth},
depthWrite: {default: true},
fog: {default: false},
linewidth: {default: 10},
linecap: {default: 'round'},
linejoin: {default: 'round'},
needsUpdate: {default: true},
opacity: {default: 1},
side: {default: THREE.FrontSide},
transparent: {default: true},
vertexColors: {default: THREE.NoColors},
visible: {default: true}
},
init: function (data) {
data = AFRAME.utils.extend({}, data);
delete data.flatShading;
delete data.shader;
this.material = new THREE.LineBasicMaterial(data);
this.update(data);
},
update: function (data) {
this.material.clone(data);
}
});
2. LineBasicMaterial renders as a solid white block
Even with all the required properties set for THREE.LineBasicMaterial, I'm facing an issue where the material displays as a solid block instead of lines.
Solution is elusive since neither Material nor LineBasicMaterial contain 'wireframe'. This leaves me uncertain about how to proceed without resorting to unconventional methods.
Fixing issue #2 takes precedence for me currently, but resolving #1 is also important as I believe they might be interlinked, hence posing both questions together.