feat: clean FCamera options in 3d

Author: Gugustinette

apps/playground-3d/src/main.ts

@@ -124,7 +124,7 @@ import MyCustomCube from './classes/MyCustomCube'
   scene.addComponent(character)
 
   // Attach a camera to the character
-  scene.camera = new FGameCamera(character)
+  scene.camera = new FGameCamera({ target: character })
 
   /**
    * Create other objects

docs/getting-started/introduction.md

@@ -33,6 +33,6 @@ Moreover, we would really appreciate your feedback, so if you have any suggestio
 
 We are doing our best to make a great tool so developers can create amazing experiences, and your feedback is really important to us.
 
-Ready to take off ? You can go the next section to learn how to get started with Fibbo.
+Ready to take off ? You can go to the next section to learn how to get started with Fibbo.
 
 Have fun !

packages/2d/src/cameras/FCamera.ts

@@ -1,9 +1,8 @@
 import { FCamera as FCameraCore } from '@fibbojs/core'
-import type * as PIXI from 'pixi.js'
 import type { FScene } from '../FScene'
 
 export interface FCameraOptions {
-  position?: PIXI.PointData
+  position?: { x: number, y: number }
 }
 
 /**
@@ -21,11 +20,11 @@ export abstract class FCamera extends FCameraCore {
    */
   scene: FScene
 
-  // Transform
+  // FTransform isn't used as a 2D camera doesn't need scale or rotation
   /**
    * Position of the camera.
    */
-  position: PIXI.PointData
+  position: { x: number, y: number }
 
   /**
    * @description Create a new 2D camera.

packages/3d/src/FScene.ts

@@ -1,5 +1,4 @@
 import * as THREE from 'three'
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import { FScene as FSceneCore } from '@fibbojs/core'
 import type RAPIER from '@dimforge/rapier3d'
 import type { FComponent } from './FComponent'
@@ -60,7 +59,6 @@ export class FScene extends FSceneCore {
   declare scene: THREE.Scene
   declare renderer: THREE.WebGLRenderer
   declare camera: FCamera
-  declare controls?: OrbitControls
   // Rapier
   gravity: { x: number, y: number, z: number }
   declare world: RAPIER.World
@@ -107,9 +105,6 @@ export class FScene extends FSceneCore {
     this.renderer.setSize((window as any).innerWidth, (window as any).innerHeight)
     // Create a default camera
     this.camera = new FFixedCamera()
-    this.camera.position.set(5, 5, 5)
-    // Orbit controls for the camera
-    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
 
     // Add renderer to DOM
     this.__DOM_NODE__.appendChild(this.renderer.domElement)

packages/3d/src/cameras/FAttachedCamera.ts

@@ -1,7 +1,12 @@
 import * as THREE from 'three'
 import type { FComponent } from '../FComponent'
+import type { FCameraOptions } from './FCamera'
 import { FCamera } from './FCamera'
 
+export interface FAttachedCameraOptions extends FCameraOptions {
+  target: FComponent
+}
+
 /**
  * @description A camera that can be attached to a FComponent.
  * @category Camera

packages/3d/src/cameras/FCamera.ts

@@ -1,5 +1,9 @@
 import * as THREE from 'three'
 import type { FCamera as FCameraCore } from '@fibbojs/core'
+import type { FTransformOptions } from '../FTransform'
+import { FTransform } from '../FTransform'
+
+export interface FCameraOptions extends FTransformOptions {}
 
 /**
  * @description The base class for cameras in Fibbo.
@@ -15,8 +19,36 @@ export abstract class FCamera extends THREE.PerspectiveCamera implements FCamera
   declare public __ID__: number
   public __CALLBACKS_ON_COLLISION__: { [key: string]: (() => void)[] } = {}
 
-  constructor() {
+  /**
+   * Transform of the camera.
+   */
+  transform: FTransform
+
+  constructor(options?: FCameraOptions) {
     super(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+
+    // Define default options
+    const DEFAULT_OPTIONS = {
+      position: { x: 5, y: 5, z: 5 },
+      rotation: { x: 0, y: 0.7853981634, z: 0 },
+    }
+    // Apply default options
+    options = { ...DEFAULT_OPTIONS, ...options }
+    // Validate options
+    if (!options.position || (!options.rotation && !options.rotationDegree))
+      throw new Error('FibboError: FCamera requires position and rotation options')
+
+    // Store transform
+    this.transform = new FTransform({
+      position: options.position,
+      rotation: options.rotation,
+      rotationDegree: options.rotationDegree,
+    })
+
+    // Set the position
+    this.position.set(this.transform.position.x, this.transform.position.y, this.transform.position.z)
+    // Set the rotation
+    this.rotation.set(this.transform.rotation.x, this.transform.rotation.y, this.transform.rotation.z)
   }
 
   abstract onFrame(_delta: number): void

packages/3d/src/cameras/FFixedCamera.ts

@@ -1,3 +1,4 @@
+import type { FCameraOptions } from './FCamera'
 import { FCamera } from './FCamera'
 
 /**
@@ -15,8 +16,8 @@ import { FCamera } from './FCamera'
  * ```
  */
 export class FFixedCamera extends FCamera {
-  constructor() {
-    super()
+  constructor(options?: FCameraOptions) {
+    super(options)
   }
 
   onFrame(_delta: number): void {

packages/3d/src/cameras/FGameCamera.ts

@@ -1,6 +1,6 @@
 import type * as THREE from 'three'
-import type { FComponent } from '../FComponent'
 import { FOrbitCamera } from './FOrbitCamera'
+import type { FAttachedCameraOptions } from './FAttachedCamera'
 
 /**
  * @description A camera that can be attached to a FComponent and orbits around it in a more game-like way.
@@ -26,11 +26,11 @@ export class FGameCamera extends FOrbitCamera {
   lastMouseMoveEvent: MouseEvent | undefined
 
   /**
-   * @param attachedComponent Component that the camera is attached to
+   * @param options Options for the camera.
    */
-  constructor(attachedComponent: FComponent) {
-    super(attachedComponent)
-    this.previousModelPosition = attachedComponent.transform.position.clone()
+  constructor(options: FAttachedCameraOptions) {
+    super(options)
+    this.previousModelPosition = options.target.transform.position.clone()
     this.setPosition(0, 5, 5)
 
     this.controls.enableDamping = true
@@ -40,7 +40,7 @@ export class FGameCamera extends FOrbitCamera {
      * Add event listeners
      */
     // Request pointer lock when the canvas is clicked
-    attachedComponent.scene.renderer.domElement.addEventListener('click', () => {
+    this.attachedComponent.scene.renderer.domElement.addEventListener('click', () => {
       this.attachedComponent.scene.renderer.domElement.requestPointerLock()
     })
     // Update the pointer lock flag when the pointer lock state changes

packages/3d/src/cameras/FOrbitCamera.ts

@@ -1,6 +1,7 @@
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import type { FComponent } from '../FComponent'
 import { FCamera } from './FCamera'
+import type { FAttachedCameraOptions } from './FAttachedCamera'
 
 /**
  * @description A camera that can be attached to a FComponent and orbits around it.
@@ -24,14 +25,14 @@ export class FOrbitCamera extends FCamera {
   controls: OrbitControls
 
   /**
-   * @param attachedComponent Component that the camera is attached to
+   * @param options Options for the camera.
    */
-  constructor(attachedComponent: FComponent) {
-    super()
-    this.attachedComponent = attachedComponent
+  constructor(options: FAttachedCameraOptions) {
+    super(options)
+    this.attachedComponent = options.target
 
     // Create orbit controls
-    this.controls = new OrbitControls(this, attachedComponent.scene.renderer.domElement)
+    this.controls = new OrbitControls(this, this.attachedComponent.scene.renderer.domElement)
   }
 
   onFrame(_delta: number): void {

packages/3d/src/cameras/FPointerLockCamera.ts

@@ -1,6 +1,7 @@
 import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'
 import type { FComponent } from '../FComponent'
 import { FCamera } from './FCamera'
+import type { FAttachedCameraOptions } from './FAttachedCamera'
 
 /**
  * @description A camera that can be attached to a FComponent and orbits around it.
@@ -24,19 +25,19 @@ export class FPointerLockCamera extends FCamera {
   controls: PointerLockControls
 
   /**
-   * @param attachedComponent Component that the camera is attached to
+   * @param options Options for the camera.
    */
-  constructor(attachedComponent: FComponent) {
-    super()
-    this.attachedComponent = attachedComponent
+  constructor(options: FAttachedCameraOptions) {
+    super(options)
+    this.attachedComponent = options.target
 
     // Create Pointer Lock controls
-    this.controls = new PointerLockControls(this, attachedComponent.scene.renderer.domElement)
+    this.controls = new PointerLockControls(this, this.attachedComponent.scene.renderer.domElement)
 
-    attachedComponent.scene.scene.add(this.controls.getObject())
+    this.attachedComponent.scene.scene.add(this.controls.getObject())
 
     // Lock controls when clicking on the renderer
-    attachedComponent.scene.renderer.domElement.addEventListener('click', () => {
+    this.attachedComponent.scene.renderer.domElement.addEventListener('click', () => {
       this.controls.lock()
     })
   }