Add verticalAlign property

* verticalAlign puts the origin at the bottom, middle (default), or top of the Altspace enclosure. * Added example than sets verticalAlign='bottom' and also shows how to load OBJ and COLLADA models.
AltspaceVR · Jun 6, 2016 · d9de7e7 · d9de7e7
1 parent 3ff57f9
commit d9de7e7
Show file tree

Hide file tree

Showing 16 changed files with 926 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@ Note that when running in Altspace, the scene will not be synchronized between u
 | Property  | Description | Default Value |
 | --------  | ----------- | ------------- |
 | `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`
 
 ### Usage
 Add the "altspace" parameter on your `<a-scene>` like so: `<a-scene altspace>`
@@ -23,8 +24,8 @@ Install and use by directly including the [browser files](dist):
 ```html
 <head>
   <title>My A-Frame Scene</title>
-  <script src="https://aframe.io/releases/0.2.1/aframe.min.js"></script>
-  <script src="https://cdn.rawgit.com/AltspaceVR/aframe-altspace-component/v0.2.0/dist/aframe-altspace-component.min.js"></script>
+  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
+  <script src="https://cdn.rawgit.com/AltspaceVR/aframe-altspace-component/v0.2.2/dist/aframe-altspace-component.min.js"></script>
 </head>
 
 <body>

diff --git a/dist/aframe-altspace-component.js b/dist/aframe-altspace-component.js
@@ -54,10 +54,11 @@
 	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.
+	   * 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.  verticalAlign puts the origin at the bottom, middle (default), or top of the Altspace enclosure.
 	   */
 	  schema: { 
-	    usePixelScale: { type: 'boolean', default: 'false'}
+	    usePixelScale: { type: 'boolean', default: 'false'},
+	    verticalAlign: { type: 'string', default: 'middle'}
 	  },
 
 	  /**
@@ -121,6 +122,21 @@
 	        scene.scale.multiplyScalar(e.pixelsPerMeter);
 	      });
 	    }
+	    var verticalAlign = this.data.verticalAlign;
+	    if (verticalAlign !== 'center') {
+	      altspace.getEnclosure().then(function(e) {
+	        switch (verticalAlign) {
+	          case 'bottom':
+	            scene.position.y -= e.innerHeight / 2;
+	            break;
+	          case 'top':
+	            scene.position.y += e.innerHeight / 2;
+	            break;
+	          default:
+	            console.warn('Unexpected value for verticalAlign: ', this.data.verticalAlign);
+	        }
+	      });
+	    }
 	    var renderer = this.el.renderer = altspace.getThreeJSRenderer();
 	    var noop = function() {};
 	    renderer.setSize = noop;

diff --git a/dist/aframe-altspace-component.min.js b/dist/aframe-altspace-component.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -26,6 +26,7 @@ <h1>A-Frame aframe-altspace-component Component</h1>
     <a href="test-meter-scale/index.html">Meter Scale</a>
     <a href="test-pixel-scale/index.html">Pixel Scale</a>
     <a href="test-cursor-events/index.html">Cursor Events</a>
+    <a href="test-vertical-align/index.html">Vertical Align</a>
 
     <div class="github-fork-ribbon-wrapper right">
       <div class="github-fork-ribbon" style="background: #3482AA">

diff --git a/examples/test-vertical-align/index.html b/examples/test-vertical-align/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Aframe Altspace Component - Test Vertical Align</title>
+    <meta name="description" content="Models — A-Frame">
+    <script src="../build.js"></script>
+  </head>
+  <body>
+    <!-- This scene based on Aframe examples/primitives-models/ -->
+    <a-scene altspace="verticalAlign: bottom">
+      <a-assets>
+        <a-asset-item id="tree1" src="models/tree1/tree1.dae"></a-asset-item>
+        <a-asset-item id="tree2" src="models/tree2/tree2.dae"></a-asset-item>
+        <a-asset-item id="crate-mtl" src="models/crate/crate.mtl"></a-asset-item>
+        <a-asset-item id="crate-obj" src="models/crate/crate.obj"></a-asset-item>
+        <img id="sky" src="peach-gradient.jpg">
+      </a-assets>
+
+      <a-obj-model src="#crate-obj" mtl="#crate-mtl" position="0 1 0"></a-obj-model>
+
+      <a-collada-model src="#tree1" position="2.5 0 -2.5" rotation="0 30 0"
+                       scale="1.4 1.4 1.4"></a-collada-model>
+      <a-collada-model src="#tree2" position="2.5 0 2.5" rotation="0 60 0"
+                       scale="1.4 1.4 1.4"></a-collada-model>
+
+      <a-collada-model src="#tree2" position="-2.5 0 -2.5" rotation="0 10 0"
+                       scale="1.4 1.4 1.4"></a-collada-model>
+      <a-collada-model src="#tree1" position="-2.5 0 2.5" rotation="0 25 0"
+                       scale="1.4 1.4 1.4"></a-collada-model>
+
+      <a-sky src="#sky"></a-sky>
+
+      <a-light type="ambient" color="#ccc"></a-light>
+      <a-light color="#ddf" distance="100" intensity="0.4" type="point"></a-light>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/test-vertical-align/models/crate/README.md b/examples/test-vertical-align/models/crate/README.md
@@ -0,0 +1,5 @@
+# Crate
+
+Made by Tyro Smith, free for personal and commercial use.
+
+Source: http://tf3dm.com/3d-model/crate-86737.html
diff --git a/examples/test-vertical-align/models/crate/crate.jpg b/examples/test-vertical-align/models/crate/crate.jpg
diff --git a/examples/test-vertical-align/models/crate/crate.mtl b/examples/test-vertical-align/models/crate/crate.mtl
@@ -0,0 +1,12 @@
+# Blender MTL File: 'crate.blend'
+# Material Count: 1
+
+newmtl Material.001
+Ns 96.078431
+Ka 0.000000 0.000000 0.000000
+Kd 0.640000 0.640000 0.640000
+Ks 0.500000 0.500000 0.500000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd crate.jpg
diff --git a/examples/test-vertical-align/models/crate/crate.obj b/examples/test-vertical-align/models/crate/crate.obj
@@ -0,0 +1,24 @@
+# Blender v2.67 (sub 1) OBJ File: 'crate.blend'
+# www.blender.org
+mtllib crate.mtl
+o Cube_Cube.001
+v -1.000000 -1.000000 1.000000
+v -1.000000 -1.000000 -1.000000
+v 1.000000 -1.000000 -1.000000
+v 1.000000 -1.000000 1.000000
+v -1.000000 1.000000 1.000000
+v -1.000000 1.000000 -1.000000
+v 1.000000 1.000000 -1.000000
+v 1.000000 1.000000 1.000000
+vt 0.000000 0.000000
+vt 1.000000 0.000000
+vt 1.000000 1.000000
+vt 0.000000 1.000000
+usemtl Material.001
+s off
+f 5/1 6/2 2/3 1/4
+f 6/1 7/2 3/3 2/4
+f 7/1 8/2 4/3 3/4
+f 8/1 5/2 1/3 4/4
+f 1/1 2/2 3/3 4/4
+f 8/1 7/2 6/3 5/4
diff --git a/examples/test-vertical-align/models/tree1/tex/shadow-circle.png b/examples/test-vertical-align/models/tree1/tex/shadow-circle.png