architwin 1.0.59 → 1.0.60

package/lib/loaders/planeGeometry.d.ts

@@ -12,6 +12,10 @@ export declare class Plane {
         visible: boolean;
         aspectRatio: number;
         clickFlag: number;
+        viewport: {
+            width: number;
+            height: number;
+        };
     };
     playbackState: string;
     audio: string;
@@ -45,8 +49,6 @@ export declare class Plane {
     renderPauseButtonModel(): void;
     renderMuteModel(): void;
     renderUnmuteModel(): void;
-    createBufferSliders(): void;
-    createTrackSlider(): void;
     renderNextModel(): void;
     renderPrevModel(): void;
     createMediaButtonTextures(): void;

package/lib/loaders/planeGeometry.js

@@ -22,7 +22,11 @@ export class Plane {
             autoplay: false,
             visible: true,
             aspectRatio: 1,
-            clickFlag: 0
+            clickFlag: 0,
+            viewport: {
+                width: 0,
+                height: 0
+            }
         };
         this.playbackState = 'pause';
         this.audio = 'unmuted';
@@ -110,6 +114,8 @@ export class Plane {
                         const context = canvas.getContext('2d');
                         canvas.width = viewport.width;
                         canvas.height = viewport.height;
+                        this.inputs.viewport.width = viewport.width * 0.003;
+                        this.inputs.viewport.height = viewport.height * 0.003;
                         // Render the page to the canvas
                         const renderContext = {
                             canvasContext: context,
@@ -173,7 +179,15 @@ export class Plane {
                 default:
                     this.texture = new THREE.TextureLoader().load(this.inputs.url);
             }
-            this.mesh = new THREE.Mesh(new THREE.PlaneGeometry(1.0, 1.0), new THREE.MeshBasicMaterial({
+            // Create plane geometry
+            let geometry;
+            if (this.inputs.type == 'pdf') {
+                geometry = new THREE.PlaneGeometry(this.inputs.viewport.width, this.inputs.viewport.height);
+            }
+            else {
+                geometry = new THREE.PlaneGeometry(1.0, 1.0);
+            }
+            this.mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
                 map: this.texture,
                 transparent: true,
                 needsUpdate: true,
@@ -188,13 +202,15 @@ export class Plane {
                     color: 0xFFFFFF
                 }));
                 this.mesh.add(mesh);
+            }
+            else if (this.inputs.type == 'pdf') {
                 this.createArrowButtonTextures();
                 //Create next button
                 this.renderNextModel();
                 //Create previous button
                 this.renderPrevModel();
             }
-            if (this.inputs.type == 'video') {
+            else if (this.inputs.type == 'video') {
                 this.createMediaButtonTextures();
                 //Create play button
                 this.renderPlayButtonModel();
@@ -270,7 +286,7 @@ export class Plane {
                     this.inputs.clickFlag++;
                 }
                 else if (data.collider.name == 'prevBtn') {
-                    this.inputs.clickFlag--;
+                    this.inputs.clickFlag = Math.abs(--this.inputs.clickFlag);
                 }
             }
             else if (this.inputs.type == 'image') {
@@ -405,31 +421,63 @@ export class Plane {
     renderNextModel() {
         const THREE = this.context.three;
         const nextButtonGeometry = new THREE.PlaneGeometry(0.2, 0.2);
-        nextButtonGeometry.translate(-0.4, -0.4, 0.01);
+        const x = (this.inputs.viewport.width / 2) * 0.4;
+        const y = this.inputs.viewport.height * -0.46;
+        nextButtonGeometry.translate(x, y, 0.01);
         this.nextButtonModel = new THREE.Mesh(nextButtonGeometry, new THREE.MeshBasicMaterial({
             map: this.nextBtnTexture,
             transparent: true,
             needsUpdate: true,
             alphaTest: 0.5
         }));
-        this.nextButtonModel.visible = false;
+        this.nextButtonModel.visible = true;
         this.nextButtonModel.name = "nextBtn";
         this.mesh.add(this.nextButtonModel);
     }
     renderPrevModel() {
         const THREE = this.context.three;
         const prevButtonGeometry = new THREE.PlaneGeometry(0.2, 0.2);
-        prevButtonGeometry.translate(0.4, -0.4, 0.01);
+        const x = (this.inputs.viewport.width / 2) * -0.4;
+        const y = this.inputs.viewport.height * -0.46;
+        prevButtonGeometry.translate(x, y, 0.01);
         this.prevButtonModel = new THREE.Mesh(prevButtonGeometry, new THREE.MeshBasicMaterial({
             map: this.prevBtnTexture,
             transparent: true,
             needsUpdate: true,
             alphaTest: 0.5
         }));
-        this.prevButtonModel.visible = false;
+        this.prevButtonModel.visible = true;
         this.prevButtonModel.name = "prevBtn";
         this.mesh.add(this.prevButtonModel);
     }
+    createBufferSliders() {
+        const THREE = this.context.three;
+        //Buffer slider
+        const bufferSliderGeometry = new THREE.PlaneGeometry(0.9, 0.03);
+        bufferSliderGeometry.translate(0, -0.3, 0.01);
+        this.bufferSliderModel = new THREE.Mesh(bufferSliderGeometry, new THREE.MeshBasicMaterial({
+            color: 0xc0c0c0,
+            transparent: true,
+            needsUpdate: true,
+            side: THREE.DoubleSide
+        }));
+        this.bufferSliderModel.name = 'bufferSlider';
+        this.mesh.add(this.bufferSliderModel);
+    }
+    createTrackSlider() {
+        const THREE = this.context.three;
+        //Track slider
+        const trackSliderGeometry = new THREE.PlaneGeometry(0.5, 0.03);
+        trackSliderGeometry.translate(-0.2, -0.3, 0.01);
+        this.trackSliderModel = new THREE.Mesh(trackSliderGeometry, new THREE.MeshBasicMaterial({
+            color: 0xff0000,
+            transparent: true,
+            needsUpdate: true,
+            side: THREE.DoubleSide
+        }));
+        this.bufferSliderModel.name = 'trackSlider';
+        this.mesh.add(this.trackSliderModel);
+    }
     createMediaButtonTextures() {
         //Generate textures for each icon
         const THREE = this.context.three;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",