
AFRAME.registerComponent('pen-wireframe-material', {
	init: function () {

		var baseColor = new THREE.TextureLoader().load('./images/pen_mat_baseColor.png');
		baseColor.flipY = false;

		this.wireframeMaterial = new THREE.MeshStandardMaterial({
			map: baseColor,
			wireframe: true,
			transparent: true,
		});

		this.wireframeMaterial.needsUpdate = true;

		// Wait for model to load.
		this.el.addEventListener('model-loaded', () => {
			// Grab the mesh / scene.
			const obj = this.el.getObject3D('mesh');
			// Go over the submeshes and modify materials we want.
			obj.traverse(node => {
				if (node.isMesh) {
					node.material = this.wireframeMaterial;
				}
			});
		});
	}
});