Merge pull request #13 from AltspaceVR/feature/fullspace

Fullspace and cursor colliders in aframe
AltspaceVR · Nov 23, 2016 · aca1524 · aca1524
2 parents 01042ad + 6b6b897
commit aca1524
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ Note that when running in Altspace, the scene will not be synchronized between u
 | `usePixelScale` | Treat a unit as a CSS Pixel, and have your scene scale with the scale of the AltspaceVR web browser. This is the default behavior in AltspaceVR for three.js apps. In A-Frame, however, the default value is `false`, as units are in meters by default. | `false`
 | `verticalAlign` | Puts the scene origin at the bottom, middle, or top of the Altspace enclosure.  If your scene seems to be floating in midair, try setting this to 'bottom'. | `middle`
 | `enclosuresOnly` | Turn off 3d rendering when loaded in flat displays (e.g. personal browsers) | `true`
+| `fullspace` | Request that the app take up the entire space. See [requestFullspace()](http://altspacevr.github.io/AltspaceSDK/doc/module-altspace-Enclosure.html#requestFullspace) | `false`
 
 ### Usage
 
@@ -50,3 +51,19 @@ Add the "altspace-tracked-controls" attribute to your tracked entity. For exampl
 ```html
 <a-entity hand-controls="right" altspace-tracked-controls></a-entity>
 ```
+
+## altspace-cursor-collider
+
+Cause the attached object to be clickable, or else ignored by the cursor.
+
+### Properties
+
+| Property | Description | Default Value |
+| -------- | ----------- | ------------- |
+| `enabled` | Sets the object visibility to the cursor. | `true`
+
+### Example
+
+```html
+<a-box altspace-cursor-collider='enabled: false'></a-box>
+```
diff --git a/dist/aframe-altspace-component.js b/dist/aframe-altspace-component.js
@@ -62,7 +62,8 @@
 	  schema: {
 	    usePixelScale: { type: 'boolean', default: 'false'},
 	    verticalAlign: { type: 'string',  default: 'middle'},
-	    enclosuresOnly:{ type: 'boolean', default: 'true'}
+	    enclosuresOnly:{ type: 'boolean', default: 'true'},
+	    fullspace:     { type: 'boolean', default: 'false'}
 	  },
 
 	  /**
@@ -124,6 +125,10 @@
 	    var scene = this.el.object3D;
 	    altspace.getEnclosure().then(function(e)
 	    {
+	      if(this.data.fullspace){
+	        e.requestFullspace();
+	      }
+
 	      if (!this.data.usePixelScale){
 	        scene.scale.multiplyScalar(e.pixelsPerMeter);
 	      }
@@ -250,6 +255,33 @@
 	  }
 	});
 
+	(function(){
+
+	  function setColliderFlag(obj, state) {
+	    obj.userData.altspace = {collider: {enabled: state}};
+	    obj.traverse(function (obj) {
+	      if (obj instanceof THREE.Mesh) {
+	        obj.userData.altspace = {collider: {enabled: state}};
+	      }
+	    })
+	  }
+
+	  AFRAME.registerComponent('altspace-cursor-collider', {
+	    schema: { enabled: { default: true } },
+	    init: function () {
+	      setColliderFlag(this.el.object3D, this.data.enabled);
+	      this.el.addEventListener('model-loaded', (function(){
+	        setColliderFlag(this.el.object3D, this.data.enabled);
+	      }).bind(this));
+	    },
+	    update: function () {
+	      setColliderFlag(this.el.object3D, this.data.enabled);
+	    }
+	  });
+
+	})();
+
+
 
 /***/ }
 /******/ ]);
diff --git a/dist/aframe-altspace-component.min.js b/dist/aframe-altspace-component.min.js
diff --git a/examples/test-fullspace/index.html b/examples/test-fullspace/index.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>A-Frame Altspace Component - Basic</title>
+    <script src="../build.js"></script>
+  </head>
+  <body>
+    <a-scene altspace='fullspace: true'>
+      <!-- cube size will be 1 meter in AltspaceVR -->
+      <a-box color="#C03546" position='0 0 0'></a-box>
+    </a-scene>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -16,7 +16,8 @@ AFRAME.registerComponent('altspace', {
   schema: {
     usePixelScale: { type: 'boolean', default: 'false'},
     verticalAlign: { type: 'string',  default: 'middle'},
-    enclosuresOnly:{ type: 'boolean', default: 'true'}
+    enclosuresOnly:{ type: 'boolean', default: 'true'},
+    fullspace:     { type: 'boolean', default: 'false'}
   },
 
   /**
@@ -78,6 +79,10 @@ AFRAME.registerComponent('altspace', {
     var scene = this.el.object3D;
     altspace.getEnclosure().then(function(e)
     {
+      if(this.data.fullspace){
+        e.requestFullspace();
+      }
+
       if (!this.data.usePixelScale){
         scene.scale.multiplyScalar(e.pixelsPerMeter);
       }
@@ -203,3 +208,30 @@ AFRAME.registerComponent('altspace-tracked-controls', {
       }
   }
 });
+
+(function(){
+
+  function setColliderFlag(obj, state) {
+    obj.userData.altspace = {collider: {enabled: state}};
+    obj.traverse(function (obj) {
+      if (obj instanceof THREE.Mesh) {
+        obj.userData.altspace = {collider: {enabled: state}};
+      }
+    })
+  }
+
+  AFRAME.registerComponent('altspace-cursor-collider', {
+    schema: { enabled: { default: true } },
+    init: function () {
+      setColliderFlag(this.el.object3D, this.data.enabled);
+      this.el.addEventListener('model-loaded', (function(){
+        setColliderFlag(this.el.object3D, this.data.enabled);
+      }).bind(this));
+    },
+    update: function () {
+      setColliderFlag(this.el.object3D, this.data.enabled);
+    }
+  });
+
+})();
+