Merge pull request #1121 from mozilla/three-103

Three 103 + ImageBitmapLoader and texture cleanup after GPU upload

src/components/camera-tool.js

@@ -105,7 +105,7 @@ AFRAME.registerComponent("camera-tool", {
       this.el.setObject3D("mesh", mesh);
 
       const width = 0.28;
-      const geometry = new THREE.PlaneGeometry(width, width / this.camera.aspect);
+      const geometry = new THREE.PlaneBufferGeometry(width, width / this.camera.aspect);
 
       if (enableCameraViewport) {
         const screen = new THREE.Mesh(geometry, material);
@@ -255,7 +255,9 @@ AFRAME.registerComponent("camera-tool", {
         delete sceneEl.object3D.onAfterRender;
         renderer.vr.enabled = false;
 
-        renderer.render(sceneEl.object3D, this.camera, this.renderTarget, true);
+        renderer.setRenderTarget(this.renderTarget);
+        renderer.render(sceneEl.object3D, this.camera);
+        renderer.setRenderTarget(null);
 
         renderer.vr.enabled = tmpVRFlag;
         sceneEl.object3D.onAfterRender = tmpOnAfterRender;

src/components/gltf-model-plus.js

@@ -261,16 +261,7 @@ async function loadGLTF(src, contentType, preferredTechnique, onProgress) {
     }
   }
 
-  const gltf = await new Promise((resolve, reject) =>
-    parser.parse(
-      (scene, scenes, cameras, animations, json) => {
-        resolve({ scene, scenes, cameras, animations, json });
-      },
-      e => {
-        reject(e);
-      }
-    )
-  );
+  const gltf = await new Promise(parser.parse.bind(parser));
 
   gltf.scene.traverse(object => {
     // GLTFLoader sets matrixAutoUpdate on animated objects, we want to keep the defaults

src/components/media-views.js

@@ -593,7 +593,7 @@ AFRAME.registerComponent("media-video", {
         // invert the geometry on the x-axis so that all of the faces point inward
         geometry.scale(-1, 1, 1);
       } else {
-        geometry = new THREE.PlaneGeometry();
+        geometry = new THREE.PlaneBufferGeometry();
         material.side = THREE.DoubleSide;
       }
 
@@ -758,7 +758,7 @@ AFRAME.registerComponent("media-image", {
         // invert the geometry on the x-axis so that all of the faces point inward
         geometry.scale(-1, 1, 1);
       } else {
-        geometry = new THREE.PlaneGeometry();
+        geometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1, texture.flipY);
         material.side = THREE.DoubleSide;
       }
 

src/components/teleporter.js

@@ -325,6 +325,9 @@ AFRAME.registerComponent("teleporter", {
     // Cylinder.
     this.cylinder = document.createElement("a-entity");
     this.cylinder.setAttribute("position", { x: 0, y: data.hitCylinderHeight / 2, z: 0 });
+    if (window.createImageBitmap !== undefined) {
+      this.cylinder.setAttribute("rotation", { x: 0, y: 0, z: 180 });
+    }
     this.cylinder.setAttribute("geometry", {
       primitive: "cylinder",
       segmentsHeight: 1,

src/react-components/chat-message.js

@@ -189,7 +189,7 @@ export async function createInWorldLogMessage({ name, type, body }) {
     material.generateMipmaps = false;
     material.needsUpdate = true;
 
-    const geometry = new THREE.PlaneGeometry();
+    const geometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1, texture.flipY);
     const mesh = new THREE.Mesh(geometry, material);
     meshEntity.setObject3D("mesh", mesh);
     meshEntity.meshMaterial = material;