diff --git a/README.md b/README.md index a5a1905..6c5db67 100644 --- 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 `` like so: `` +Add the "altspace" parameter on your `` like so: `` #### Example @@ -27,15 +24,12 @@ Install and use by directly including the [browser files](dist): My A-Frame Scene - + - + ``` - -- 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 index 79e35f1..c04e419 100644 --- 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 index 99f63d6..d21d709 100644 --- a/dist/aframe-altspace-component.min.js +++ b/dist/aframe-altspace-component.min.js @@ -1 +1 @@ -!function(e){function t(n){if(a[n])return a[n].exports;var o=a[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t){if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("altspace",{schema:{autoscale:{type:"boolean","default":"true"}},init:function(){},update:function(e){if(!(this.el.object3D instanceof THREE.Scene))return void console.warn("aframe-altspace-component can only be attached to a-scene");if(window.altspace&&window.altspace.inClient){var t=this.el.object3D;this.data.autoscale&&altspace.getEnclosure().then(function(e){console.log("aframe-altspace-component autoscaling scene by",e.pixelsPerMeter),t.scale.multiplyScalar(e.pixelsPerMeter)});var a=this.el.renderer=altspace.getThreeJSRenderer({version:"0.2.0"}),n=function(){};a.setSize=n,a.setPixelRatio=n,a.setClearColor=n,a.clear=n,a.enableScissorTest=n,a.setScissor=n,a.setViewport=n,a.getPixelRatio=n,a.getMaxAnisotropy=n,a.setFaceCulling=n,a.context={canvas:{}},a.shadowMap={}}},remove:function(){},pause:function(){},play:function(){}})}]); \ No newline at end of file +!function(e){function t(n){if(a[n])return a[n].exports;var o=a[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t){if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("altspace",{schema:{usePixelScale:{type:"boolean","default":"false"}},init:function(){},update:function(e){if(!(this.el.object3D instanceof THREE.Scene))return void console.warn("aframe-altspace-component can only be attached to a-scene");if(window.altspace&&window.altspace.inClient){var t=this.el.object3D;this.data.usePixelScale||altspace.getEnclosure().then(function(e){t.scale.multiplyScalar(e.pixelsPerMeter)});var a=this.el.renderer=altspace.getThreeJSRenderer(),n=function(){};a.setSize=n,a.setPixelRatio=n,a.setClearColor=n,a.clear=n,a.enableScissorTest=n,a.setScissor=n,a.setViewport=n,a.getPixelRatio=n,a.getMaxAnisotropy=n,a.setFaceCulling=n,a.context={canvas:{}},a.shadowMap={}}},remove:function(){},pause:function(){},play:function(){}})}]); \ No newline at end of file diff --git a/examples/basic/index.html b/examples/basic/index.html index 08d8d5c..e49bf04 100644 --- a/examples/basic/index.html +++ b/examples/basic/index.html @@ -4,8 +4,8 @@ - - + + diff --git a/examples/index.html b/examples/index.html index 06401bf..0678955 100644 --- a/examples/index.html +++ b/examples/index.html @@ -23,6 +23,8 @@

A-Frame aframe-altspace-component Component

Basic + Meter Scale + Pixel Scale
diff --git a/examples/test-meter-scale/index.html b/examples/test-meter-scale/index.html new file mode 100644 index 0000000..50c9f0e --- /dev/null +++ b/examples/test-meter-scale/index.html @@ -0,0 +1,12 @@ + + + A-Frame Altspace Component - Test Meter Scale + + + + + + + + + diff --git a/examples/test-pixel-scale/index.html b/examples/test-pixel-scale/index.html new file mode 100644 index 0000000..26a34f5 --- /dev/null +++ b/examples/test-pixel-scale/index.html @@ -0,0 +1,12 @@ + + + A-Frame Altspace Component - Test Pixel Scale + + + + + + + + + diff --git a/index.js b/index.js index b818c9c..f1f15ab 100644 --- 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 index 75c0596..628f6c6 100644 --- 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": {