fix: add compatibility up to ThreeJS r127

packages/troika-3d/src/facade/Scene3DFacade.js

@@ -21,8 +21,13 @@ class Scene3DFacade extends Object3DFacade {
   initThreeObject() {
     const scene = new Scene()
     // We always manually update world matrices when needed - see Object3DFacade.updateMatrices() -
-    // so the additional autoUpdate pass done by threejs before render is not needed:
-    scene.autoUpdate = false
+    // so the additional auto-update pass done by threejs before render is not needed.
+    // The flag was renamed autoUpdate->matrixWorldAutoUpdate in r144
+    if ('matrixWorldAutoUpdate' in scene) {
+      scene.matrixWorldAutoUpdate = false
+    } else {
+      scene.autoUpdate = false
+    }
     return scene
   }
 

packages/troika-3d/src/facade/WorldTextureProvider.js

@@ -27,16 +27,17 @@ const refireableEvents = [
  * will work like any other facade config, and you'll need to set its `facade` property
  * to use either `World2DFacade` or `World3DFacade` as appropriate.
  *
+ * To use the generated texture, access `this.worldTexture`.
+ *
  * @param {Facade} WrappedFacadeClass
  * @return {Facade}
  */
 export function makeWorldTextureProvider(WrappedFacadeClass) {
 
   return class WorldTextureProvider extends WrappedFacadeClass {
     constructor(parent) {
-      const texture = new CanvasTexture() //no canvas yet, will be added in first afterUpdate()
-      super(parent, texture)
-      this.worldTexture = texture
+      super(parent)
+      this.worldTexture = new CanvasTexture() //no canvas yet, will be added in first afterUpdate()
 
       // Wrap pointer events to both work as normal outer world events and also refire
       // in the inner world at their point on the surface texture
@@ -74,13 +75,11 @@ export function makeWorldTextureProvider(WrappedFacadeClass) {
           innerWorld.destructor()
         }
         if (newWorldConfig) {
-          // Replace the old canvas with a new one each time, since browsers will throw errors when
-          // changing canvas context types/options
           this.worldTexture.dispose()
           const canvas = document.createElement('canvas')
-          canvas.width = canvas.height = 2
-          this.worldTexture.image = canvas
-
+          canvas.width = newWorldConfig.width
+          canvas.height = newWorldConfig.height
+          this.worldTexture = new CanvasTexture(canvas)
           innerWorld = this._worldFacade = new newWorldConfig.facade(canvas)
 
           // Trigger texture update whenever the inner world is rerendered
@@ -94,7 +93,7 @@ export function makeWorldTextureProvider(WrappedFacadeClass) {
       // Update the inner world
       if (innerWorld) {
         innerWorld.renderingScheduler = this._getOuterWorld().renderingScheduler
-        utils.assign(innerWorld, newWorldConfig)
+        utils.assign(innerWorld, newWorldConfig, {pixelRatio: 1})
         innerWorld.afterUpdate()
       }
 

packages/troika-3d/src/facade/instancing/InstancingManager.js

@@ -294,6 +294,7 @@ class InstancingManager extends Group3DFacade {
             // normally do for MeshDepthMaterial but it's needed by the instancing shader code. It does
             // for ShaderMaterials so we pretend to be one.
             depthMaterial.isShaderMaterial = true
+            depthMaterial.uniformsGroups = depthMaterial.uniformsGroups || [];
           }
           return depthMaterial
         }
@@ -306,6 +307,7 @@ class InstancingManager extends Group3DFacade {
             // normally do for MeshDistanceMaterial but it's needed by the instancing shader code. It does
             // for ShaderMaterials so we pretend to be one.
             distanceMaterial.isShaderMaterial = true
+            distanceMaterial.uniformsGroups = distanceMaterial.uniformsGroups || [];
 
             // Additionally, WebGLShadowMap.render() rotates a single camera 6 times per object, which fails
             // to trigger the code in WebGLRenderer.setProgram() that updates the viewMatrix uniform for

packages/troika-examples/citygrid/Host.js

@@ -1,4 +1,4 @@
-import {BoxGeometry, MeshLambertMaterial, Color, Mesh, BufferGeometry, BufferAttribute} from 'three'
+import {BoxGeometry, MeshLambertMaterial, Color, Mesh } from 'three'
 import {Object3DFacade} from 'troika-3d'
 
 /*

packages/troika-examples/curve-anim/Curve.js

@@ -1,6 +1,4 @@
 import {
-  BufferAttribute,
-  BufferGeometry,
   Color,
   Mesh,
   ShaderMaterial,

packages/troika-examples/inception/InceptionExample.jsx

@@ -12,30 +12,36 @@ const sphereGeom = new SphereGeometry(0.5, 32, 32)
 const boxGeom = new BoxGeometry(1, 1, 1)
 
 class WorldTexturedSphere extends Object3DFacade {
-  constructor(parent, subWorldTexture) {
+  constructor(parent) {
     super(parent, new Mesh(
       sphereGeom,
       new MeshStandardMaterial({
-        map: subWorldTexture,
         roughness: 0.5,
         metalness: 0.5
       })
     ))
   }
+  afterUpdate () {
+    this.threeObject.material.map = this.worldTexture
+    super.afterUpdate()
+  }
 }
 WorldTexturedSphere = makeWorldTextureProvider(WorldTexturedSphere)
 
 class WorldTexturedBox extends Object3DFacade {
-  constructor(parent, subWorldTexture) {
+  constructor(parent) {
     super(parent, new Mesh(
       boxGeom,
       new MeshStandardMaterial({
-        map: subWorldTexture,
         roughness: 0.5,
         metalness: 0.5
       })
     ))
   }
+  afterUpdate () {
+    this.threeObject.material.map = this.worldTexture
+    super.afterUpdate()
+  }
 }
 WorldTexturedBox = makeWorldTextureProvider(WorldTexturedBox)
 

packages/troika-examples/lod/Sphere.js

@@ -30,7 +30,7 @@ const material = new MeshPhongMaterial({
 
 export default class Sphere extends Object3DFacade {
   initThreeObject() {
-    return new Mesh(LOD_GEOMETRIES[0], material.clone())
+    return new Mesh(LOD_GEOMETRIES[0].geometry, material.clone())
   }
 
   afterUpdate() {

packages/troika-examples/package.json

@@ -21,7 +21,7 @@
     "react": "^16.5.2",
     "react-dat-gui": "^4.0.0",
     "react-dom": "^16.5.2",
-    "three": "^0.125.0",
+    "three": "^0.147.0",
     "three-instanced-uniforms-mesh": "^0.46.0",
     "three-line-2d": "^1.1.6",
     "troika-2d": "^0.46.0",

packages/troika-examples/ui2/LineGraph.js

@@ -1,6 +1,4 @@
 import {
-  BufferAttribute,
-  BufferGeometry,
   Color,
   Mesh,
   ShaderMaterial,

packages/troika-xr/src/facade/WorldXRFacade.js

@@ -180,8 +180,10 @@ function parseFramebufferScaleFactor(value, xrSession) {
 function bindFramebuffer(renderer, framebuffer) {
   if (renderer.setFramebuffer) { //pre-r127
     renderer.setFramebuffer(framebuffer)
-  } else {
+  } else if (renderer.state.bindXRFramebuffer) {
     renderer.state.bindXRFramebuffer(framebuffer)
+  } else {
+    renderer.state.bindFramebuffer(framebuffer)
   }
 }