@benjos/create-boilerplate 1.4.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@benjos/create-boilerplate",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "CLI to scaffold Three.js projects with framework support",
     "type": "module",
     "bin": {

package/template-react/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "template-react",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "template-react",
-            "version": "1.4.0",
+            "version": "1.4.1",
             "dependencies": {
                 "@dimforge/rapier3d": "^0.19.3",
                 "gsap": "^3.14.2",

package/template-react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "template-react",
     "private": true,
-    "version": "1.4.0",
+    "version": "1.4.1",
     "type": "module",
     "scripts": {
         "dev": "vite",

package/template-vanilla/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "template-vanilla",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "template-vanilla",
-            "version": "1.4.0",
+            "version": "1.4.1",
             "dependencies": {
                 "@benjos/cookware": "^1.0.4",
                 "@benjos/spices": "^1.0.1",

package/template-vanilla/package.json

@@ -1,7 +1,7 @@
 {
     "name": "template-vanilla",
     "private": true,
-    "version": "1.4.0",
+    "version": "1.4.1",
     "type": "module",
     "scripts": {
         "dev": "vite",

package/template-vanilla/src/experiences/Experience.ts

@@ -4,7 +4,6 @@ import InitCommand from './commands/InitCommand';
 import MainHTML from './engines/htmls/MainHTML';
 import MainThree from './engines/threes/MainThree';
 import LoaderManager from './managers/LoaderManager';
-import LoaderThree from './engines/threes/LoaderThree';
 
 class Experience {
     private _isInitialized: boolean = false;
@@ -15,9 +14,8 @@ class Experience {
 
         InitCommand.init();
         MainHTML.init();
-        LoaderThree.init();
         MainThree.init();
-        void LoaderManager.loadAllAssets();
+        LoaderManager.loadAllAssets();
     }
 }
 

package/template-vanilla/src/experiences/cameras/threes/DebugThreeCameraController.ts

@@ -3,7 +3,7 @@ import { KeyboardConstant } from '@benjos/spices';
 import { Vector3 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/Addons.js';
 import { CameraId } from '../../constants/experiences/CameraId';
-import MainThree from '../../engines/threes/MainThree';
+import MainThreeApp from '../../engines/threes/app/MainThreeApp';
 import ThreeRaycasterManager from '../../managers/threes/ThreeRaycasterManager';
 import { ThreeCameraOptions, ThreeCameraType } from '../../types/cameraTypes';
 import ThreeCameraControllerBase from './bases/ThreeCameraControllerBase';
@@ -38,14 +38,14 @@ export default class DebugThreeCameraController extends ThreeCameraControllerBas
     }
 
     private _setControls(): void {
-        this._controls = new OrbitControls(this._camera, MainThree.domElementContainer);
+        this._controls = new OrbitControls(this._camera, MainThreeApp.domElementContainer);
         this._controls.enableDamping = true;
         this._controls.dampingFactor = DebugThreeCameraController._CONTROLS_DAMPING_FACTOR;
     }
 
     private readonly _onMouseDown = (): void => {
         if (DomKeyboardManager.isKeyDown(DebugThreeCameraController._CONTROLS_CENTER_KEY)) {
-            const intersect = ThreeRaycasterManager.castFromCameraToPointer(MainThree.scene.children);
+            const intersect = ThreeRaycasterManager.castFromCameraToPointer(MainThreeApp.scene.children);
             if (intersect.length > 0) {
                 this._controls.target.copy(intersect[0].point);
                 this._controls.update();

package/template-vanilla/src/experiences/cameras/threes/LoaderThreeCameraController.ts

@@ -1,6 +1,6 @@
 import { Vector3 } from 'three';
 import { CameraId } from '../../constants/experiences/CameraId';
-import LoaderThree from '../../engines/threes/LoaderThree';
+import LoaderThreeApp from '../../engines/threes/app/LoaderThreeApp';
 import { ThreeCameraOptions, ThreeCameraType } from '../../types/cameraTypes';
 import ThreeCameraControllerBase from './bases/ThreeCameraControllerBase';
 
@@ -15,7 +15,7 @@ export default class LoaderThreeCameraController extends ThreeCameraControllerBa
     private static readonly _DEFAULT_CONTAINER_POSITION: Vector3 = new Vector3(0, 0, 0);
 
     constructor() {
-        super(CameraId.THREE_LOADER, LoaderThreeCameraController._LOADER_CAMERA_OPTIONS, LoaderThree.scene);
+        super(CameraId.THREE_LOADER, LoaderThreeCameraController._LOADER_CAMERA_OPTIONS, LoaderThreeApp.scene);
         this._container.position.copy(LoaderThreeCameraController._DEFAULT_CONTAINER_POSITION);
     }
 

package/template-vanilla/src/experiences/cameras/threes/bases/ThreeCameraControllerBase.ts

@@ -1,7 +1,7 @@
 import { DomResizeManager } from '@benjos/cookware';
 import { Object3D, OrthographicCamera, PerspectiveCamera, Scene } from 'three';
 import type { CameraId } from '../../../constants/experiences/CameraId';
-import MainThree from '../../../engines/threes/MainThree';
+import MainThreeApp from '../../../engines/threes/app/MainThreeApp';
 import { ThreeCameraOptions, ThreeCameraType, ThreeControls } from '../../../types/cameraTypes';
 
 export default abstract class ThreeCameraControllerBase<T extends ThreeControls = ThreeControls> extends Object3D {
@@ -21,7 +21,7 @@ export default abstract class ThreeCameraControllerBase<T extends ThreeControls
     constructor(
         cameraId: CameraId,
         cameraOptions: ThreeCameraOptions = ThreeCameraControllerBase._DEFAULT_CAMERA_OPTIONS,
-        scene: Scene = MainThree.scene
+        scene: Scene = MainThreeApp.scene
     ) {
         super();
         this._cameraId = cameraId;

package/template-vanilla/src/experiences/engines/threes/MainThree.ts

@@ -1,96 +1,11 @@
-import { DomKeyboardManager, DomUtils } from '@benjos/cookware';
-import { KeyboardConstant } from '@benjos/spices';
-import { MeshStandardMaterial, Scene } from 'three';
-import DebugThreeCameraController from '../../cameras/threes/DebugThreeCameraController';
-import MainThreeCameraController from '../../cameras/threes/MainThreeCameraController';
-import { CameraId } from '../../constants/experiences/CameraId';
-import DebugManager from '../../managers/DebugManager';
-import ThreeCameraControllerManager from '../../managers/threes/ThreeCameraControllerManager';
-import Renderer from '../../renderers/threes/Renderer';
-import WorldThreeView from '../../views/threes/worlds/WorldThreeView';
-import ThreeBase from './bases/ThreeBase';
+import LoaderThreeApp from "./app/LoaderThreeApp";
+import MainThreeApp from "./app/MainThreeApp";
 
-class MainThree extends ThreeBase {
-    private static readonly _DEBUG_WIREFRAME_MATERIAL_COLOR: number = 0x3f79f3;
-    private static readonly _TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS: string[] = [
-        KeyboardConstant.CODES.SHIFT_LEFT,
-        KeyboardConstant.CODES.KEY_C,
-    ];
-    private static readonly _TOGGLE_WIREFRAME_KEYS: string[] = [
-        KeyboardConstant.CODES.SHIFT_LEFT,
-        KeyboardConstant.CODES.KEY_W,
-    ];
-
-    declare private _debugWireframeMaterial: MeshStandardMaterial;
-
-    constructor() {
-        super(DomUtils.GetApp());
-    }
-
-    public override init(): void {
-        super.init();
-
-        if (DebugManager.isActive) {
-            window.mainThree = this;
-            DomKeyboardManager.onKeyDown.add(this._onKeyDown);
-        }
-    }
-
-    protected override _generateScenes(): void {
-        this._scene = new Scene();
-
-        if (DebugManager.isActive) {
-            this._debugWireframeMaterial = new MeshStandardMaterial({
-                wireframe: true,
-                color: MainThree._DEBUG_WIREFRAME_MATERIAL_COLOR,
-            });
-        }
-    }
-
-    protected override _generateCameras(): void {
-        ThreeCameraControllerManager.add(new MainThreeCameraController(), true);
-        this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_MAIN);
-
-        if (DebugManager.isActive) {
-            ThreeCameraControllerManager.add(new DebugThreeCameraController());
-        }
-
-        ThreeCameraControllerManager.onActiveThreeCameraControllerChange.add(this._onActiveCameraControllerChange);
-    }
-
-    protected override _generateRenderers(): void {
-        this._renderer = new Renderer(this._scene, this._cameraController.camera, { antialias: true });
-        this._domElementContainer.appendChild(this._renderer.domElement);
+class MainThree {
+    public init(): void {
+        LoaderThreeApp.init();
+        MainThreeApp.init();
     }
-
-    protected override _generateViews(): void {
-        const worldThreeView = new WorldThreeView();
-        this._views.push(worldThreeView);
-        this._setCurrentView(worldThreeView);
-    }
-
-    private _onActiveCameraControllerChange = (): void => {
-        this._cameraController = ThreeCameraControllerManager.activeThreeCameraController;
-        this._renderer.setCamera(this._cameraController.camera);
-        this._onResize();
-    };
-
-    private readonly _onKeyDown = (_e: KeyboardEvent): void => {
-        if (DebugManager.isActive) {
-            if (DomKeyboardManager.areAllKeysDown(MainThree._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
-                ThreeCameraControllerManager.setActiveCamera(
-                    this._cameraController.cameraId === CameraId.THREE_MAIN ? CameraId.THREE_DEBUG : CameraId.THREE_MAIN
-                );
-            } else if (DomKeyboardManager.areAllKeysDown(MainThree._TOGGLE_WIREFRAME_KEYS)) {
-                if (this._scene.overrideMaterial === null) {
-                    this._scene.overrideMaterial = this._debugWireframeMaterial;
-                } else {
-                    this._scene.overrideMaterial = null;
-                }
-            }
-        }
-    };
 }
 
-export type { MainThree };
 export default new MainThree();

package/template-vanilla/src/experiences/engines/threes/{LoaderThree.ts → app/LoaderThreeApp.ts}

@@ -1,13 +1,13 @@
 import { DomUtils } from '@benjos/cookware';
 import { Scene } from 'three';
-import LoaderThreeCameraController from '../../cameras/threes/LoaderThreeCameraController';
-import { CameraId } from '../../constants/experiences/CameraId';
-import ThreeCameraControllerManager from '../../managers/threes/ThreeCameraControllerManager';
-import LoaderRenderer from '../../renderers/threes/LoaderRenderer';
-import LoaderThreeView from '../../views/threes/loaders/LoaderThreeView';
-import ThreeBase from './bases/ThreeBase';
+import LoaderThreeCameraController from '../../../cameras/threes/LoaderThreeCameraController';
+import { CameraId } from '../../../constants/experiences/CameraId';
+import ThreeCameraControllerManager from '../../../managers/threes/ThreeCameraControllerManager';
+import LoaderRenderer from '../../../renderers/threes/LoaderRenderer';
+import LoaderThreeView from '../../../views/threes/loaders/LoaderThreeView';
+import ThreeAppBase from './bases/ThreeAppBase';
 
-class LoaderThree extends ThreeBase {
+class LoaderThreeApp extends ThreeAppBase {
     constructor() {
         super(DomUtils.GetLoader());
     }
@@ -36,4 +36,4 @@ class LoaderThree extends ThreeBase {
     }
 }
 
-export default new LoaderThree();
+export default new LoaderThreeApp();

package/template-vanilla/src/experiences/engines/threes/app/MainThreeApp.ts

@@ -0,0 +1,96 @@
+import { DomKeyboardManager, DomUtils } from '@benjos/cookware';
+import { KeyboardConstant } from '@benjos/spices';
+import { MeshStandardMaterial, Scene } from 'three';
+import DebugThreeCameraController from '../../../cameras/threes/DebugThreeCameraController';
+import MainThreeCameraController from '../../../cameras/threes/MainThreeCameraController';
+import { CameraId } from '../../../constants/experiences/CameraId';
+import DebugManager from '../../../managers/DebugManager';
+import ThreeCameraControllerManager from '../../../managers/threes/ThreeCameraControllerManager';
+import Renderer from '../../../renderers/threes/Renderer';
+import WorldThreeView from '../../../views/threes/worlds/WorldThreeView';
+import ThreeAppBase from './bases/ThreeAppBase';
+
+class MainThreeApp extends ThreeAppBase {
+    private static readonly _DEBUG_WIREFRAME_MATERIAL_COLOR: number = 0x3f79f3;
+    private static readonly _TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS: string[] = [
+        KeyboardConstant.CODES.SHIFT_LEFT,
+        KeyboardConstant.CODES.KEY_C,
+    ];
+    private static readonly _TOGGLE_WIREFRAME_KEYS: string[] = [
+        KeyboardConstant.CODES.SHIFT_LEFT,
+        KeyboardConstant.CODES.KEY_W,
+    ];
+
+    declare private _debugWireframeMaterial: MeshStandardMaterial;
+
+    constructor() {
+        super(DomUtils.GetApp());
+    }
+
+    public override init(): void {
+        super.init();
+
+        if (DebugManager.isActive) {
+            window.mainThreeApp = this;
+            DomKeyboardManager.onKeyDown.add(this._onKeyDown);
+        }
+    }
+
+    protected override _generateScenes(): void {
+        this._scene = new Scene();
+
+        if (DebugManager.isActive) {
+            this._debugWireframeMaterial = new MeshStandardMaterial({
+                wireframe: true,
+                color: MainThreeApp._DEBUG_WIREFRAME_MATERIAL_COLOR,
+            });
+        }
+    }
+
+    protected override _generateCameras(): void {
+        ThreeCameraControllerManager.add(new MainThreeCameraController(), true);
+        this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_MAIN);
+
+        if (DebugManager.isActive) {
+            ThreeCameraControllerManager.add(new DebugThreeCameraController());
+        }
+
+        ThreeCameraControllerManager.onActiveThreeCameraControllerChange.add(this._onActiveCameraControllerChange);
+    }
+
+    protected override _generateRenderers(): void {
+        this._renderer = new Renderer(this._scene, this._cameraController.camera, { antialias: true });
+        this._domElementContainer.appendChild(this._renderer.domElement);
+    }
+
+    protected override _generateViews(): void {
+        const worldThreeView = new WorldThreeView();
+        this._views.push(worldThreeView);
+        this._setCurrentView(worldThreeView);
+    }
+
+    private _onActiveCameraControllerChange = (): void => {
+        this._cameraController = ThreeCameraControllerManager.activeThreeCameraController;
+        this._renderer.setCamera(this._cameraController.camera);
+        this._onResize();
+    };
+
+    private readonly _onKeyDown = (_e: KeyboardEvent): void => {
+        if (DebugManager.isActive) {
+            if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
+                ThreeCameraControllerManager.setActiveCamera(
+                    this._cameraController.cameraId === CameraId.THREE_MAIN ? CameraId.THREE_DEBUG : CameraId.THREE_MAIN
+                );
+            } else if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_WIREFRAME_KEYS)) {
+                if (this._scene.overrideMaterial === null) {
+                    this._scene.overrideMaterial = this._debugWireframeMaterial;
+                } else {
+                    this._scene.overrideMaterial = null;
+                }
+            }
+        }
+    };
+}
+
+export type { MainThreeApp };
+export default new MainThreeApp();

package/template-vanilla/src/experiences/engines/threes/{bases/ThreeBase.ts → app/bases/ThreeAppBase.ts}

@@ -1,10 +1,10 @@
 import { DomResizeManager, TickerManager } from '@benjos/cookware';
 import { Scene } from 'three';
-import ThreeCameraControllerBase from '../../../cameras/threes/bases/ThreeCameraControllerBase';
-import WebGLRendererBase from '../../../renderers/threes/bases/WebGLRendererBase';
-import ThreeViewBase from '../../../views/threes/bases/ThreeViewBase';
+import ThreeCameraControllerBase from '../../../../cameras/threes/bases/ThreeCameraControllerBase';
+import WebGLRendererBase from '../../../../renderers/threes/bases/WebGLRendererBase';
+import ThreeViewBase from '../../../../views/threes/bases/ThreeViewBase';
 
-export default abstract class ThreeBase {
+export default abstract class ThreeAppBase {
     declare protected _domElementContainer: HTMLElement;
     declare protected _scene: Scene;
     declare protected _cameraController: ThreeCameraControllerBase;
@@ -49,12 +49,14 @@ export default abstract class ThreeBase {
         if (this._currentView === view) return;
         if (this._currentView) this._removeOldView(this._currentView);
         this._currentView = view;
+        view.init();
         this.scene.add(this._currentView);
     }
 
     private _removeOldView(view: ThreeViewBase): void {
         this.scene.remove(view);
         view.dispose();
+        view.reset();
     }
 
     protected _onResize = (): void => {

package/template-vanilla/src/experiences/managers/DebugManager.ts

@@ -2,7 +2,7 @@ import { DomKeyboardManager } from '@benjos/cookware';
 import { KeyboardConstant } from '@benjos/spices';
 import GUI from 'lil-gui';
 import { ThreePerf } from 'three-perf';
-import MainThree from '../engines/threes/MainThree';
+import MainThreeApp from '../engines/threes/app/MainThreeApp';
 
 class DebugManager {
     private static readonly _IS_ACTIVE_STRING: string = '#debug';
@@ -40,7 +40,7 @@ class DebugManager {
             anchorX: DebugManager._THREE_PERF_ANCHOR_X,
             anchorY: DebugManager._THREE_PERF_ANCHOR_Y,
             domElement: document.body,
-            renderer: MainThree.renderer,
+            renderer: MainThreeApp.renderer,
             showGraph: false,
         });
     };

package/template-vanilla/src/experiences/managers/threes/ThreeRaycasterManager.ts

@@ -1,6 +1,6 @@
 import { DomPointerManager } from '@benjos/cookware';
 import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
-import MainThree from '../../engines/threes/MainThree';
+import MainThreeApp from '../../engines/threes/app/MainThreeApp';
 
 class ThreeRaycasterManager {
     private readonly _raycaster = new Raycaster();
@@ -12,7 +12,7 @@ class ThreeRaycasterManager {
 
     public castFromCameraToPointer(objects: Object3D[], recursive = true): Intersection<Object3D<Object3DEventMap>>[] {
         this._pointerPosition.set(DomPointerManager.ndcX, DomPointerManager.ndcY);
-        this._raycaster.setFromCamera(this._pointerPosition, MainThree.cameraController.camera);
+        this._raycaster.setFromCamera(this._pointerPosition, MainThreeApp.cameraController.camera);
         const intersects = this._raycaster.intersectObjects(objects, recursive);
         return intersects;
     }

package/template-vanilla/src/experiences/types/global.d.ts

@@ -1,9 +1,10 @@
-import { MainThree } from '../engines/threes/MainThree';
+import { MainThreeApp } from '../engines/threes/app/MainThreeApp';
 
 declare global {
     interface Window {
-        mainThree: MainThree;
+        mainThreeApp: MainThreeApp;
     }
 }
 
-export {};
+export { };
+

package/template-vanilla/src/experiences/views/threes/bases/ThreeViewBase.ts

@@ -10,6 +10,15 @@ export default abstract class ThreeViewBase extends Object3D {
         this._actors = [];
     }
 
+    public init(): void {
+        this.reset();
+        for (const actor of this._actors) actor.init();
+    }
+
+    public reset(): void {
+        for (const actor of this._actors) actor.reset();
+    }
+
     protected _generateActors(): void {
         //
     }

package/template-vanilla/src/experiences/views/threes/worlds/components/Environment.ts

@@ -1,6 +1,6 @@
 import { DataTexture, DirectionalLight, Object3D, Vector3 } from 'three';
 import { AssetId } from '../../../../constants/experiences/AssetId';
-import MainThree from '../../../../engines/threes/MainThree';
+import MainThreeApp from '../../../../engines/threes/app/MainThreeApp';
 import DebugManager from '../../../../managers/DebugManager';
 import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
 
@@ -34,13 +34,13 @@ export default class Environment extends Object3D {
         this._environmentMap.texture = ThreeAssetsManager.getHDR(AssetId.THREE_HDR_TEMPLATE);
         this._environmentMap.texture.needsUpdate = true;
 
-        MainThree.scene.environment = this._environmentMap.texture;
-        MainThree.scene.environmentIntensity = this._environmentMap.intensity!;
+        MainThreeApp.scene.environment = this._environmentMap.texture;
+        MainThreeApp.scene.environmentIntensity = this._environmentMap.intensity!;
 
         if (DebugManager.isActive) {
             const environmentFolder = DebugManager.gui.addFolder('Environment');
             environmentFolder.add(this._environmentMap, 'intensity', 0, 10, 0.01).onChange(() => {
-                MainThree.scene.environmentIntensity = this._environmentMap.intensity!;
+                MainThreeApp.scene.environmentIntensity = this._environmentMap.intensity!;
             });
         }
     };
@@ -69,5 +69,5 @@ export default class Environment extends Object3D {
         }
     }
 
-    public update(_dt: number): void {}
+    public update(_dt: number): void { }
 }

package/template-vanilla/src/experiences/views/threes/worlds/components/actors/bases/ActorBase.ts

@@ -5,6 +5,14 @@ export default abstract class ActorBase extends Object3D {
         super();
     }
 
+    public init(): void {
+        this.reset();
+    }
+
+    public reset(): void {
+        //
+    }
+
     public dispose(): void {
         //
     }