THIS IS VR-COMPONENTS

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+build
+gh-pages/
+karma.conf.js
+node_modules
+npm-debug.log

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright © 2015 MozVR.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,34 @@
+# vr-components
+
+VR components bundled with a copy of vr-markup.
+
+
+## Usage
+
+### Codepen
+
+If you want to get hacking immediately, just fire up [__this Codepen example scene__](http://codepen.io/mozvr/pen/zvqGqO?editors=100)!
+
+
+
+### Downloads
+
+If you would like to embed this library in your project, simply include this single file:
+
+* [`vr-components.min.js`](https://mozvr.github.io/vr-components/dist/vr-components.min.js)
+
+Or if you'd prefer unminified files for local development (with source maps):
+
+* [`vr-components.js`](https://mozvr.github.io/vr-components/dist/vr-components.js)
+
+__Also, be sure to check out the awesome [examples](https://mozvr.github.io/vr-components/examples/).__
+
+### npm
+
+First install from npm:
+
+    npm install vr-components
+
+And in your Browserify/Webpack modules, simply require the module:
+
+    require('vr-components')

core/index.js

@@ -0,0 +1,18 @@
+module.exports = {
+  'vr-audio': require('./vr-audio'),
+  'vr-cube': require('./vr-cube'),
+  'vr-curvedPlane1': require('./vr-curvedPlane1'),
+  'vr-curvedPlane2': require('./vr-curvedPlane2'),
+  'vr-cylinder': require('./vr-cylinder'),
+  'vr-grid': require('./vr-grid'),
+  'vr-hemispherelight': require('./vr-hemispherelight'),
+  'vr-image': require('./vr-image'),
+  'vr-model': require('./vr-model'),
+  'vr-obj-loader': require('./vr-obj-loader'),
+  'vr-plane': require('./vr-plane'),
+  'vr-skybox': require('./vr-skybox'),
+  'vr-skysphere': require('./vr-skysphere'),
+  'vr-sphere': require('./vr-sphere'),
+  'vr-video': require('./vr-video'),
+  'vr-video360': require('./vr-video360')
+};

core/vr-audio.js

@@ -0,0 +1,35 @@
+var VRMarkup = require('@mozvr/vr-markup');
+
+var THREE = VRMarkup.THREE;
+var VRObject = VRMarkup.VRObject;
+
+document.registerElement(
+  'vr-audio',
+  {
+    prototype: Object.create(
+      VRObject.prototype, {
+        createdCallback: {
+          value: function () {
+            var listener = new THREE.AudioListener();
+
+            var src = this.getAttribute('src');
+            var volume = parseFloat(this.getAttribute('vol')) || 10;
+            var loop = this.getAttribute('loop') || true;
+            var sound = new THREE.Audio(listener);
+            volume = volume * 10; // We multiple by ten so the user can define volume in more intuitive scale: 0-10.
+            sound.source.start(0, 0);
+
+            if (src) {
+              sound.load(src);
+              sound.setVolume(volume);
+              sound.setLoop(loop);
+              sound.connect();
+            }
+
+            this.object3D = sound;
+            this.load();
+          }
+        }
+      })
+  }
+);

core/vr-cube.js

@@ -0,0 +1,62 @@
+var VRMarkup = require('@mozvr/vr-markup');
+
+var THREE = VRMarkup.THREE;
+var VRObject = VRMarkup.VRObject;
+
+document.registerElement(
+  'vr-cube',
+  {
+    prototype: Object.create(
+      VRObject.prototype, {
+        createdCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D = new THREE.Mesh(geometry, material);
+            this.load();
+          }
+        },
+
+        attributeChangedCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D.geometry = geometry;
+            this.object3D.material = material;
+          }
+        },
+
+        getGeometry: {
+          value: function () {
+            var width = parseFloat(this.getAttribute('width')) || 5;
+            var height = parseFloat(this.getAttribute('height')) || 5;
+            var depth = parseFloat(this.getAttribute('depth')) || 5;
+            return new THREE.BoxGeometry(width, height, depth);
+          }
+        },
+
+        getMaterial: {
+          value: function () {
+            var color = this.getAttribute('color');
+            var materialId = this.getAttribute('material');
+            var materialEl;
+            var material;
+
+            if (materialId) {
+              materialEl = materialId ? document.querySelector('#' + materialId) : {};
+              material = materialEl.material;
+              if (color) {
+                material.color = new THREE.Color(color);
+              }
+            } else if (color) {
+              material = new THREE.MeshPhongMaterial({color: color});
+            } else {
+              material = new THREE.MeshNormalMaterial();
+            }
+
+            return material;
+          }
+        }
+      })
+  }
+);

core/vr-curvedPlane1.js

@@ -0,0 +1,64 @@
+var VRMarkup = require('@mozvr/vr-markup');
+
+var THREE = VRMarkup.THREE;
+var VRObject = VRMarkup.VRObject;
+
+document.registerElement(
+  'vr-curvedPlane1',
+  {
+    prototype: Object.create(
+      VRObject.prototype, {
+        createdCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D = new THREE.Mesh(geometry, material);
+            this.load();
+          }
+        },
+
+        attributeChangedCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D.geometry = geometry;
+            this.object3D.material = material;
+          }
+        },
+
+        getGeometry: {
+          value: function () {
+            var radius = parseFloat(this.getAttribute('radius')) || 10;
+            var width = parseFloat(this.getAttribute('width')) || 4;
+            var height = parseFloat(this.getAttribute('height')) || 1;
+
+            var circumference = 2 * Math.PI * radius;
+            var thetaLength = (Math.PI * 2) * (width / circumference);
+
+            var geometry = new THREE.CylinderGeometry(
+              radius, // radius top
+              radius, // radius bottom
+              height, // height
+              30, // y segments
+              10, // x segments
+              true, // openended
+              0,  // theta start
+              thetaLength
+            );
+
+            geometry.applyMatrix(new THREE.Matrix4().makeScale(1, 1, -1));
+
+            return geometry;
+          }
+        },
+
+        getMaterial: {
+          value: function () {
+            var materialId = this.getAttribute('material');
+            var materialEl = materialId ? document.querySelector('#' + materialId) : {};
+            return (materialEl && materialEl.material) || new THREE.MeshNormalMaterial({color: Math.random() * 0xffffff, opacity: 1.0});
+          }
+        }
+      })
+  }
+);

core/vr-curvedPlane2.js

@@ -0,0 +1,87 @@
+var VRMarkup = require('@mozvr/vr-markup');
+
+var THREE = VRMarkup.THREE;
+var VRObject = VRMarkup.VRObject;
+
+document.registerElement(
+  'vr-curvedPlane2',
+  {
+    prototype: Object.create(
+      VRObject.prototype, {
+        createdCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D = new THREE.Mesh(geometry, material);
+            this.load();
+          }
+        },
+
+        attributeChangedCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D.geometry = geometry;
+            this.object3D.material = material;
+          }
+        },
+
+        getGeometry: {
+          value: function () {
+            var radius = parseFloat(this.getAttribute('radius')) || 10;
+            var height = parseFloat(this.getAttribute('height')) || 5;
+            var thetaStart = parseFloat(this.getAttribute('thetaStart')) || Math.PI;
+            var thetaLength = parseFloat(this.getAttribute('thetaLength')) || 90;
+            var flipNormals = parseFloat(this.getAttribute('flip')) || true;
+
+            var radiusSegments = thetaLength / 2;
+            var heightSegments = 1;
+            var length = thetaLength * Math.PI / 180;
+            var start;
+
+            if (flipNormals) {
+              // Subtracting length from start has effect of enabling designer
+              // to specify left edge position of the band (start), and
+              // extending band rightwards.
+              start = (thetaStart + 180) * Math.PI / 180;
+            } else {
+              start = (thetaStart - thetaLength) * Math.PI / 180;
+            }
+
+            var geometry = new THREE.CylinderGeometry(radius, radius, height, radiusSegments, heightSegments, true, start, length);
+
+            if (flipNormals) {
+              geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
+            }
+
+            // Sets pivot to top of band.
+            geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0 - height / 2, 0));
+
+            return geometry;
+          }
+        },
+
+        getMaterial: {
+          value: function () {
+            var imgSrc = this.getAttribute('tex');
+            var color = this.getAttribute('color');
+            var opacity = parseFloat(this.getAttribute('opacity')) || 1;
+
+            var material = new THREE.MeshBasicMaterial({transparent: true, side: THREE.DoubleSide});
+
+            if (imgSrc) {
+              material.map = THREE.ImageUtils.loadTexture(imgSrc);
+            } else if (color) {
+              material.color = new THREE.Color(color);
+            } else {
+              material.color = new THREE.Color('#CCCCCC');
+            }
+
+            material.opacity = opacity;
+
+            return material;
+          }
+        }
+      })
+  }
+);

core/vr-cylinder.js

@@ -0,0 +1,63 @@
+var VRMarkup = require('@mozvr/vr-markup');
+
+var THREE = VRMarkup.THREE;
+var VRObject = VRMarkup.VRObject;
+
+document.registerElement(
+  'vr-cylinder',
+  {
+    prototype: Object.create(
+      VRObject.prototype, {
+        createdCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D = new THREE.Mesh(geometry, material);
+            this.load();
+          }
+        },
+
+        attributeChangedCallback: {
+          value: function () {
+            var material = this.getMaterial();
+            var geometry = this.getGeometry();
+            this.object3D.geometry = geometry;
+            this.object3D.material = material;
+          }
+        },
+
+        getGeometry: {
+          value: function () {
+            var radius = parseFloat(this.getAttribute('radius') || 5);
+            var height = parseFloat(this.getAttribute('height') || 1);
+            var radiusSegments = parseFloat(this.getAttribute('radiusSegments') || 36);
+            var heightSegments = parseFloat(this.getAttribute('heightSegments') || 10);
+            var openEnded = this.hasAttribute('openended');
+
+            var geometry = new THREE.CylinderGeometry(
+              radius, // radius top
+              radius, // radius bottom
+              height, // height
+              radiusSegments, // y segments
+              heightSegments, // x segments
+              openEnded // openended
+            );
+
+            return geometry;
+          }
+        },
+
+        getMaterial: {
+          value: function () {
+            var color = parseFloat(this.getAttribute('color')) || 0xCC0000;
+            var materialId = this.getAttribute('material');
+            var materialEl = materialId ? document.querySelector('#' + materialId) : undefined;
+            return (materialEl && materialEl.material) || new THREE.MeshNormalMaterial({
+              color: color,
+              opacity: 1.0
+            });
+          }
+        }
+      })
+  }
+);