janusweb 1.5.47 → 1.5.48

package/media/assets/webui/apps/buttons/buttons.js

@@ -189,12 +189,14 @@ elation.elements.define('janus-button-start', class extends elation.elements.ui.
   }
   onclick(ev) {
     janus.engine.systems.sound.enableSound();
-    janus.engine.systems.controls.requestPointerLock();
     if (room.objects.scroller) {
       room.objects.scroller.disable();
     }
-    //player.flying = false;
-    player.enable();
+    if (room.pointerlock) {
+      janus.engine.systems.controls.requestPointerLock();
+      //player.flying = false;
+      player.enable();
+    }
     //janus.ui.show();
   }
 });

package/media/assets/webui/apps/comms/comms.js

@@ -209,8 +209,10 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
       }
     });
     elation.events.add(janus._target, 'clientprint', (ev) => this.handleClientPrint(ev.data));
+    elation.events.add(this.janusweb, 'room_load_start', (ev) => { this.updateRoom(ev.data); });
     // FIXME - first element with the current design is a <detail> element, but this is fragile if that changes
     this.elements[0].addEventListener('toggle', (ev) => this.elements.chatinput.focus());
+    this.updateRoom(room);
   }
   scrollToBottom() {
     setTimeout(() => {
@@ -219,7 +221,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
   }
   handleUserJoined(ev) {
     var data = ev.data;
-if (!this.elements.chatmessages) return;
+    if (!this.elements || !this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'join',
@@ -302,6 +304,9 @@ if (!this.elements.chatmessages) return;
     }
     this.elements.unread.count = this.numunread;
   }
+  updateRoom(newroom) {
+    this.elements.toggle.open = !newroom.private;
+  }
 });
 
 elation.elements.define('janus-comms-voip', class extends elation.elements.base {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "janusweb",
   "description": "Web client for JanusVR worlds",
-  "version": "1.5.47",
+  "version": "1.5.48",
   "main": "scripts/janusweb.js",
   "author": "James Baicoianu",
   "license": "MIT",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "elation-engine": ">=0.9.114",
-    "uglify-es": "*"
+    "uglify-js": "*"
   },
   "keywords": [
     "elation",

package/scripts/client.js

@@ -65,6 +65,7 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
       append: container, 
       homepage: homepage, 
       corsproxy: corsproxy, 
+      showui: (args.showui && args.showui != "false"),
       shownavigation: (args.shownavigation && args.shownavigation != "false"),
       uiconfig: args.uiconfig,
       showchat: elation.utils.any(args.showchat, true),
@@ -95,6 +96,7 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
         homepage: { type: 'string' },
         url: { type: 'string' },
         uiconfig: { type: 'string' },
+        showui: { type: 'boolean' },
         shownavigation: { type: 'boolean', default: true },
         showchat: { type: 'boolean', default: true },
         networking: { type: 'boolean', default: true },
@@ -195,7 +197,7 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
 
       var datapath = elation.config.get('janusweb.datapath', '/media/janusweb');
       this.uiconfig = elation.utils.any(this.player.getSetting('uiconfig'), this.uiconfig, datapath + (datapath[datapath.length-1] != '/' ? '/' : '') + 'assets/webui/default.json');
-      if (this.shownavigation) {
+      if (this.showui && this.shownavigation) {
         this.createUI();
       }
       this.view.pickingactive = true;
@@ -327,6 +329,7 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
           networking: { type: 'boolean', default: true },
           avatarsrc: { type: 'string', default: false },
           uiconfig: { type: 'string', default: false },
+          showui: { type: 'boolean', default: true },
           shownavigation: { type: 'boolean', default: true },
         });
       }
@@ -355,6 +358,7 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
           networking: this.networking,
           corsproxy: this.corsproxy,
           //resolution: width + 'x' + height,
+          showui: this.showui && this.showui != 'false',
           shownavigation: this.shownavigation,
           avatarsrc: this.avatarsrc,
           uiconfig: this.uiconfig,

package/scripts/elements/outliner.js

@@ -69,19 +69,31 @@ elation.require(['janusweb.janusbase'], function() {
     },
     select(object) {
       this.selected = object;
+      if (!this.meshes) return;
       if (!object) {
         this.deselect();
         return;
       }
       let objmeshes = [], skinnedmeshes = [];
-      object.traverseObjects(n => {
-        if (n instanceof THREE.Mesh && n.material !== this.outlinematerial) {
-          if (n.isSkinnedMesh)
-            skinnedmeshes.push(n);
-          else
-            objmeshes.push(n);
-        }
-      });
+      if (object instanceof THREE.Object3D) {
+        object.traverse(n => {
+          if (n instanceof THREE.Mesh && n.material !== this.outlinematerial) {
+            if (n.isSkinnedMesh)
+              skinnedmeshes.push(n);
+            else
+              objmeshes.push(n);
+          }
+        });
+      } else {
+        object.traverseObjects(n => {
+          if (n instanceof THREE.Mesh && n.material !== this.outlinematerial) {
+            if (n.isSkinnedMesh)
+              skinnedmeshes.push(n);
+            else
+              objmeshes.push(n);
+          }
+        });
+      }
       // Create and update regular Meshes
       let meshIdx = 0;
       for (; meshIdx < objmeshes.length; meshIdx++) {
@@ -119,6 +131,7 @@ elation.require(['janusweb.janusbase'], function() {
       this.refresh();
     },
     deselect() {
+      if (!this.meshes) return;
       for (let meshIdx = 0; meshIdx < this.meshes.length; meshIdx++) {
         this.meshes[meshIdx].geometry = null;
         if (this.meshes[meshIdx].parent) {

package/scripts/janusbase.js

@@ -57,6 +57,9 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
         ongazeprogress: { type: 'callback' },
         ongazeactivate: { type: 'callback' },
         oncollision: { type: 'callback' },
+        onmouseover: { type: 'callback' },
+        onmouseout: { type: 'callback' },
+        onmousemove: { type: 'callback' },
       });
       this.lastframevalues = {
         position: new THREE.Vector3(0,0,0),
@@ -467,11 +470,13 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
               //} else if (v === true || v === false) {
               //  propertydefs[k] = {type: 'boolean', default: v };
               } else if (v instanceof THREE.Vector3) {
-                propertydefs[k] = {type: 'vector3', default: v };
+                propertydefs[k] = {type: 'vector3', default: v.clone() };
               } else if (v instanceof THREE.Color) {
-                propertydefs[k] = {type: 'color', default: v };
+                propertydefs[k] = {type: 'color', default: v.clone() };
               } else if (v instanceof THREE.Euler) {
-                propertydefs[k] = {type: 'euler', default: v };
+                propertydefs[k] = {type: 'euler', default: v.clone() };
+              } else if (typeof v == 'boolean') {
+                propertydefs[k] = {type: 'boolean', default: v };
               } else {
                 propertydefs[k] = {type: 'object', default: v };
               }

package/scripts/janusghost.js

@@ -286,7 +286,7 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
           this.body = this.createObject('object', {
             id: bodyid,
             //orientation: new THREE.Quaternion().setFromEuler(new THREE.Euler(0,Math.PI,0)),
-            //rotation: V(0, 180, 0),
+            rotation: V(0, 180, 0),
             lighting: this.lighting,
             //cull_face: 'none'
             opacity: 0.9999,
@@ -446,7 +446,7 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
           }
         });
       } else {
-        let armature = sourcecontainer.getObjectByName('Armature');
+        let armature = sourcecontainer.getObjectByName('Armature') || sourcecontainer;
         newclip.tracks.forEach(track => {
           track.name = track.name.replace('mixamorig', '');
           let p = track.name.split('.');
@@ -528,6 +528,8 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
       var xdir = new THREE.Vector3(),
             ydir = new THREE.Vector3(),
             zdir = new THREE.Vector3(),
+            flip = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI, 0));
+            origin = new THREE.Vector3(),
             matrix = new THREE.Matrix4(),
             q1 = new THREE.Quaternion();
       return function(movedata) {
@@ -550,16 +552,11 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
           if (this.head) {
             ydir.fromArray(parser.getVectorValue(movedata.up_dir, [0,1,0]));
             zdir.fromArray(parser.getVectorValue(movedata.view_dir, [0,0,1]));
-            xdir.crossVectors(zdir, ydir);
-
-            xdir.crossVectors(zdir, ydir).normalize();
-            zdir.crossVectors(xdir, ydir).normalize();
-
-            matrix.makeBasis(xdir, ydir, zdir);
+            matrix.lookAt(origin, zdir, ydir);
             q1.setFromRotationMatrix(matrix);
-            this.head.properties.orientation.copy(this.orientation).invert().multiply(q1);
+            this.head.properties.orientation.copy(this.orientation).invert().multiply(q1).multiply(flip);
             if (this.body && this.headaction) {
-              this.setHeadOrientation(this.head.orientation);
+              this.setHeadOrientation(this.head.orientation, true);
             }
             if (movedata.head_pos && this.face) {
               var headpos = this.head.properties.position;
@@ -863,7 +860,7 @@ return;
         let track = headaction._clip.tracks[0];
         if (track) {
           track.values[0] = orientation.x * (invert ? -1 : 1);
-          track.values[1] = orientation.y * (invert ? -1 : 1);
+          track.values[1] = orientation.y * (invert ? 1 : -1);
           track.values[2] = orientation.z * (invert ? -1 : 1);
           track.values[3] = orientation.w; // * (invert ? -1 : 1);
         }
@@ -880,7 +877,7 @@ return;
         this.blinktimer = setTimeout(() => {
           this.blinktimer = false;
           this.blink();
-        }, 2500 + Math.random() * 8500);
+        }, 250 + Math.random() * 10000);
       }
     }
     this.setSpeakingVolume = function(volume) {

package/scripts/janusplayer.js

@@ -303,10 +303,10 @@ document.body.dispatchEvent(click);
           }
         }
         if (this.ghost && !this.decouplehead) {
-          this.ghost.setHeadOrientation(this.head.orientation, true);
+          this.ghost.setHeadOrientation(_tmpquat.multiplyQuaternions(this.neck.orientation._target, this.head.orientation._target), true);
           if (this.ghost._target.head) {
             //this.ghost._target.face.position.copy(this.head.position);
-            this.ghost.head.orientation.copy(this.head.orientation).invert();
+            this.ghost.head.orientation.copy(this.head.orientation).multiply(this.neck.orientation);;
           }
         }
       }
@@ -510,10 +510,10 @@ document.body.dispatchEvent(click);
               avatar_src: 'data:text/plain,' + encodeURIComponent(avatar),
               showlabel: false,
               //pos: V(0, -this.fatness, 0),
-              rotation: V(0, 180, 0),
+              //rotation: V(0, 180, 0),
               renderorder: 101,
             });
-            this.ghost.orientation.set(0,1,0,0);
+            //this.ghost.orientation.set(0,1,0,0);
           }
         });
         this.visible = true;
@@ -702,7 +702,7 @@ document.body.dispatchEvent(click);
         avatar_src: 'data:text/plain,' + encodeURIComponent(avatar),
         showlabel: false,
         //pos: V(0, -this.fatness, 0),
-        rotation: V(0, 180, 0),
+        //rotation: V(0, 180, 0),
         renderorder: 101,
       });
 
@@ -1004,6 +1004,7 @@ document.body.dispatchEvent(click);
     }
     this.handleTouchStart = function(ev) {
       //if (!this.enabled) return;
+      if (!room.pointerlock) return;
       let halfscreenwidth = window.innerWidth / 2;
       this.enabled = true;
       for (let i = 0; i < ev.changedTouches.length; i++) {
@@ -1021,6 +1022,7 @@ document.body.dispatchEvent(click);
       this.cancelTouchMovement(ev);
     }
     this.handleTouchMove = function(ev) {
+      if (!room.pointerlock) return;
       if (ev.defaultPrevented) return;
       //if (ev.touches.length == 1) {
         //var touchindex = this.touchindex;
@@ -1106,7 +1108,34 @@ document.body.dispatchEvent(click);
     this.dispatchEvent = function(event, target) {
       let firedev = elation.events.fire(event);
     }
-    this.lookAt = function(other, up) {
+    this.lookAt = function(other, up, turnhead) {
+      if (!up) up = new THREE.Vector3(0,1,0);
+      if (!other) return;
+      var otherpos = false;
+      if (other.properties && other.properties.position) {
+        otherpos = other.localToWorld(new THREE.Vector3());
+      } else if (other instanceof THREE.Object3D) {
+        if (!otherpos) otherpos = new THREE.Vector3();
+        other.getWorldPosition(otherpos);
+      } else if (other instanceof THREE.Vector3) {
+        otherpos = other.clone();
+      }
+      var thispos = this.head.localToWorld(new THREE.Vector3());
+
+      if (otherpos) {
+        var dir = thispos.clone().sub(otherpos).normalize();
+        if (turnhead) {
+          this.head.properties.orientation.setFromEuler(new THREE.Euler(-Math.asin(dir.y), Math.atan2(dir.x, dir.z), 0, 'XYZ'));
+        } else {
+          this.properties.orientation.setFromEuler(new THREE.Euler(0, Math.atan2(dir.x, dir.z), 0));
+          this.head.properties.orientation.setFromEuler(new THREE.Euler(-Math.asin(dir.y), 0, 0));
+        }
+        this.refresh();
+        room.refresh();
+        this.engine.systems.render.setdirty();
+      }
+    }
+    this.turnTo = function(other, up) {
       if (!up) up = new THREE.Vector3(0,1,0);
       var otherpos = false;
       if (other.properties && other.properties.position) {
@@ -1119,7 +1148,7 @@ document.body.dispatchEvent(click);
       if (otherpos) {
         var dir = thispos.clone().sub(otherpos).normalize();
         this.properties.orientation.setFromEuler(new THREE.Euler(0, Math.atan2(dir.x, dir.z), 0));
-        this.head.properties.orientation.setFromEuler(new THREE.Euler(-Math.asin(dir.y), 0, 0));
+        //this.head.properties.orientation.setFromEuler(new THREE.Euler(-Math.asin(dir.y), 0, 0));
         this.refresh();
         room.refresh();
         this.engine.systems.render.setdirty();
@@ -1223,19 +1252,28 @@ document.body.dispatchEvent(click);
         this.camera.orientation.setFromEuler(new THREE.Euler(0, this.cameraangle, 0));
       }
     }
+    this.hasAnimation = function(anim_id) {
+      return anim_id in this.ghost.body.animations;
+    }
+    this.getAnimation = function(anim_id) {
+      if (this.hasAnimation(anim_id)) {
+        return this.ghost.body.animations[anim_id];
+      }
+      return false;
+    }
     this.setAnimationSequence = function(sequence) {
-      let t = 0;
-      let currentanimation = this.defaultanimation;
-      let body = this.ghost.body;
-      sequence.forEach(clipname => {
-        let anim = body.animations[clipname];
+      let cumtime = 0;
+      for (let i = 0; i < sequence.length; i++) {
+        let anim_id = sequence[i];
+        let anim = this.getAnimation(anim_id);
+        anim.loop = (i == sequence.length - 1 ? THREE.LoopRepeat : THREE.LoopOnce);
+        anim.clampWhenFinished = !(i == sequence.length - 1);
         if (anim) {
           let clip = anim.getClip();
-          setTimeout(() => { this.defaultanimation = clipname; }, t * 1000);
-          t += clip.duration;
+          setTimeout(() => this.defaultanimation = anim_id, cumtime * 1000);
+          cumtime += clip.duration;
         }
-      });
-      setTimeout(() => { this.defaultanimation = currentanimation; }, t * 1000);
+      }
     }
   }, elation.engine.things.player);
 });

package/scripts/janusweb.js

@@ -62,6 +62,7 @@ elation.require([
         url:            { type: 'string', default: false },
         homepage:       { type: 'string', default: "" },
         corsproxy:      { type: 'string', default: '' },
+        showui:         { type: 'boolean', default: true },
         shownavigation: { type: 'boolean', default: true },
         showchat:       { type: 'boolean', default: true },
         datapath:       { type: 'string', default: '/media/janusweb' },

package/scripts/multiplayermanager.js

@@ -177,7 +177,7 @@ console.log('[MultiplayerManager] set active room:', room, this.activeroom);
         tmpMat.makeRotationFromQuaternion(player.properties.orientation);
         tmpMat.extractBasis(tmpVecX, tmpVecY, tmpVecZ);
         var ret = {
-          dir: (-tmpVecZ.x) + ' ' + (-tmpVecZ.y) + ' ' + (-tmpVecZ.z),
+          dir: (tmpVecZ.x) + ' ' + (tmpVecZ.y) + ' ' + (tmpVecZ.z),
           up_dir: '0 1 0',
           //view_dir: this.tmpVecZ.toArray().join(' ')
         };

package/scripts/object.js

@@ -1126,10 +1126,9 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       if (this.objects['3d']) {
         this.traverseObjects(n => {
           if (n.material) {
-            n.material.color = this.properties.color;
-
             var m = (elation.utils.isArray(n.material) ? n.material : [n.material]);
             for (var i = 0; i < m.length; i++) {
+              m[i].color = this.properties.color;
               m[i].opacity = this.opacity;
               m[i].transparent = (textureasset && textureasset.hasalpha) || m[i].opacity < 1;
               if (m[i].transparent) {

package/scripts/remoteplayer.js

@@ -41,12 +41,14 @@ elation.component.add('engine.things.remoteplayer', function() {
       'janus': this.janus,
       'room': this.room
     });
+/*
     this.head = this.spawn('janusbase', this.properties.player_name + '_head', {
       'position': [0,1.4,0],
       'parent': this,
       'janus': this.janus,
       'room': this.room
     });
+*/
 /*
     this.face = this.head.spawn('maskgenerator', this.properties.player_name + '_mask', {
       'seed': this.properties.player_name,

package/scripts/sound.js

@@ -17,7 +17,8 @@ elation.require(['janusweb.janusbase'], function() {
         starttime: { type: 'float', default: 0.0, set: this.updateSound },
         distancemodel: { type: 'string', default: 'inverse', set: this.updateSound },
         rolloff: { type: 'float', default: 1.0, set: this.updateSound },
-        rect: { type: 'string', set: this.updateSound }
+        rect: { type: 'string', set: this.updateSound },
+        stream: { type: 'boolean', default: false}
       });
       this.playing = false;
       //Object.defineProperty(this, 'playing', { get: function() { if (this.audio) return this.audio.isPlaying; return false; } });
@@ -86,22 +87,37 @@ elation.require(['janusweb.janusbase'], function() {
         this.audio.onEnded = elation.bind(this, this.updatePlaying);
         elation.events.add(this.audio.buffer, 'playing,pause,ended', elation.bind(this, this.updatePlaying));
         if (src) {
-          if (soundcache[src]) {
-            this.audio.setBuffer(soundcache[src]);
-            if (this.auto_play || this.singleshot || this.playStarted) {
-              this.play();
+          if (this.stream) {
+            let audio = new Audio(src);
+            audio.src = src;
+            let source = audio.captureStream();
+            audio.addEventListener('playing', ev => {
+              this.audio.setMediaStreamSource(source);
+              console.log('ahh', audio, this.audio);
+              this.audio.connect();
+              //this.audio.play();
+            });
+            if (this.auto_play || sound.auto_play) {
+              audio.play();
             }
           } else {
-            var loader = new THREE.AudioLoader();
-            loader.load(src, elation.bind(this, function(buffer) {
-              if (buffer) {
-                soundcache[src] = buffer;
-                this.audio.setBuffer(buffer);
-                if ((this.auto_play || this.singleshot || this.playStarted) && this.room == this.janus.currentroom) {
-                  this.play();
-                }
+            if (soundcache[src]) {
+              this.audio.setBuffer(soundcache[src]);
+              if (this.auto_play || this.singleshot || this.playStarted) {
+                this.play();
               }
-            }));
+            } else {
+              var loader = new THREE.AudioLoader();
+              loader.load(src, elation.bind(this, function(buffer) {
+                if (buffer) {
+                  soundcache[src] = buffer;
+                  this.audio.setBuffer(buffer);
+                  if ((this.auto_play || this.singleshot || this.playStarted) && this.room == this.janus.currentroom) {
+                    this.play();
+                  }
+                }
+              }));
+            }
           }
         } else if (sound && sound.buffer) {
           soundcache[src] = sound.buffer;