Custom enter-vr button

package-lock.json

@@ -204,6 +204,11 @@
         "uri-js": "^4.2.1"
       }
     },
+    "ajv-errors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz",
+      "integrity": "sha1-7PAh+hCP0X37Xms4Py3SM+Mf/Fk="
+    },
     "ajv-keywords": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
@@ -9958,6 +9963,27 @@
       "resolved": "https://registry.npmjs.org/style-attr/-/style-attr-1.3.0.tgz",
       "integrity": "sha512-srFr54gzEZoy73WgYfnbxCAtNCzF0Hn5RGzK7gi/0G6ttZd9v3WZFGY4ed5ABr43dbGjPNr4T46geUxxUP9i6w=="
     },
+    "style-loader": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
+      "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "superagent": {
       "version": "3.8.3",
       "resolved": "https://registry.npmjs.org/superagent/-/superagent-3.8.3.tgz",
@@ -10519,6 +10545,33 @@
         }
       }
     },
+    "url-loader": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.2.tgz",
+      "integrity": "sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg==",
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "mime": "^2.0.3",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz",
+          "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg=="
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "url-parse": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.1.tgz",

package.json

@@ -39,6 +39,8 @@
     "postcss-loader": "^2.0.9",
     "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony",
     "uglifyjs-webpack-plugin": "0.4.6",
+    "url-loader": "^1.1.2",
+    "style-loader": "^0.23.1",
     "webpack": "2.3.3",
     "webpack-glsl-loader": "^1.0.1",
     "webpack-sources": "1.0.1"

src/index.html

@@ -33,7 +33,8 @@
       proxy-event__cleargame1="event: pausemenuexit; as: cleargame; to: a-scene"
       proxy-event__cleargame2="event: pausemenurestart; as: cleargame; to: a-scene"
       search
-      fog="color: #a00; density: 0.035; type: exponential">
+      fog="color: #a00; density: 0.035; type: exponential"
+      vr-mode-ui="enterVRButton: #vrButton">
       <a-assets timeout="10000">
         <a-asset-item id="arrowObj" src="assets/models/arrow.obj"></a-asset-item>
         <a-asset-item id="backglowObj" src="assets/models/backglow.obj"></a-asset-item>
@@ -200,5 +201,6 @@
         <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"></a-entity>
       {% endif %}
     </a-scene>
+    <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
   </body>
 </html>

src/index.js

@@ -17,3 +17,5 @@ require('aframe-thumb-controls-component');
 
 requireAll(require.context('./components/', true, /\.js$/));
 requireAll(require.context('./state/', true, /\.js$/));
+
+require('./style.css');

src/style.css

@@ -0,0 +1,24 @@
+#vrButton {
+  position: absolute;
+  background: url(../assets/img/enter-vr-button-background.png) no-repeat;
+  background-size: cover;
+  border: 0;
+  cursor: pointer;
+  right: 20px;
+  bottom: 20px;
+  z-index: 9999999;
+  width: 84px;
+  height: 47px;
+}
+
+#vrButton.a-hidden {
+  visibility: hidden;
+}
+
+#vrButton:active {
+  border: 0;
+}
+
+#vrButton:hover {
+  background-position: 0 -50.5px;
+}

webpack.config.js

@@ -92,6 +92,15 @@ module.exports = {
         exclude: /(node_modules)/,
         loader: 'webpack-glsl-loader',
       },
+      {
+        test: /\.css$/,
+        exclude: /(node_modules)/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(png|jpg)/,
+        loader: 'url-loader',
+      }
     ],
   },
   resolve: {