Merge remote-tracking branch 'origin/dev'

CHANGES.md

@@ -1,5 +1,8 @@
 Changes
 ----
+0.0.10
+* Bootstrap: Can pass in CSS selector for { element: ... } option.
+
 0.0.9
 * New Extra/VR: `render` replacement for Oculus/Cardboard VR using the `getVRDevices` API and `THREE.VRRenderer`. Specify as `render:vr` or use the `VR` alias, see `examples/vr.html`.
 * New Extra/Fullscreen: Go fullscreen / VR with keypress or API.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "threestrap",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "homepage": "https://github.com/unconed/threestrap",
   "description": "Minimal Three.js Bootstrapper",
   "main": "build/threestrap.js",

build/threestrap-core.js

@@ -162,7 +162,7 @@ THREE.Api = {
 };
 THREE.Bootstrap = function (options) {
   if (options) {
-    args = [].slice.apply(arguments);
+    var args = [].slice.apply(arguments);
     options = {};
 
     // (element, ...)
@@ -208,9 +208,15 @@ THREE.Bootstrap = function (options) {
   this.__destroyed = false;
   this.__installed = [];
 
+  // Query element
+  var element = this.__options.element;
+  if (element === '' + element) {
+    element = document.querySelector(element);
+  }
+
   // Global context
   this.plugins = {};
-  this.element = this.__options.element;
+  this.element = element;
 
   // Auto-init
   if (this.__options.init) {
@@ -565,6 +571,7 @@ THREE.Bootstrap.registerPlugin('size', {
     scale: 1,
     maxRenderWidth: Infinity,
     maxRenderHeight: Infinity,
+    devicePixelRatio: true,
   },
 
   listen: [
@@ -606,7 +613,7 @@ THREE.Bootstrap.registerPlugin('size', {
     var element = three.element;
     var renderer = three.renderer;
 
-    var w, h, ew, eh, rw, rh, aspect, cut, style,
+    var w, h, ew, eh, rw, rh, aspect, cut, style, ratio,
         ml = 0 , mt = 0;
 
     // Measure element
@@ -632,9 +639,15 @@ THREE.Bootstrap.registerPlugin('size', {
       aspect = w / h;
     }
 
+    // Get device pixel ratio
+    ratio = 1
+    if (options.devicePixelRatio && typeof window != 'undefined') {
+      ratio = window.devicePixelRatio || 1
+    }
+
     // Apply scale and resolution max
-    rw = Math.min(w * options.scale, options.maxRenderWidth);
-    rh = Math.min(h * options.scale, options.maxRenderHeight);
+    rw = Math.min(w * ratio * options.scale, options.maxRenderWidth);
+    rh = Math.min(h * ratio * options.scale, options.maxRenderHeight);
 
     // Retain aspect ratio
     raspect = rw / rh;
@@ -645,6 +658,9 @@ THREE.Bootstrap.registerPlugin('size', {
       rh = Math.round(rw / aspect);
     }
 
+    // Measure final pixel ratio
+    ratio = rh / h
+
     // Resize and position renderer element
     style = renderer.domElement.style;
     style.width = w + "px";
@@ -659,6 +675,7 @@ THREE.Bootstrap.registerPlugin('size', {
       viewWidth: w,
       viewHeight: h,
       aspect: aspect,
+      pixelRatio: ratio,
     });
 
     three.trigger({
@@ -668,6 +685,7 @@ THREE.Bootstrap.registerPlugin('size', {
       viewWidth: w,
       viewHeight: h,
       aspect: aspect,
+      pixelRatio: ratio,
     });
   },
 

build/threestrap.js

@@ -6948,7 +6948,7 @@ THREE.Api = {
 };
 THREE.Bootstrap = function (options) {
   if (options) {
-    args = [].slice.apply(arguments);
+    var args = [].slice.apply(arguments);
     options = {};
 
     // (element, ...)
@@ -6994,9 +6994,15 @@ THREE.Bootstrap = function (options) {
   this.__destroyed = false;
   this.__installed = [];
 
+  // Query element
+  var element = this.__options.element;
+  if (element === '' + element) {
+    element = document.querySelector(element);
+  }
+
   // Global context
   this.plugins = {};
-  this.element = this.__options.element;
+  this.element = element;
 
   // Auto-init
   if (this.__options.init) {
@@ -7351,6 +7357,7 @@ THREE.Bootstrap.registerPlugin('size', {
     scale: 1,
     maxRenderWidth: Infinity,
     maxRenderHeight: Infinity,
+    devicePixelRatio: true,
   },
 
   listen: [
@@ -7392,7 +7399,7 @@ THREE.Bootstrap.registerPlugin('size', {
     var element = three.element;
     var renderer = three.renderer;
 
-    var w, h, ew, eh, rw, rh, aspect, cut, style,
+    var w, h, ew, eh, rw, rh, aspect, cut, style, ratio,
         ml = 0 , mt = 0;
 
     // Measure element
@@ -7418,9 +7425,15 @@ THREE.Bootstrap.registerPlugin('size', {
       aspect = w / h;
     }
 
+    // Get device pixel ratio
+    ratio = 1
+    if (options.devicePixelRatio && typeof window != 'undefined') {
+      ratio = window.devicePixelRatio || 1
+    }
+
     // Apply scale and resolution max
-    rw = Math.min(w * options.scale, options.maxRenderWidth);
-    rh = Math.min(h * options.scale, options.maxRenderHeight);
+    rw = Math.min(w * ratio * options.scale, options.maxRenderWidth);
+    rh = Math.min(h * ratio * options.scale, options.maxRenderHeight);
 
     // Retain aspect ratio
     raspect = rw / rh;
@@ -7431,6 +7444,9 @@ THREE.Bootstrap.registerPlugin('size', {
       rh = Math.round(rw / aspect);
     }
 
+    // Measure final pixel ratio
+    ratio = rh / h
+
     // Resize and position renderer element
     style = renderer.domElement.style;
     style.width = w + "px";
@@ -7445,6 +7461,7 @@ THREE.Bootstrap.registerPlugin('size', {
       viewWidth: w,
       viewHeight: h,
       aspect: aspect,
+      pixelRatio: ratio,
     });
 
     three.trigger({
@@ -7454,6 +7471,7 @@ THREE.Bootstrap.registerPlugin('size', {
       viewWidth: w,
       viewHeight: h,
       aspect: aspect,
+      pixelRatio: ratio,
     });
   },
 

docs/core.md

@@ -147,6 +147,7 @@ Autosizes canvas to fill its container or size to given dimensions. Force aspect
   scale:  1,                   // Scale factor. e.g. scale 1/2 renders at half resolution.
   maxRenderWidth:  Infinity,   // Maximum width in pixels of framebuffer
   maxRenderHeight: Infinity,   // Maximum height in pixels of framebuffer
+  devixePixelRatio: true,      // Whether to automatically adjust for high DPI displays
 }
 ```
 
@@ -166,6 +167,7 @@ three.Size.renderHeight;  // Height of frame buffer
 three.Size.viewWidth;     // Width of canvas on page
 three.Size.viewHeight;    // Height of canvas on page
 three.Size.aspect;        // Aspect ratio of view
+three.Size.pixelRatio;    // Pixel ratio (render height / view height)
 ```
 
 * Events

examples/controls_orbit_cube.html

@@ -20,7 +20,7 @@ <h1>Drag/Zoom Controls</h1>
 
     // Bootstrap core + controls plugin into element
     var three = THREE.Bootstrap({
-      element: document.querySelector('#three'),
+      element: '#three',
       plugins: ['core', 'controls', 'cursor'],
       controls: {
         klass: THREE.OrbitControls

examples/element_cube.html

@@ -20,7 +20,7 @@ <h1>Cubes in a Div</h1>
     // Bootstrap into element
     var three = THREE.Bootstrap({
       plugins: ['core', 'stats'],
-      element: document.querySelector('#three'),
+      element: '#three',
     });
 
     // Random generator

package.json

@@ -1,6 +1,6 @@
 {
   "name": "threestrap",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Minimal Three.js Bootstrapper",
   "repository": {
     "type": "git",

src/bootstrap.js

@@ -1,6 +1,6 @@
 THREE.Bootstrap = function (options) {
   if (options) {
-    args = [].slice.apply(arguments);
+    var args = [].slice.apply(arguments);
     options = {};
 
     // (element, ...)
@@ -46,9 +46,15 @@ THREE.Bootstrap = function (options) {
   this.__destroyed = false;
   this.__installed = [];
 
+  // Query element
+  var element = this.__options.element;
+  if (element === '' + element) {
+    element = document.querySelector(element);
+  }
+
   // Global context
   this.plugins = {};
-  this.element = this.__options.element;
+  this.element = element;
 
   // Auto-init
   if (this.__options.init) {

src/core/size.js

@@ -7,6 +7,7 @@ THREE.Bootstrap.registerPlugin('size', {
     scale: 1,
     maxRenderWidth: Infinity,
     maxRenderHeight: Infinity,
+    devicePixelRatio: true,
   },
 
   listen: [
@@ -48,7 +49,7 @@ THREE.Bootstrap.registerPlugin('size', {
     var element = three.element;
     var renderer = three.renderer;
 
-    var w, h, ew, eh, rw, rh, aspect, cut, style,
+    var w, h, ew, eh, rw, rh, aspect, cut, style, ratio,
         ml = 0 , mt = 0;
 
     // Measure element
@@ -74,9 +75,15 @@ THREE.Bootstrap.registerPlugin('size', {
       aspect = w / h;
     }
 
+    // Get device pixel ratio
+    ratio = 1
+    if (options.devicePixelRatio && typeof window != 'undefined') {
+      ratio = window.devicePixelRatio || 1
+    }
+
     // Apply scale and resolution max
-    rw = Math.min(w * options.scale, options.maxRenderWidth);
-    rh = Math.min(h * options.scale, options.maxRenderHeight);
+    rw = Math.min(w * ratio * options.scale, options.maxRenderWidth);
+    rh = Math.min(h * ratio * options.scale, options.maxRenderHeight);
 
     // Retain aspect ratio
     raspect = rw / rh;
@@ -87,6 +94,9 @@ THREE.Bootstrap.registerPlugin('size', {
       rh = Math.round(rw / aspect);
     }
 
+    // Measure final pixel ratio
+    ratio = rh / h
+
     // Resize and position renderer element
     style = renderer.domElement.style;
     style.width = w + "px";
@@ -101,6 +111,7 @@ THREE.Bootstrap.registerPlugin('size', {
       viewWidth: w,
       viewHeight: h,
       aspect: aspect,
+      pixelRatio: ratio,
     });
 
     three.trigger({
@@ -110,6 +121,7 @@ THREE.Bootstrap.registerPlugin('size', {
       viewWidth: w,
       viewHeight: h,
       aspect: aspect,
+      pixelRatio: ratio,
     });
   },
 

test/bootstrap.spec.js

@@ -82,6 +82,28 @@ describe("three", function () {
     document.body.removeChild(element);
   });
 
+  it("installs in an element (selector)", function () {
+
+    var element = document.createElement('div');
+    element.setAttribute('id', 'watwatwatselector');
+    document.body.appendChild(element);
+
+    var options = {
+      init: true,
+      plugins: [],
+      element: '#watwatwatselector'
+    };
+
+    var three = new THREE.Bootstrap(options);
+
+    expect(three.__inited).toEqual(true);
+    expect(three.element).toEqual(element);
+
+    three.destroy();
+
+    document.body.removeChild(element);
+  });
+
   it('fires a ready event', function () {
 
     var ready = 0;

test/core/render.spec.js

@@ -11,11 +11,12 @@ describe("render", function () {
     three.scene = new THREE.Scene();
     three.camera = new THREE.PerspectiveCamera();
 
-    expect(three.scene.__webglObjects).toBeFalsy();
+    called = 0;
+    three.renderer.render = function () { called++; }
 
     three.dispatchEvent({ type: 'render' });
 
-    expect(three.scene.__webglObjects).toBeTruthy();
+    expect(called).toBe(1);
 
     three.destroy();