Expose camera component's horizontal-fov attribute (#73)

Author: willeastcott

README.md

@@ -145,6 +145,7 @@ The `pc-camera` tag is used to define a camera component. It must be a direct ch
 | `flip-faces` | Boolean attribute. Controls whether the camera flips faces. If unspecified, faces are not flipped. |
 | `fov` | The field of view of the camera. If unspecified, `45` is used. |
 | `frustum-culling` | Boolean attribute. Controls whether the camera uses frustum culling. If unspecified, frustum culling is used. |
+| `horizontal-fov` | Valueless attribute. If present, the camera uses a horizontal field of view. If unspecified, the camera uses a vertical field of view. |
 | `near-clip` | The near clipping plane of the camera. If unspecified, `0.1` is used. |
 | `orthographic` | Valueless attribute. If present, the camera uses an orthographic projection. If unspecified, the camera uses a perspective projection. |
 | `ortho-height` | The height of the orthographic projection. If unspecified, `10` is used. |

src/components/camera-component.ts

@@ -41,6 +41,8 @@ class CameraComponentElement extends ComponentElement {
 
     private _gamma: 'none' | 'srgb' = 'srgb';
 
+    private _horizontalFov = false;
+
     private _nearClip = 0.1;
 
     private _orthographic = false;
@@ -72,6 +74,7 @@ class CameraComponentElement extends ComponentElement {
             fov: this._fov,
             frustumCulling: this._frustumCulling,
             gammaCorrection: this._gamma === 'srgb' ? GAMMA_SRGB : GAMMA_NONE,
+            horizontalFov: this._horizontalFov,
             nearClip: this._nearClip,
             orthographic: this._orthographic,
             orthoHeight: this._orthoHeight,
@@ -301,6 +304,26 @@ class CameraComponentElement extends ComponentElement {
         return this._gamma;
     }
 
+    /**
+     * Sets whether the camera's field of view (fov) is horizontal or vertical. Defaults to false
+     * (meaning it is vertical be default).
+     * @param value - Whether the camera's field of view is horizontal.
+     */
+    set horizontalFov(value: boolean) {
+        this._horizontalFov = value;
+        if (this.component) {
+            this.component.horizontalFov = value;
+        }
+    }
+
+    /**
+     * Gets whether the camera's field of view (fov) is horizontal or vertical.
+     * @returns Whether the camera's field of view is horizontal.
+     */
+    get horizontalFov(): boolean {
+        return this._horizontalFov;
+    }
+
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -447,6 +470,7 @@ class CameraComponentElement extends ComponentElement {
             'fov',
             'frustum-culling',
             'gamma',
+            'horizontal-fov',
             'near-clip',
             'orthographic',
             'ortho-height',
@@ -491,6 +515,9 @@ class CameraComponentElement extends ComponentElement {
             case 'gamma':
                 this.gamma = newValue as 'none' | 'srgb';
                 break;
+            case 'horizontal-fov':
+                this.horizontalFov = this.hasAttribute('horizontal-fov');
+                break;
             case 'near-clip':
                 this.nearClip = parseFloat(newValue);
                 break;