fix resize in VR

threejs/lessons/threejs-webvr.md

@@ -1,16 +1,68 @@
 Title: Three.js WebVR
 Description: How to use Virtual Reality in Three.js.
 
-Making WebVR apps in three.js is pretty simple.
-You basically just have to tell three.js you want to use WebVR.
-If you think about it a few things about WebVR should be clear.
-Which way the camera is pointing is supplied by the VR system itself
-since the user turns their head to choose a direction to look.
-Similarly the field of view and aspect will be supplied by the VR system since
-each system has a different field of view and display aspect.
-
-Let's take an example from the article on [making a responsive webpage](threejs-responsive.html)
-and make it support VR.
+Making WebVR apps in three.js is pretty simple. You basically just have to tell
+three.js you want to use WebVR. If you think about it a few things about WebVR
+should be clear. Which way the camera is pointing is supplied by the VR system
+itself since the user turns their head to choose a direction to look. Similarly
+the field of view and aspect will be supplied by the VR system since each system
+has a different field of view and display aspect.
+
+Let's take an example from the article on [making a responsive
+webpage](threejs-responsive.html) and make it support VR.
+
+Before we get started you're going to need a VR capable device like an Android
+smartphone, Google Daydream, Oculus Go, Oculus Rift, Vive, Samsung Gear VR, an
+iPhone with a [WebVR browser](https://itunes.apple.com/us/app/webvr-browser/id1286543066?mt=8).
+
+Next, if you are running locally you need to run a simple web server like is
+covered in [the article on setting up](threejs-setup.html). 
+
+You then need to look up the *local* IP address of your computer. On Mac you can
+Option-Click the WiFi controls (assuming you're on Wifi). 
+
+<div class="threejs_center"><img src="resources/images/ipaddress-macos.png" style="width: 428px;"></div>
+
+On Windows you can
+[click the Wifi icon in the taskbar and then click "Properties" for a particular
+network connection](https://support.microsoft.com/en-us/help/4026518/windows-10-find-your-ip-address).
+
+If you see more than one IP address, local IP addresses most commonly start with
+`10.` or `192.` or `172.`. If you see an address that starts with `127.` that
+address is for your computer only. It's the address the computer can use to talk
+to itself so ignore anything that starts with `127.`.
+
+On your VR device, first make sure it's connected to the same WiFi as your
+computer. Then, open your browser and type in `http://<ipaddress:port>`. Which
+port depends on what server you're running. If you're using
+[Servez](https://greggman.github.io/servez) or the http-server from node.js then
+the port will likely be 8080.
+
+On my computer as I write this article its IP address is `192.168.100.78` and my
+web server is using port 8080 so on my VR device I'd enter
+`http://192.168.100.78:8080` to get the main page of my webserver to appear. If
+you've downloaded these articles and are serving them you should see the front
+page of this website appear. If you're making a new page then you might need to
+add the path to your page for example when entering the URL on your VR device
+something like `http://192.168.100.78:8080/path/to/page.html`
+
+Note that anytime you switch networks your local ip address will change.
+Even on the same network when you re-connect to it your local ip address
+might change so you will need to look it up again and type a different
+address into your VR device.
+
+Also note that this will likely work on your home network or your work network but
+may likely **not work** at a cafe. The WiFi at many cafe's, especially at large
+chains like Starbucks or McDonalds are configured so that machines on the local
+network can not talk to each other.
+
+If you're really going to do WebVR development another thing you should learn about is
+[remote debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)
+so that you can see console warnings, errors, and of course actually 
+[debug your code](threejs-debugging-javascript.html).
+
+If you just want to see the code work below you can just run the code from
+this site.
 
 The first thing we need to do is include the VR support after
 including three.js
@@ -31,6 +83,14 @@ function main() {
 +  document.body.appendChild(WEBVR.createButton(renderer));
 ```
 
+We need to not try to resize when in VR mode as the VR device
+will decide the size
+
+```js
+-if (resizeRendererToDisplaySize(renderer)) {
++if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
+```
+
 The last major thing we need to do is let three.js run our
 render loop. Until now we have used a `requestAnimationFrame`
 loop but to support VR we need to let three.js handle our
@@ -41,7 +101,7 @@ and passing a function to call for the loop.
 function render(time) {
   time *= 0.001;
 
-  if (resizeRendererToDisplaySize(renderer)) {
+  if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
     const canvas = renderer.domElement;
     camera.aspect = canvas.clientWidth / canvas.clientHeight;
     camera.updateProjectionMatrix();

threejs/threejs-webvr-basic-vr-optional.html

@@ -121,7 +121,7 @@ function main() {
   function render(time) {
     time *= 0.001;
 
-    if (resizeRendererToDisplaySize(renderer)) {
+    if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
       const canvas = renderer.domElement;
       camera.aspect = canvas.clientWidth / canvas.clientHeight;
       camera.updateProjectionMatrix();

threejs/threejs-webvr-basic-w-background.html

@@ -98,7 +98,7 @@ function main() {
   function render(time) {
     time *= 0.001;
 
-    if (resizeRendererToDisplaySize(renderer)) {
+    if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
       const canvas = renderer.domElement;
       camera.aspect = canvas.clientWidth / canvas.clientHeight;
       camera.updateProjectionMatrix();

threejs/threejs-webvr-basic.html

@@ -86,7 +86,7 @@ function main() {
   function render(time) {
     time *= 0.001;
 
-    if (resizeRendererToDisplaySize(renderer)) {
+    if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
       const canvas = renderer.domElement;
       camera.aspect = canvas.clientWidth / canvas.clientHeight;
       camera.updateProjectionMatrix();

threejs/threejs-webvr-look-to-select-selector.html

@@ -103,7 +103,7 @@ function main() {
   function render(time) {
     time *= 0.001;
 
-    if (resizeRendererToDisplaySize(renderer)) {
+    if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
       const canvas = renderer.domElement;
       const aspect = canvas.clientWidth / canvas.clientHeight;
       camera.left = -aspect;

threejs/threejs-webvr-look-to-select-w-cursor.html

@@ -193,7 +193,7 @@ function main() {
   function render(time) {
     time *= 0.001;
 
-    if (resizeRendererToDisplaySize(renderer)) {
+    if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
       const canvas = renderer.domElement;
       camera.aspect = canvas.clientWidth / canvas.clientHeight;
       camera.updateProjectionMatrix();

threejs/threejs-webvr-look-to-select.html

@@ -128,7 +128,7 @@ function main() {
   function render(time) {
     time *= 0.001;
 
-    if (resizeRendererToDisplaySize(renderer)) {
+    if (!renderer.vr.isPresenting() && resizeRendererToDisplaySize(renderer)) {
       const canvas = renderer.domElement;
       camera.aspect = canvas.clientWidth / canvas.clientHeight;
       camera.updateProjectionMatrix();