janusweb 1.5.41 → 1.5.43

package/scripts/object.js

@@ -51,6 +51,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         shadow: { type: 'boolean', default: true, set: this.updateMaterial },
         shadow_receive: { type: 'boolean', default: true, set: this.updateMaterial, comment: 'Receive shadows from self and other objects' },
         shadow_cast: { type: 'boolean', default: true, set: this.updateMaterial, comment: 'Cast shadows onto self and other objects' },
+        shadow_side: { type: 'string', default: '', set: this.updateMaterial, comment: 'Cast shadows onto front, back, both, or auto (empty)' },
         wireframe: { type: 'boolean', default: false, set: this.updateMaterial, comment: 'Wireframe rendering' },
         fog: { type: 'boolean', default: true, set: this.updateMaterial, comment: 'Object is affected by fog' },
         lights: { type: 'boolean', default: false, comment: 'Load lights from model' },
@@ -58,7 +59,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         cull_face: { type: 'string', default: 'back', set: this.updateMaterial, comment: 'Hide face sides (back, front, or none)' },
         blend_src: { type: 'string', set: this.updateMaterial, comment: 'Blend mode (source)' },
         blend_dest: { type: 'string', set: this.updateMaterial, comment: 'Blend mode (destination)' },
-        blend_mode: { type: 'string', default: 'normal', set: this.updateMaterial, comment: 'Blend mode' },
+        blend_mode: { type: 'string', default: null, set: this.updateMaterial, comment: 'Blend mode' },
         depth_write: { type: 'boolean', default: null, set: this.updateMaterial },
         depth_test: { type: 'boolean', default: null, set: this.updateMaterial },
         depth_offset: { type: 'float', default: null, set: this.updateMaterial },
@@ -81,6 +82,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         emissive_intensity: { type: 'float', default: 1, set: this.updateMaterial, comment: 'Intensity of material emissive color' },
         roughness: { type: 'float', default: null, min: 0, max: 1, set: this.updateMaterial, comment: 'Material roughness value' },
         metalness: { type: 'float', default: null, set: this.updateMaterial, comment: 'Material metalness value' },
+        transmission: { type: 'float', default: 0, set: this.updateMaterial, comment: 'Material transmission value' },
         usevertexcolors: { type: 'boolean', default: true, set: this.updateMaterial },
         gain: { type: 'float', default: 1.0, set: this.updateAudioNodes },
         onloadstart: { type: 'callback' },
@@ -113,19 +115,23 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           if (asset.loaded) {
             setTimeout(elation.bind(this, this.handleLoad), 0);
           } else {
+            //this.loadingindicator = this.createObject('object', {});
+/*
             this.loadingindicator = this.createObject('particle', {
               col: 'green',
               scale: V(.025),
               vel: V(-1, 0, -1),
               accel: V(0, -5, 0),
               rand_vel: V(2, 2, 2),
-              count: 250,
-              rate: 500,
+              count: 25,
+              rate: 50,
               duration: .5,
               collidable: false,
               collision_trigger: true,
               loop: true,
             });
+*/
+            //elation.events.add(asset, 'asset_load_queued,asset_load_start,asset_load_progress,asset_load_processing,asset_load_complete', ev => { console.log(ev.type, this, ev); });
             elation.events.add(asset, 'asset_load_complete', elation.bind(this, this.handleLoad));
             elation.events.add(asset, 'asset_load_progress', (ev) => { this.dispatchEvent({type: 'loadprogress', data: ev.data}); });
           }
@@ -191,6 +197,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           if (this.animations && this.anim_id && this.animations[this.anim_id]) {
             console.log('start animation', this);
             this.animations[this.anim_id].play();
+            this.activeanimation = this.animations[this.anim_id];
           }
         }
         if (this.loadingindicator) {
@@ -203,12 +210,14 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
     }
     this.updateVideo = function() {
       if (!this.modelasset) return;
+      if (this.videotexture) {
+        if (this.videotexture.image) {
+          this.videotexture.image.pause();
+        }
+      }
       if (!this.videoasset || this.videoasset.name != this.video_id) {
         if (this.video_id && this.video_id != '' && !this.image_id) {
           this.loadVideo(this.video_id);
-          if (this.modelasset && texture) {
-            this.assignTextureParameters(texture, this.modelasset, this.videoasset);
-          }
         } else {
           this.videotexture = null;
         }
@@ -245,9 +254,11 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         // Refresh this object whenever the video has a new frame for us to display
         texture.onUpdate = (e) => this.refresh();
 
-        if (videoasset.auto_play) {
+        if (videoasset.auto_play && texture.image) {
           texture.image.addEventListener('canplaythrough', function() {
-            texture.image.play();
+            if (texture.image) {
+              texture.image.play();
+            }
           });
         }
 
@@ -259,6 +270,9 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
 
         elation.events.add(this, 'click', elation.bind(this, this.handleVideoClick));
         this.room.videos[videoid] = this;
+        if (this.modelasset && texture) {
+          this.assignTextureParameters(texture, this.modelasset, videoasset);
+        }
       }
     }
     this.updateWebsurface = function() {
@@ -295,6 +309,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       this.websurface = this.spawn('januswebsurface', null, {janus: this.janus, room: this.room, websurface_id: this.websurface_id});
       elation.events.add(this, 'mouseover', elation.bind(this.websurface, this.websurface.hover));
       elation.events.add(this, 'mouseout', elation.bind(this.websurface, this.websurface.unhover));
+      elation.events.add(this, 'click', elation.bind(this.websurface, this.websurface.click));
       this.replaceWebsurfaceMaterial();
       this.websurface.start();
     }
@@ -356,6 +371,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           blend_src = false,
           blend_dest = false,
           side = this.sidemap[this.properties.cull_face],
+          shadowside = this.sidemap[this.properties.shadow_side || this.properties.cull_face],
           textureasset,
           lightmaptextureasset,
           emissivetextureasset,
@@ -415,7 +431,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
 
           //texture.offset.copy(this.texture_offset);
           //texture.repeat.copy(this.texture_repeat);
-          //texture.rotation = this.texture_rotation * THREE.Math.DEG2RAD;
+          //texture.rotation = this.texture_rotation * THREE.MathUtils.DEG2RAD;
 
           if (texture) {
             this.assignTextureParameters(texture, modelasset, textureasset);
@@ -433,7 +449,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         }
       }
       if (normal_image_id) {
-        let normaltextureasset = this.getAsset('image', normal_image_id, true);
+        let normaltextureasset = this.getAsset('image', normal_image_id, false);
+        if (!normaltextureasset) { // no image found, try video
+          normaltextureasset = this.getAsset('video', normal_image_id);
+        }
         if (normaltextureasset) {
           textureNormal = normaltextureasset.getInstance();
           if (!this.assetloadhandlers[textureNormal.uuid]) {
@@ -631,6 +650,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           shadermaterial = shader.getInstance();
           shadermaterial.uniforms = this.room.parseShaderUniforms(shader.uniforms);
           shadermaterial.side = this.sidemap[this.properties.cull_face];
+          shadermaterial.shadowSide = shadowside
           shadermaterial.receiveShadow = this.shadow && this.shadow_receive;
           shadermaterial.castShadow = this.shadow && this.shadow_cast;
           shadermaterial.renderOrder = this.renderorder;
@@ -764,9 +784,8 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
             }
             if (m.normalMap) {
               var imagesrc = m.normalMap.sourceFile;
-              var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false});
+              var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false, srgb: false});
               if (asset) {
-                m.normalMap = asset.getInstance();
                 m.normalMap = asset.getInstance();
                 if (!this.assetloadhandlers[m.normalMap.uuid]) {
                   this.assetloadhandlers[m.normalMap.uuid] = true;
@@ -782,9 +801,8 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               m.bumpScale = this.bumpmap_scale;
             } else if (m.bumpMap) {
               var imagesrc = m.bumpMap.sourceFile;
-              var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false});
+              var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false, srgb: false});
               if (asset) {
-                m.normalMap = asset.getInstance();
                 m.normalMap = asset.getInstance();
                 if (!this.assetloadhandlers[m.normalMap.uuid]) {
                   this.assetloadhandlers[m.normalMap.uuid] = true;
@@ -792,7 +810,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
                     m.normalMap = ev.data; this.refresh();
                     m.normalMap.offset.copy(this.texture_offset);
                     m.normalMap.repeat.copy(this.texture_repeat);
-                    m.normalMap.rotation = this.texture_rotation * THREE.Math.DEG2RAD;
+                    m.normalMap.rotation = this.texture_rotation * THREE.MathUtils.DEG2RAD;
                   }));
                   elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
                 }
@@ -802,7 +820,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               m.normalMap = textureNormal;
             } else if (m.normalMap) {
               var imagesrc = m.normalMap.sourceFile;
-              var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false});
+              var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false, srgb: false});
               if (asset) {
                 m.normalMap = asset.getInstance();
                 if (!this.assetloadhandlers[m.normalMap.uuid]) {
@@ -816,11 +834,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
             if (textureLightmap && textureLightmap.image) {
               if (lightmaptextureasset.loaded) {
                 m.lightMap = textureLightmap; 
-              } else {
-              }
-              if (!this.assetloadhandlers[m.lightMap.uuid]) {
-                this.assetloadhandlers[m.lightMap.uuid] = true;
-                elation.events.add(textureLightmap, 'asset_update', elation.bind(m, function(ev) { m.lightMap = ev.data; this.refresh(); }));
+                if (!this.assetloadhandlers[m.lightMap.uuid]) {
+                  this.assetloadhandlers[m.lightMap.uuid] = true;
+                  elation.events.add(textureLightmap, 'asset_update', elation.bind(m, function(ev) { m.lightMap = ev.data; this.refresh(); }));
+                }
               }
             } else if (m.lightMap) {
               var imagesrc = m.lightMap.sourceFile;
@@ -843,8 +860,11 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
                 m.emissiveMap = textureEmissive;
                 textureEmissive.encoding = THREE.sRGBEncoding;
                 m.emissive = new THREE.Color(0xffffff);
-              } else {
+              } else if (m.emissiveMap) {
+                m.emissiveMap.encoding = THREE.sRGBEncoding;
+              } else if (this.emissive) {
                 //m.emissive = this.emissive.clone();
+                m.emissive.copy(this.emissive)
               }
               m.emissiveIntensity = this.emissive_intensity;
             }
@@ -862,13 +882,18 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
             } else if (this.metalness !== null) {
               m.metalness = this.metalness;
             }
+            if (this.transmission !== null) {
+              m.transmission = this.transmission;
+            }
 
-            if (this.isUsingPBR()) {
+            if (this.isUsingPBR() && !this.isUsingToonShader()) {
               m.envMap = this.getEnvmap();
+              m.envMapIntensity = room.skybox_intensity;
             }
 
             //m.roughness = 0.75;
             m.side = side;
+            m.shadowSide = shadowside;
 
             if (blend_src || blend_dest) {
               if (blend_src) m.blendSrc = blend_src;
@@ -880,8 +905,8 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               if (!(this.blend_src == 'src_alpha' && this.blend_dest == 'one_minus_src_alpha')) {
                 m.transparent = true;
               }
-            } else {
-              m.blending = THREE.NormalBlending;
+            } else if (this.blend_mode) {
+              m.blending = this.blendModeMap[this.blend_mode];
             }
             if (this.depth_write !== null) {
               m.depthWrite = this.depth_write;
@@ -924,9 +949,9 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
             //m.needsUpdate = true;
             m.skinning = useSkinning;
             if (useVertexColors) {
-              m.vertexColors = THREE.VertexColors;
+              m.vertexColors = true;
             } else {
-              m.vertexColors = THREE.NoColors;
+              m.vertexColors = false
             }
             m.fog = this.fog;
             m.wireframe = this.wireframe;
@@ -973,9 +998,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         var m = materials;
       } else if (oldmat instanceof THREE.PointsMaterial ||
                  oldmat instanceof THREE.LineBasicMaterial ||
-                 oldmat instanceof THREE.LineDashedMaterial
+                 oldmat instanceof THREE.LineDashedMaterial ||
+                 oldmat instanceof THREE.ShaderMaterial
                 ) {
-        var m = oldmat.clone();
+        var m = oldmat;
       } else {
         var m = this.allocateMaterial();
         m.dithering = true;
@@ -1001,6 +1027,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               m.emissive.copy(this.emissive);
             }
           }
+          if (oldmat.emissiveIntensity !== undefined) m.emissiveIntensity = oldmat.emissiveIntensity;
         }
 
         m.lightMap = oldmat.lightMap;
@@ -1009,7 +1036,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         }
         m.transmission = oldmat.transmission;
         m.transmissionMap = oldmat.transmissionMap;
-        m.transparent = m.opacity < 1;
+        m.transparent = oldmat.transparent || m.opacity < 1;
         m.alphaTest = oldmat.alphaTest;
         m.skinning = oldmat.skinning;
 
@@ -1019,14 +1046,17 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         if (oldmat.roughnessMap !== undefined) m.roughnessMap = oldmat.roughnessMap;
         if (oldmat.clearcoat !== undefined) m.clearcoat =  oldmat.clearcoat;
         if (oldmat.clearcoatMap !== undefined) m.clearcoatMap = oldmat.clearcoatMap;
-        if (oldmat.clearcoatRoughness !== undefined) m.clearcoatcoughness = oldmat.clearcoatRoughness;
+        if (oldmat.clearcoatRoughness !== undefined) m.clearcoatRoughness = oldmat.clearcoatRoughness;
         if (oldmat.clearcoatRoughnessMap !== undefined) m.clearcoatRoughnessMap = oldmat.clearcoatRoughnessMap;
         if (oldmat.clearcoatNormalMap !== undefined) m.clearcoatNormalMap = oldmat.clearcoatNormalMap;
         if (oldmat.clearcoatNormalScale !== undefined) m.clearcoatNormalScale = oldmat.clearcoatNormalScale;
         if (oldmat.attenuationTint !== undefined) m.attenuationTint = oldmat.attenuationTint;
+        if (oldmat.attenuationColor !== undefined) m.attenuationColor = oldmat.attenuationColor;
         if (oldmat.attenuationDistance !== undefined) m.attenuationDistance = oldmat.attenuationDistance;
         if (oldmat.thickness !== undefined) m.thickness = oldmat.thickness;
         if (oldmat.thicknessMap !== undefined) m.thicknessMap = oldmat.thicknessMap;
+        if (oldmat.transmission !== undefined) m.transmission = oldmat.transmission;
+        if (oldmat.transmissionMap !== undefined) m.transmissionMap = oldmat.transmissionMap;
 
         //m.reflectivity = (oldmat.reflectivity !== undefined ? oldmat.reflectivity : .5);
 
@@ -1060,7 +1090,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               shader.vertexShader = shader.vertexShader.replace('#include <' + oldchunkname + '>', '#include <' + newchunkname + '>');
               shader.fragmentShader = shader.fragmentShader.replace('#include <' + oldchunkname + '>', '#include <' + newchunkname + '>');
             }
-          }
+          };
         }
       }
       return m;
@@ -1072,6 +1102,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           let materials = (elation.utils.isArray(n.material) ? n.material : [n.material]);
           materials.forEach(m => {
             m.envMap = envMap;
+            m.envMapIntensity = room.skybox_intensity;
           });
         }
       });
@@ -1108,10 +1139,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       if (this.shader_id) {
       } else if (!this.lighting) {
         return new THREE.MeshBasicMaterial();
-      } else if (this.isUsingPBR()) {
-        return new THREE.MeshPhysicalMaterial();
       } else if (this.isUsingToonShader()) {
         return new THREE.MeshToonMaterial();
+      } else if (this.isUsingPBR()) {
+        return new THREE.MeshPhysicalMaterial();
       }
       return new THREE.MeshPhongMaterial();
     }
@@ -1141,7 +1172,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       texture.generateMipmaps = linear && !(texture instanceof THREE.VideoTexture || texture instanceof THREE.SBSVideoTexture) && (textureasset && textureasset.detectImageType() != 'basis');
       texture.offset.copy(this.texture_offset);
       texture.repeat.copy(this.texture_repeat);
-      texture.rotation = this.texture_rotation * THREE.Math.DEG2RAD;
+      texture.rotation = this.texture_rotation * THREE.MathUtils.DEG2RAD;
       if (texture.repeat.x > 1 || texture.repeat.y > 1) {
         texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
       }
@@ -1159,12 +1190,12 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               if (m.map) {
                 m.map.offset.copy(this.texture_offset);
                 m.map.repeat.copy(this.texture_repeat);
-                m.map.rotation = this.texture_rotation * THREE.Math.DEG2RAD;
+                m.map.rotation = this.texture_rotation * THREE.MathUtils.DEG2RAD;
               }
               if (m.normalMap) {
                 m.normalMap.offset.copy(this.texture_offset);
                 m.normalMap.repeat.copy(this.texture_repeat);
-                m.normalMap.rotation = this.texture_rotation * THREE.Math.DEG2RAD;
+                m.normalMap.rotation = this.texture_rotation * THREE.MathUtils.DEG2RAD;
               }
               // TODO - all maps which use uv layer 0 should be changed here
             });
@@ -1259,6 +1290,8 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
                   if (strerr.indexOf('NotSupportedError') == 0 && this.hls !== false) {
                     console.log('Attempting to init hls', this.videoasset)
                     this.videoasset.initHLS();
+                  } else {
+                    console.error(e);
                   }
                 });
             }
@@ -1364,7 +1397,9 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
     }
     this.setupOnBeforeRenderListener = function(type, args, arg2, arg3) {
       if (this.onbeforerender) {
-        this.objects['3d'].onBeforeRender = this.onbeforerender;
+        elation.events.add(this, 'load', ev => {
+          this.objects['3d'].onBeforeRenderx = this.onbeforerender;
+        });
       }
     }
     this.updateAudioNodes = function() {
@@ -1407,6 +1442,14 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       }
 
     }
+    this.cloneAnimations = function(object) {
+      if (object.animations && this.animationmixer) {
+        for (let k in object.animations) {
+          let action = this.animationmixer.clipAction(object.animations[k]._clip);
+          this.animations[k] = action;
+        }
+      }
+    }
     this.getProxyObject = function(classdef) {
       if (!this._proxyobject) {
         this._proxyobject = elation.engine.things.janusobject.extendclass.getProxyObject.call(this, classdef);
@@ -1431,6 +1474,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           shadow: [ 'property', 'shadow' ],
           shadow_receive: [ 'property', 'shadow_receive' ],
           shadow_cast: [ 'property', 'shadow_cast' ],
+          shadow_side: [ 'property', 'shadow_side' ],
           cull_face: [ 'property', 'cull_face' ],
           blend_src: [ 'property', 'blend_src' ],
           blend_dest: [ 'property', 'blend_dest' ],
@@ -1448,6 +1492,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           emissive_intensity: [ 'property', 'emissive_intensity'],
           roughness: [ 'property', 'roughness'],
           metalness: [ 'property', 'metalness'],
+          transmission: [ 'property', 'transmission'],
           usevertexcolors: [ 'property', 'usevertexcolors'],
 
           texture_offset: [ 'property', 'texture_offset'],

package/scripts/parts.js

@@ -35,7 +35,7 @@ elation.require([], function() {
           engine: this._object.engine,
           properties: {
             object: object,
-            rotation: [object.rotation.x * THREE.Math.RAD2DEG, object.rotation.y * THREE.Math.RAD2DEG, object.rotation.z * THREE.Math.RAD2DEG], 
+            rotation: [object.rotation.x * THREE.MathUtils.RAD2DEG, object.rotation.y * THREE.MathUtils.RAD2DEG, object.rotation.z * THREE.MathUtils.RAD2DEG], 
             room: rootobject.room
           }
         });

package/scripts/portal.js

@@ -501,11 +501,11 @@ elation.require(['janusweb.janusbase'], function() {
       var offset = ((thickness / 2) / this.properties.scale.z) * 2;
       var box;
       if (this.round) {
-        box = new THREE.CircleBufferGeometry(.5, 64);
+        box = new THREE.CircleGeometry(.5, 64);
         box.applyMatrix4(new THREE.Matrix4().makeScale(this.size.x, this.size.y, thickness));
         box.applyMatrix4(new THREE.Matrix4().makeTranslation(0, this.size.y/2, .02));
       } else {
-        box = new THREE.BoxBufferGeometry(this.size.x, this.size.y, thickness);
+        box = new THREE.BoxGeometry(this.size.x, this.size.y, thickness);
         box.applyMatrix4(new THREE.Matrix4().makeTranslation(0, this.size.y/2, thickness + .02));
       }
 
@@ -536,27 +536,31 @@ elation.require(['janusweb.janusbase'], function() {
         var group = new THREE.Mesh(box, mat);
         group.renderOrder = 10;
         group.castShadow = true;
+        let framegeo;
 
         if (this.draw_glow) {
           var framewidth = .05,
               frameheight = .05,
               framedepth = .01 / this.properties.size.z;
-          var framegeo = new THREE.BufferGeometry();
-          var framepart = new THREE.BoxBufferGeometry(this.size.x,frameheight,framedepth);
+          //var framegeo = new THREE.BufferGeometry();
+          var framepart = new THREE.BoxGeometry(this.size.x,frameheight,framedepth);
           var framemat4 = new THREE.Matrix4();
 
 
           framemat4.makeTranslation(0,this.size.y - frameheight/2,framedepth + offset);
-          framegeo.merge(framepart, framemat4);
+          let framepart1 = framepart.clone().applyMatrix4(framemat4);
+
           framemat4.makeTranslation(0,frameheight/2,framedepth + offset);
-          framegeo.merge(framepart, framemat4);
+          let framepart2 = framepart.clone().applyMatrix4(framemat4);
 
-          framepart = new THREE.BoxBufferGeometry(framewidth,this.size.y,framedepth);
+          framepart = new THREE.BoxGeometry(framewidth,this.size.y,framedepth);
 
           framemat4.makeTranslation(this.size.x / 2 - framewidth/2,this.size.y / 2,framedepth + offset);
-          framegeo.merge(framepart, framemat4);
+          let framepart3 = framepart.clone().applyMatrix4(framemat4);
           framemat4.makeTranslation(-this.size.x / 2 + framewidth/2,this.size.y / 2,framedepth + offset);
-          framegeo.merge(framepart, framemat4);
+          let framepart4 = framepart.clone().applyMatrix4(framemat4);
+
+          framegeo = THREE.BufferGeometryUtils.mergeBufferGeometries([framepart1, framepart2, framepart3, framepart4]);
 
           var framemat = new THREE.MeshPhongMaterial({color: 0x0000cc, emissive: 0x222222});
           var frame = new THREE.Mesh(framegeo, framemat);

package/scripts/remoteplayer.js

@@ -113,8 +113,9 @@ elation.component.add('engine.things.remoteplayer', function() {
     this.mouth = this.createObject('sound', {
       pos: V(0, 0, 0),
       distancemodel: 'exponential',
-      dist: 8,
-      rolloff: 0.75,
+      dist: 1,
+      gain: 2,
+      rolloff: .4,
     });
     this.head.add(this.mouth._target);