Merging upstream from XRPackage

OrbitControls.js

@@ -6,7 +6,7 @@
  * @author erich666 / http://erichaines.com
  * @author ScieCode / http://github.com/sciecode
  */
-
+import THREE from './three.module.js';
 // This set of controls performs orbiting, dollying (zooming), and panning.
 // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
 //

Reflector.js

@@ -1,6 +1,7 @@
 /**
  * @author Slayvin / http://slayvin.net
  */
+import THREE from './three.module.js';
 
 THREE.Reflector = function ( geometry, options ) {
 
@@ -155,17 +156,17 @@ THREE.Reflector = function ( geometry, options ) {
 
 		var currentRenderTarget = renderer.getRenderTarget();
 
-		var currentVrEnabled = renderer.vr.enabled;
+		var currentVrEnabled = renderer.xr.enabled;
 		var currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
 
-		renderer.vr.enabled = false; // Avoid camera modification and recursion
+		renderer.xr.enabled = false; // Avoid camera modification and recursion
 		renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
 
 		renderer.setRenderTarget( renderTarget );
 		renderer.clear();
 		renderer.render( scene, virtualCamera );
 
-		renderer.vr.enabled = currentVrEnabled;
+		renderer.xr.enabled = currentVrEnabled;
 		renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
 
 		renderer.setRenderTarget( currentRenderTarget );

avatars.js

@@ -1,3 +1,4 @@
+import THREE from './three.module.js';
 import './vrarmik/three-vrm.js';
 import {fixSkeletonZForward} from './vrarmik/SkeletonUtils.js';
 import PoseManager from './vrarmik/PoseManager.js';
@@ -8,8 +9,8 @@ import skeletonString from './skeleton.js';
 
 const zeroVector = new THREE.Vector3();
 const upRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI/2);
-const leftRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI*0.8);
-const rightRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), -Math.PI*0.8);
+const leftRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI*0.5);
+const rightRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), -Math.PI*0.5);
 const z180Quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
 
 const localVector = new THREE.Vector3();
@@ -540,6 +541,7 @@ class Avatar {
     this.hairBones = hairBones;
 
     this.springBoneManager = null;
+    let springBoneManagerPromise = null;
     if (options.hair) {
       new Promise((accept, reject) => {
         if (!object) {
@@ -594,7 +596,7 @@ class Avatar {
           };
         }
 
-        new THREE.VRMSpringBoneImporter().import(object)
+        springBoneManagerPromise = new THREE.VRMSpringBoneImporter().import(object)
           .then(springBoneManager => {
             this.springBoneManager = springBoneManager;
           });
@@ -871,7 +873,13 @@ class Avatar {
 
     this.decapitated = false;
     if (options.decapitate) {
-      this.decapitate();
+      if (springBoneManagerPromise) {
+        springBoneManagerPromise.then(() => {
+          this.decapitate();
+        });
+      } else {
+        this.decapitate();
+      }
     }
 	}
   initializeBonePositions(setups) {
@@ -1085,4 +1093,4 @@ class Avatar {
     this.setMicrophoneMediaStream(null);
   }
 }
-export default Avatar;
+export default Avatar;

bmfont.js

@@ -1,3 +1,5 @@
+import THREE from './three.module.js';
+
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 var createLayout = require('layout-bmfont-text')
 var inherits = require('inherits')
@@ -10,6 +12,7 @@ var utils = require('./lib/utils')
 
 var Base = THREE.BufferGeometry
 
+
 window.createTextGeometry = function createTextGeometry (opt) {
 // module.exports = function createTextGeometry (opt) {
   return new TextGeometry(opt)

index.html

@@ -305,10 +305,13 @@
   padding: 0 30px;
 }
     </style>
-    <script src="three.js"></script>
-    <script src="OrbitControls.js"></script>
-    <script src="Reflector.js"></script>
-    <script src="bmfont.js"></script>
+    <script type="module">
+      import THREE from './three.module.js';
+      window.THREE = THREE;
+    </script>
+    <script type="module" src="OrbitControls.js"></script>
+    <script type="module" src="Reflector.js"></script>
+    <script type="module" src="bmfont.js"></script>
   </head>
   <body>
     <div class=body>
@@ -495,8 +498,8 @@ <h3>Multiplayer</h3>
 };
 
 const teleportGeometry = new THREE.TorusBufferGeometry(0.5, 0.15, 3, 5)
-  .applyMatrix(new THREE.Matrix4().makeRotationX(-(Math.PI / 2)))
-  .applyMatrix(new THREE.Matrix4().makeRotationY((1 / 20) * (Math.PI * 2)));
+  .applyMatrix4(new THREE.Matrix4().makeRotationX(-(Math.PI / 2)))
+  .applyMatrix4(new THREE.Matrix4().makeRotationY((1 / 20) * (Math.PI * 2)));
 const teleportMaterial = new THREE.MeshBasicMaterial({
   color: 0x44c2ff,
 });
@@ -633,7 +636,7 @@ <h3>Multiplayer</h3>
   const mirrorWidth = 3;
   const mirrorHeight = 2;
   const geometry = new THREE.PlaneBufferGeometry(mirrorWidth, mirrorHeight)
-    .applyMatrix(new THREE.Matrix4().makeTranslation(0, 1, 0));
+    .applyMatrix4(new THREE.Matrix4().makeTranslation(0, 1, 0));
   const mesh = new THREE.Reflector(geometry, {
     clipBias: 0.003,
     textureWidth: 1024 * window.devicePixelRatio,
@@ -647,7 +650,7 @@ <h3>Multiplayer</h3>
 
   const borderMesh = new THREE.Mesh(
     new THREE.BoxBufferGeometry(mirrorWidth + 0.1, mirrorHeight + 0.1, 0.1)
-      .applyMatrix(new THREE.Matrix4().makeTranslation(0, 1, -0.1/2 - 0.01)),
+      .applyMatrix4(new THREE.Matrix4().makeTranslation(0, 1, -0.1/2 - 0.01)),
     new THREE.MeshPhongMaterial({
       color: 0x5c6bc0,
     })
@@ -753,8 +756,8 @@ <h3>Multiplayer</h3>
   const timeDiff = now - lastTimestamp;
 
   if (rig) {
-    if (renderer.vr.enabled) {
-      const vrCameras = renderer.vr.getCamera(camera).cameras;
+    if (renderer.xr.enabled) {
+      const vrCameras = renderer.xr.getCamera(camera).cameras;
       const vrCamera = vrCameras[0];
       const vrCamera2 = vrCameras[1];
       vrCamera.matrixWorld.decompose(vrCamera.position, vrCamera.quaternion, vrCamera.scale);
@@ -1257,9 +1260,9 @@ <h3>Multiplayer</h3>
   };
   await _loadReferenceSpace();
   const loadReferenceSpaceInterval = setInterval(_loadReferenceSpace, 1000);
-  
+
   await new Promise((accept, reject) => {
-    renderer.vr.setSession(session);
+    renderer.xr.setSession(session);
 
     let interations = 0;
     const _raf = (timestamp, frame) => {
@@ -1280,9 +1283,9 @@ <h3>Multiplayer</h3>
 
         renderer.setAnimationLoop(null);
 
-        renderer.vr.enabled = true;
-        renderer.vr.setSession(session);
-        renderer.vr.setAnimationLoop(animate);
+        renderer.xr.enabled = true;
+        renderer.xr.setSession(session);
+        renderer.xr.setAnimationLoop(animate);
 
         accept();
       } else {

index.js

@@ -15,3 +15,5 @@ https.createServer({
   .listen(443)
 
 console.log(`https://dev.exokit.org`);
+
+app.listen(3100, () => console.log(`localhost:3100`));