Merge pull request #547 from engaging-computing/dev

Grid Hotfix

src/components/structural/View.js

@@ -354,7 +354,7 @@ class View extends Component {
         if (this.props.sceneConfig.settings.showCoordHelper) {
             return (
                 <Fragment>
-                    <a-grid height="53.33" width="53.33" position="-0.5 -0.26 -0.5" scale="1.5 1.5 1.5" material="shader:flat;"/>
+                    <a-grid height="53.33" width="53.33" position="-0.5 -0.26 -0.5" scale="1.5 1.5 1.5" material="shader:flat;" gridmaterial/>
                     <a-tube path="-35 -0.2 0, 35 -0.2 0" radius="0.05" material="color: red; shader:flat;"></a-tube>
                     <a-tube path="0 -0.2 -35, 0 -0.2 35" radius="0.05" material="color: blue; shader:flat;"></a-tube>
                     <a-tube path="0 -35 0, 0 35 0" radius="0.05" material="color: green; shader:flat;"></a-tube>

src/utils/AFramePhysics.js

@@ -32,6 +32,24 @@ AFRAME.registerComponent("force-pushable", {
 /**
  * @summary This sets the side where the shadow should be cast on entity
  */
+AFRAME.registerComponent("gridmaterial",{
+    schema:{
+        default:""
+    },
+    init: function(){
+        const texture = new THREE.TextureLoader().load("/img/grid_alpha_0.png");
+        texture.repeat = new THREE.Vector2(75,75);
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.RepeatWrapping;
+
+        this.el.getObject3D("mesh").material = new THREE.MeshBasicMaterial({
+            map: texture,
+            transparent: true
+        });
+    }
+});
+
+//This sets the side where the shadow should be rendered
 AFRAME.registerComponent("shadowcustomsetting", {
     schema:{
         default:""
@@ -56,7 +74,6 @@ AFRAME.registerComponent("shadowcustomsetting", {
     },
 });
 
-
 /**
  * @summary  Calculate and sets the rotation of the entity based on 2 points
  *              This is use for the light indicator that has the property of lighttarget (directional and spot light)