Merge pull request #3 from AltspaceVR/feature/use-pixel-units

Replace autoscale parameter with usePixelScale
AltspaceVR · Apr 27, 2016 · 8072af7 · 8072af7
2 parents 1d119be + b17d2ab
commit 8072af7
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,22 +1,19 @@
 ## aframe-altspace-component
 
-Component to make an [A-Frame](https://aframe.io) scene compatible with [AltspaceVR](http://altvr.com). 
-When loading your scene in Altspace, the Altspace Render is used instead of the WebGLRender. 
-Behavior outside of Altspace is not affected.
+Component to make an [A-Frame](https://aframe.io) scene compatible with [AltspaceVR](http://altvr.com). When loading your scene in Altspace, the Altspace Render is used instead of the WebGLRender. Behavior outside of Altspace is not affected.
 
-Note that when running in Altspace, the scene will not respond to cursor events nor be synchronized between users.  
-In addition, some A-Frame features are currently not supported in Altspace, such as lighting and videos.
-For details, see the [Three.js Feature Support](http://github.com/AltspaceVR/AltspaceSDK#threejs-feature-support) 
-section in the [AltspaceSDK](http://github.com/AltspaceVR/AltspaceSDK) repo. 
+Live examples: http://altspacevr.github.io/aframe/examples/ (forked from [aframevr/aframe](https://github.com/aframevr/aframe))
+
+Note that when running in Altspace, the scene will not respond to cursor events nor be synchronized between users.  In addition, the following A-Frame features are currently not supported in Altspace: lights, transparency, and video.  For details, see the [Three.js Feature Support](http://github.com/AltspaceVR/AltspaceSDK#threejs-feature-support) section in the [AltspaceSDK](http://github.com/AltspaceVR/AltspaceSDK) repo. 
 
 ### Properties
 
 | Property  | Description | Default Value |
 | --------  | ----------- | ------------- |
-| autoscale | Scale scene when running in Altspace, so 1 unit is 1 meter in-game. | true |
+| `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`
 
 ### Usage
-Add the "altspace" parameter on your `<a-scene>` like so: `<a-scene altspace="autoscale:true">`
+Add the "altspace" parameter on your `<a-scene>` like so: `<a-scene altspace>`
 
 
 #### Example
@@ -27,15 +24,12 @@ Install and use by directly including the [browser files](dist):
 <head>
   <title>My A-Frame Scene</title>
   <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
-  <script src="https://cdn.rawgit.com/AltspaceVR/aframe-altspace-component/v0.1.0/dist/aframe-altspace-component.min.js"></script>
+  <script src="https://cdn.rawgit.com/AltspaceVR/aframe-altspace-component/v0.2.0/dist/aframe-altspace-component.min.js"></script>
 </head>
 
 <body>
-  <a-scene altspace="autoscale:true">
+  <a-scene altspace>
     <a-entity geometry="primitive: box" material="color: #C03546"></a-entity>
   </a-scene>
 </body>
 ```
-
-- Live examples: http://altspacevr.github.io/aframe/examples/ (view on [Github](https://github.com/AltspaceVR/aframe/tree/altspace-examples))
-- Tips for [Loading A-Frame Examples in AltspaceVR](https://github.com/AltspaceVR/aframe/wiki/Loading-A-Frame-examples-in-AltspaceVR)
diff --git a/dist/aframe-altspace-component.js b/dist/aframe-altspace-component.js
@@ -52,8 +52,12 @@
 	 * aframe-altspace-component component for A-Frame.
 	 */
 	AFRAME.registerComponent('altspace', {
+
+	  /**
+	   * usePixelScale will allow you to use A-Frame units as CSS pixels. This is the default behavior for three.js apps, but not for A-Frame apps.
+	   */
 	  schema: { 
-	    autoscale: { type: 'boolean', default: 'true' }
+	    usePixelScale: { type: 'boolean', default: 'false'}
 	  },
 
 	  /**
@@ -72,13 +76,12 @@
 	    }
 	    if (window.altspace && window.altspace.inClient) {
 	      var scene = this.el.object3D;
-	      if (this.data.autoscale) {
+	      if (!this.data.usePixelScale) {
 	        altspace.getEnclosure().then(function(e) {
-	          console.log('aframe-altspace-component autoscaling scene by', e.pixelsPerMeter);
 	          scene.scale.multiplyScalar(e.pixelsPerMeter);
 	        });
 	      }
-	      var renderer = this.el.renderer =  altspace.getThreeJSRenderer({version: '0.2.0'});
+	      var renderer = this.el.renderer = altspace.getThreeJSRenderer();
 	      var noop = function() {};
 	      renderer.setSize = noop;
 	      renderer.setPixelRatio = noop;

diff --git a/dist/aframe-altspace-component.min.js b/dist/aframe-altspace-component.min.js
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -4,8 +4,8 @@
     <script src="../build.js"></script>
   </head>
   <body>
-    <a-scene altspace="autoscale: true">
-      <a-assets></a-assets>
+    <a-scene altspace>
+      <!-- cube size will be 1 meter in AltspaceVR -->
       <a-entity geometry="primitive: box" material="color: #C03546"></a-entity>
     </a-scene>
   </body>

diff --git a/examples/index.html b/examples/index.html
@@ -23,6 +23,8 @@
   <body>
     <h1>A-Frame aframe-altspace-component Component</h1>
     <a href="basic/index.html">Basic</a>
+    <a href="test-meter-scale/index.html">Meter Scale</a>
+    <a href="test-pixel-scale/index.html">Pixel Scale</a>
 
     <div class="github-fork-ribbon-wrapper right">
       <div class="github-fork-ribbon" style="background: #3482AA">

diff --git a/examples/test-meter-scale/index.html b/examples/test-meter-scale/index.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>A-Frame Altspace Component - Test Meter Scale</title>
+    <script src="../build.js"></script>
+  </head>
+  <body>
+    <a-scene altspace="usePixelScale: false" scale="2 2 2">
+      <!-- cube size will be 2 meters in AltspaceVR -->
+      <a-entity geometry="primitive: box" material="color: #C03546"></a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/test-pixel-scale/index.html b/examples/test-pixel-scale/index.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>A-Frame Altspace Component - Test Pixel Scale</title>
+    <script src="../build.js"></script>
+  </head>
+  <body>
+    <a-scene altspace="usePixelScale: true" scale="50 50 50">
+      <!-- cube size will be 50 pixels in AltspaceVR -->
+      <a-entity geometry="primitive: box" material="color: #C03546"></a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -6,8 +6,12 @@ if (typeof AFRAME === 'undefined') {
  * aframe-altspace-component component for A-Frame.
  */
 AFRAME.registerComponent('altspace', {
+
+  /**
+   * usePixelScale will allow you to use A-Frame units as CSS pixels. This is the default behavior for three.js apps, but not for A-Frame apps.
+   */
   schema: { 
-    autoscale: { type: 'boolean', default: 'true' }
+    usePixelScale: { type: 'boolean', default: 'false'}
   },
 
   /**
@@ -26,13 +30,12 @@ AFRAME.registerComponent('altspace', {
     }
     if (window.altspace && window.altspace.inClient) {
       var scene = this.el.object3D;
-      if (this.data.autoscale) {
+      if (!this.data.usePixelScale) {
         altspace.getEnclosure().then(function(e) {
-          console.log('aframe-altspace-component autoscaling scene by', e.pixelsPerMeter);
           scene.scale.multiplyScalar(e.pixelsPerMeter);
         });
       }
-      var renderer = this.el.renderer =  altspace.getThreeJSRenderer({version: '0.2.0'});
+      var renderer = this.el.renderer = altspace.getThreeJSRenderer();
       var noop = function() {};
       renderer.setSize = noop;
       renderer.setPixelRatio = noop;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aframe-altspace-component",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "aframe-altspace-component component for A-Frame.",
   "main": "index.js",
   "scripts": {