feat: enable adding scenes to given DOM elements

packages/2d/src/FScene2d.ts

@@ -8,6 +8,11 @@ import { FSprite } from './sprite/FSprite'
 import type { FCamera2d } from './cameras/FCamera2d'
 import { FFreeCamera } from './cameras/FFreeCamera'
 
+export interface FScene2dOptions {
+  gravity?: { x: number, y: number, z: number }
+  domNode?: HTMLElement
+}
+
 /**
  * @description A scene which contains the models, the Three.js scene and the Rapier world.
  * @category Core
@@ -31,19 +36,23 @@ export class FScene2d extends FScene {
   declare components: FComponent2d[]
   // Camera
   declare __CAMERA__: FCamera2d
+  /**
+   * DOM element that the renderer will be appended to
+   */
+  __DOM_NODE__: HTMLElement
   // Pixi.js
   PIXI: typeof PIXI = PIXI
   app: PIXI.Application
   declare viewport: Viewport
   // Rapier
-  gravity: { x: number, y: number, z: number } = { x: 0, y: -9.81, z: 0 }
+  gravity: { x: number, y: number, z: number }
   declare world: World
   declare eventQueue: RAPIER.EventQueue
   __RAPIER_TO_COMPONENT__: Map<number, FComponent2d> = new Map()
   // onReadyCallbacks
   public onReadyCallbacks: (() => void)[] = []
 
-  constructor(_options: object = {}) {
+  constructor(options?: FScene2dOptions) {
     super()
 
     // Verify window and document are available
@@ -52,6 +61,22 @@ export class FScene2d extends FScene {
 
     // Create a new PIXI application
     this.app = new PIXI.Application()
+
+    // Define default values for the options
+    const DEFAULT_OPTIONS = {
+      gravity: { x: 0, y: -9.81, z: 0 },
+      domNode: document.body,
+    }
+    // Apply default options
+    options = { ...DEFAULT_OPTIONS, ...options }
+    // Validate the options
+    if (options.domNode === undefined || options.gravity === undefined)
+      throw new Error('The gravity option must be defined')
+
+    // Store the DOM node
+    this.__DOM_NODE__ = options.domNode
+    // Store the gravity
+    this.gravity = options.gravity
   }
 
   /**
@@ -69,7 +94,7 @@ export class FScene2d extends FScene {
     const SCREEN_WIDTH = window.innerWidth
 
     // The application will create a canvas element that can then inserted into the DOM
-    document.body.appendChild(this.app.canvas)
+    this.__DOM_NODE__.appendChild(this.app.canvas)
 
     // Resize the renderer
     this.app.renderer.resize(SCREEN_WIDTH, SCREEN_HEIGHT)

packages/2d/src/index.ts

@@ -22,3 +22,4 @@ export { FSprite } from './sprite/FSprite'
 export { F2dShapes } from './types/F2dShapes'
 export type { FComponent2dOptions } from './FComponent2d'
 export type { FCamera2dOptions } from './cameras/FCamera2d'
+export type { FScene2dOptions } from './FScene2d'

packages/3d/src/FScene3d.ts

@@ -7,6 +7,11 @@ import { FGLTF } from './model/FGLTF'
 import type { FCamera3d } from './cameras/FCamera3d'
 import { FFixedCamera } from './cameras/FFixedCamera'
 
+export interface FScene3dOptions {
+  gravity?: { x: number, y: number, z: number }
+  domNode?: HTMLElement
+}
+
 /**
  * @description A scene which contains the models, the Three.js scene and the Rapier world.
  * @category Core
@@ -41,24 +46,44 @@ import { FFixedCamera } from './cameras/FFixedCamera'
 export class FScene3d extends FScene {
   // Components can be declared as it will be initialized by the parent class
   declare components: FComponent3d[]
+  /**
+   * DOM element that the renderer will be appended to
+   */
+  __DOM_NODE__: HTMLElement
   // Three.js
   THREE: typeof THREE = THREE
   declare scene: THREE.Scene
   declare renderer: THREE.WebGLRenderer
   declare camera: FCamera3d
   declare controls?: OrbitControls
   // Rapier
-  gravity: { x: number, y: number, z: number } = { x: 0, y: -9.81, z: 0 }
+  gravity: { x: number, y: number, z: number }
   declare world: RAPIER.World
   declare eventQueue: RAPIER.EventQueue
   __RAPIER_TO_COMPONENT__: Map<number, FComponent3d> = new Map()
 
-  constructor(_options: object = {}) {
+  constructor(options?: FScene3dOptions) {
     super()
 
     // Verify window and document are available
     if (typeof window === 'undefined' || typeof document === 'undefined')
       throw new Error('FScene must be instantiated in a browser environment')
+
+    // Define default values for the options
+    const DEFAULT_OPTIONS = {
+      gravity: { x: 0, y: -9.81, z: 0 },
+      domNode: document.body,
+    }
+    // Apply default options
+    options = { ...DEFAULT_OPTIONS, ...options }
+    // Validate the options
+    if (options.domNode === undefined || options.gravity === undefined)
+      throw new Error('The gravity option must be defined')
+
+    // Store the DOM node
+    this.__DOM_NODE__ = options.domNode
+    // Store the gravity
+    this.gravity = options.gravity
   }
 
   init() {
@@ -78,7 +103,7 @@ export class FScene3d extends FScene {
     this.scene.add(light)
 
     // Add renderer to DOM
-    document.body.appendChild(this.renderer.domElement)
+    this.__DOM_NODE__.appendChild(this.renderer.domElement)
 
     // onFrame loop
     this.onFrame((delta) => {

packages/3d/src/index.ts

@@ -22,3 +22,4 @@ export { FOrbitCamera } from './cameras/FOrbitCamera'
 // Types
 export { F3dShapes } from './types/F3dShapes'
 export type { FComponent3dOptions } from './FComponent3d'
+export type { FScene3dOptions } from './FScene3d'