Twist logic

examples/plane/project-matrix.bat

@@ -0,0 +1,4 @@
+set main=./examples/plane/project-matrix.js
+cd ..
+cd ..
+npm run watch

examples/plane/project-matrix.js

@@ -0,0 +1,47 @@
+import phaser from 'phaser/src/phaser.js';
+import PerspectiveImagePlugin from '../../plugins/perspectiveimage-plugin.js';
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() {
+        this.load.image('card', 'assets/images/card2.png');
+    }
+
+    create() {
+        var card = this.add.plane(400, 300, 'card').setScale(0.7)
+        // var card = this.add.rexPerspectiveImage(400, 300, 'card', null, { hideCCW: false }).setScale(0.7);
+        card.projectionMatrix
+            .translateXYZ(0, 2, 0)
+            .rotateX(Phaser.Math.DegToRad(-45));
+    }
+
+    update() {
+    }
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+    backgroundColor: 0x33333,
+    plugins: {
+        global: [{
+            key: 'rexPerspectiveImage',
+            plugin: PerspectiveImagePlugin,
+            start: true
+        }]
+    }
+};
+
+var game = new Phaser.Game(config);

plugins/gameobjects/mesh/perspective/image/Image.js

@@ -7,9 +7,6 @@ const GenerateGridVerts = Phaser.Geom.Mesh.GenerateGridVerts;
 const RadToDeg = Phaser.Math.RadToDeg;
 const DegToRad = Phaser.Math.DegToRad;
 
-const FOV = 45;
-const PanZ = 1 + (1 / Math.sin(DegToRad(FOV)));
-
 class Image extends MeshBase {
     constructor(scene, x, y, key, frame, config) {
         if (IsPlainObject(x)) {
@@ -25,7 +22,6 @@ class Image extends MeshBase {
         this.setSizeToFrame();
 
         this.resetPerspective();
-        this.panZ(PanZ);
         this.hideCCW = GetValue(config, 'hideCCW', true);
 
         var gridWidth = GetValue(config, 'gridWidth', 0);
@@ -54,7 +50,12 @@ class Image extends MeshBase {
     }
 
     resetPerspective() {
-        this.setPerspective(this.width, this.height, FOV);
+        this.setPerspective(this.width, this.height);
+
+        var vFOV = this.fov * (Math.PI / 180);
+        this.viewPosition.z = (this.height / this.frame.height) / (Math.tan(vFOV / 2));
+        this.dirtyCache[10] = 1;
+
         return this;
     }