@benjos/create-boilerplate 1.4.1 → 1.5.1

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

@@ -1,4 +1,7 @@
-import LoaderManager from '../../../managers/LoaderManager';
+import { DebugGuiTitle } from '../../../constants/experiences/DebugGuiTitle';
+import { ViewId } from '../../../constants/experiences/ViewId';
+import MainThreeApp from '../../../engines/threes/app/MainThreeApp';
+import DebugManager from '../../../managers/DebugManager';
 import ThreeViewBase from '../bases/ThreeViewBase';
 import Environment from './components/Environment';
 import TemplateFont from './components/actors/TemplateFont';
@@ -6,27 +9,19 @@ import TemplateMesh from './components/actors/TemplateMesh';
 import TemplateModel from './components/actors/TemplateModel';
 
 export default class WorldThreeView extends ThreeViewBase {
-    declare private _environment: Environment;
-
     constructor() {
-        super();
-        LoaderManager.onFinishLoad.add(this._onFinishLoad);
-    }
-
-    private readonly _onFinishLoad = (): void => {
-        this._generateEnvironment();
-        this._generateActors();
-        LoaderManager.onFinishLoad.remove(this._onFinishLoad);
-    };
-
-    private _generateEnvironment(): void {
-        this._environment = new Environment();
-
-        this.add(this._environment);
+        super(ViewId.THREE_VIEW_WORLD_1);
     }
 
     protected override _generateActors(): void {
         super._generateActors();
+
+        if (DebugManager.isActive) {
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            viewsDebug.add({ switchToWorldThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_VIEW_WORLD_1) }, 'switchToWorldThreeView').name('SWITCH WORLD_1_VIEW');
+        }
+
+        this._actors.push(new Environment());
         this._actors.push(new TemplateMesh());
         this._actors.push(new TemplateModel());
         this._actors.push(new TemplateFont());
@@ -35,9 +30,6 @@ export default class WorldThreeView extends ThreeViewBase {
     }
 
     public override update(dt: number): void {
-        if (!this._environment) return;
-
-        this._environment.update(dt);
         for (const actor of this._actors) actor.update(dt);
     }
 }

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

@@ -1,15 +1,17 @@
-import { DataTexture, DirectionalLight, Object3D, Vector3 } from 'three';
+import { DataTexture, DirectionalLight, Vector3 } from 'three';
 import { AssetId } from '../../../../constants/experiences/AssetId';
+import { DebugGuiTitle } from '../../../../constants/experiences/DebugGuiTitle';
 import MainThreeApp from '../../../../engines/threes/app/MainThreeApp';
 import DebugManager from '../../../../managers/DebugManager';
 import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from './actors/bases/ThreeActorBase';
 
 interface EnvironmentMap {
     intensity?: number;
     texture?: DataTexture;
 }
 
-export default class Environment extends Object3D {
+export default class Environment extends ThreeActorBase {
     private static readonly _DEFAULT_ENVIRONMENT_MAP_INTENSITY: number = 1;
     private static readonly _DEFAULT_SUN_LIGHT_COLOR: number = 0xffffff;
     private static readonly _DEFAULT_SUN_LIGHT_INTENSITY: number = 10;
@@ -28,6 +30,18 @@ export default class Environment extends Object3D {
         this._generateSunLight();
     }
 
+    public init(): void {
+        this.reset();
+        if (this._environmentMap) {
+            MainThreeApp.scene.environment = this._environmentMap.texture!;
+            MainThreeApp.scene.environmentIntensity = this._environmentMap.intensity!;
+        }
+    }
+
+    public reset(): void {
+        //
+    }
+
     private _generateEnvironmentMap = (): void => {
         this._environmentMap = {};
         this._environmentMap.intensity = Environment._DEFAULT_ENVIRONMENT_MAP_INTENSITY;
@@ -38,7 +52,8 @@ export default class Environment extends Object3D {
         MainThreeApp.scene.environmentIntensity = this._environmentMap.intensity!;
 
         if (DebugManager.isActive) {
-            const environmentFolder = DebugManager.gui.addFolder('Environment');
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            const environmentFolder = viewsDebug.addFolder('Environment');
             environmentFolder.add(this._environmentMap, 'intensity', 0, 10, 0.01).onChange(() => {
                 MainThreeApp.scene.environmentIntensity = this._environmentMap.intensity!;
             });
@@ -61,7 +76,8 @@ export default class Environment extends Object3D {
         this.add(this._sunLight);
 
         if (DebugManager.isActive) {
-            const sunLightFolder = DebugManager.gui.addFolder('Sun Light');
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            const sunLightFolder = viewsDebug.addFolder('Sun Light');
             sunLightFolder.add(this._sunLight, 'intensity', 0, 10, 0.01).name('intensity');
             sunLightFolder.add(this._sunLight.position, 'x', -5, 5, 0.01).name('positionX');
             sunLightFolder.add(this._sunLight.position, 'y', -5, 5, 0.01).name('positionY');

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

@@ -2,9 +2,9 @@ import { Mesh, MeshStandardMaterial, type MeshStandardMaterialParameters } from
 import { TextGeometry, type TextGeometryParameters } from 'three/examples/jsm/Addons.js';
 import { AssetId } from '../../../../../constants/experiences/AssetId';
 import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ActorBase from './bases/ActorBase';
+import ThreeActorBase from './bases/ThreeActorBase';
 
-export default class TemplateFont extends ActorBase {
+export default class TemplateFont extends ThreeActorBase {
     private static readonly _DEFAULT_TEXT: string = 'Hello boilerplate!';
     private static readonly _DEFAULT_TEXT_OPTION: TextGeometryParameters = {
         font: null!,
@@ -55,10 +55,4 @@ export default class TemplateFont extends ActorBase {
 
         this.add(this._mesh);
     }
-
-    public override dispose(): void {
-        super.dispose();
-        this._geometry.dispose();
-        this._material.dispose();
-    }
 }

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

@@ -1,9 +1,9 @@
 import { Mesh, MeshStandardMaterial, RepeatWrapping, SphereGeometry, type MeshStandardMaterialParameters } from 'three';
 import { AssetId } from '../../../../../constants/experiences/AssetId';
 import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ActorBase from './bases/ActorBase';
+import ThreeActorBase from './bases/ThreeActorBase';
 
-export default class TemplateMesh extends ActorBase {
+export default class TemplateMesh extends ThreeActorBase {
     private static readonly _DEFAULT_GEOMETRY_RADIUS = 1;
     private static readonly _DEFAULT_GEOMETRY_WIDTH_SEGMENTS = 64;
     private static readonly _DEFAULT_GEOMETRY_HEIGHT_SEGMENTS = 64;
@@ -54,10 +54,8 @@ export default class TemplateMesh extends ActorBase {
         this.add(this._mesh);
     }
 
-    public override dispose(): void {
-        super.dispose();
-        this._geometry.dispose();
-        this._material.dispose();
+    public override reset(): void {
+        this._mesh.rotation.y = 0;
     }
 
     public update(dt: number): void {

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

@@ -0,0 +1,71 @@
+import { BoxGeometry, Mesh, MeshStandardMaterial, RepeatWrapping, type MeshStandardMaterialParameters } from 'three';
+import { AssetId } from '../../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from './bases/ThreeActorBase';
+
+export default class TemplateMesh2 extends ThreeActorBase {
+    private static readonly _DEFAULT_GEOMETRY_WIDTH = 2;
+    private static readonly _DEFAULT_GEOMETRY_HEIGHT = 2;
+    private static readonly _DEFAULT_GEOMETRY_DEPTH = 2;
+    private static readonly _DEFAULT_GEOMETRY_WIDTH_SEGMENTS = 1;
+    private static readonly _DEFAULT_GEOMETRY_HEIGHT_SEGMENTS = 1;
+    private static readonly _DEFAULT_GEOMETRY_DEPTH_SEGMENTS = 1;
+    private static readonly _DEFAULT_MATERIAL_REPEAT = 1.5;
+    private static readonly _DEFAULT_MATERIAL_OPTIONS: MeshStandardMaterialParameters = {
+        color: 0xffffff,
+        metalness: 0.7,
+        roughness: 0.2,
+        envMapIntensity: 0,
+    };
+    private static readonly _MESH_ROTATION_Y = 0.25;
+
+    declare private _geometry: BoxGeometry;
+    declare private _material: MeshStandardMaterial;
+    declare private _mesh: Mesh;
+
+    constructor() {
+        super();
+
+        this._generateGeometry();
+        this._generateMaterial();
+        this._generateMesh();
+    }
+
+    private _generateGeometry(): void {
+        this._geometry = new BoxGeometry(
+            TemplateMesh2._DEFAULT_GEOMETRY_WIDTH,
+            TemplateMesh2._DEFAULT_GEOMETRY_HEIGHT,
+            TemplateMesh2._DEFAULT_GEOMETRY_DEPTH,
+            TemplateMesh2._DEFAULT_GEOMETRY_WIDTH_SEGMENTS,
+            TemplateMesh2._DEFAULT_GEOMETRY_HEIGHT_SEGMENTS,
+            TemplateMesh2._DEFAULT_GEOMETRY_DEPTH_SEGMENTS
+        );
+    }
+
+    private _generateMaterial(): void {
+        const normalMat = ThreeAssetsManager.getTexture(AssetId.THREE_TEXTURE_TEMPLATE);
+        normalMat.repeat.set(TemplateMesh2._DEFAULT_MATERIAL_REPEAT, TemplateMesh2._DEFAULT_MATERIAL_REPEAT);
+        normalMat.wrapS = normalMat.wrapT = RepeatWrapping;
+
+        this._material = new MeshStandardMaterial({
+            ...TemplateMesh2._DEFAULT_MATERIAL_OPTIONS,
+            normalMap: normalMat,
+        });
+    }
+
+    private _generateMesh(): void {
+        this._mesh = new Mesh(this._geometry, this._material);
+        this._mesh.castShadow = true;
+        this._mesh.receiveShadow = true;
+        this.add(this._mesh);
+    }
+
+    public override reset(): void {
+        this._mesh.rotation.y = 0;
+    }
+
+    public update(dt: number): void {
+        super.update(dt);
+        this._mesh.rotation.y += dt * TemplateMesh2._MESH_ROTATION_Y;
+    }
+}

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

@@ -1,9 +1,10 @@
 import { Vector3 } from 'three';
 import { AssetId } from '../../../../../constants/experiences/AssetId';
+import { DebugGuiTitle } from '../../../../../constants/experiences/DebugGuiTitle';
 import DebugManager from '../../../../../managers/DebugManager';
-import ModelBase from './bases/ModelBase';
+import ThreeModelBase from './bases/ThreeModelBase';
 
-export default class TemplateModel extends ModelBase {
+export default class TemplateModel extends ThreeModelBase {
     private static readonly _DEFAULT_POSITION: Vector3 = new Vector3(0, 1, 0);
     private static readonly _ROTATION_Y = 0.25;
 
@@ -15,11 +16,16 @@ export default class TemplateModel extends ModelBase {
         this.position.copy(TemplateModel._DEFAULT_POSITION);
 
         if (DebugManager.isActive) {
-            const templateModelFolder = DebugManager.gui.addFolder('Template Model');
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            const templateModelFolder = viewsDebug.addFolder('Template Model');
             templateModelFolder.add(this.position, 'y', -1, 1, 0.01);
         }
     }
 
+    public override reset(): void {
+        this.rotation.y = 0;
+    }
+
     public update(dt: number): void {
         super.update(dt);
         this.rotation.y += dt * TemplateModel._ROTATION_Y;

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

@@ -0,0 +1,44 @@
+import { BufferGeometry, Material, Mesh, Object3D, Texture } from 'three';
+
+export default abstract class ThreeActorBase extends Object3D {
+    constructor() {
+        super();
+    }
+
+    public init(): void {
+        this.reset();
+    }
+
+    public reset(): void {
+        //
+    }
+
+    public dispose(): void {
+        const geometries = new Set<BufferGeometry>();
+        const materials = new Set<Material>();
+        const textures = new Set<Texture>();
+
+        this.traverse((child) => {
+            if (child instanceof Mesh) {
+                if (child.geometry instanceof BufferGeometry) geometries.add(child.geometry as BufferGeometry);
+
+                const mats = Array.isArray(child.material) ? child.material : [child.material];
+                mats.forEach((mat) => {
+                    if (mat instanceof Material) {
+                        materials.add(mat);
+
+                        Object.values(mat).forEach((value) => {
+                            if (value instanceof Texture) textures.add(value);
+                        });
+                    }
+                });
+            }
+        });
+
+        textures.forEach((tex) => tex.dispose());
+        materials.forEach((mat) => mat.dispose());
+        geometries.forEach((geo) => geo.dispose());
+    }
+
+    public update(_dt: number): void { }
+}

package/template-vanilla/src/experiences/views/threes/worlds/components/actors/bases/{AnimatedModelBase.ts → ThreeAnimatedModelBase.ts}

@@ -2,9 +2,9 @@ import { AnimationAction, AnimationMixer } from 'three';
 import type { AnimationId } from '../../../../../../constants/experiences/AnimationId';
 import type { AssetId } from '../../../../../../constants/experiences/AssetId';
 import ThreeAssetsManager from '../../../../../../managers/threes/ThreeAssetsManager';
-import ModelBase, { type ModelBaseParams } from './ModelBase';
+import ThreeModelBase, { type ModelBaseParams } from './ThreeModelBase';
 
-export default abstract class AnimatedModelBase extends ModelBase {
+export default abstract class ThreeAnimatedModelBase extends ThreeModelBase {
     private static readonly _DEFAULT_ANIMATION_FADE_DURATION: number = 1;
 
     declare private _mixer: AnimationMixer;
@@ -35,7 +35,7 @@ export default abstract class AnimatedModelBase extends ModelBase {
 
     protected _playAnimation = (
         animationId: AnimationId,
-        fadeDuration: number = AnimatedModelBase._DEFAULT_ANIMATION_FADE_DURATION
+        fadeDuration: number = ThreeAnimatedModelBase._DEFAULT_ANIMATION_FADE_DURATION
     ): void => {
         if (!this._actions) return;
         const newAction = this._getAnimationAction(animationId);

package/template-vanilla/src/experiences/views/threes/worlds/components/actors/bases/{ModelBase.ts → ThreeModelBase.ts}

@@ -3,7 +3,7 @@ import { SkeletonUtils } from 'three/examples/jsm/Addons.js';
 import type { AssetId } from '../../../../../../constants/experiences/AssetId';
 import type { Object3DId } from '../../../../../../constants/experiences/Object3dId';
 import ThreeAssetsManager from '../../../../../../managers/threes/ThreeAssetsManager';
-import ActorBase from './ActorBase';
+import ThreeActorBase from './ThreeActorBase';
 
 export interface ModelBaseParams {
     object3DId?: Object3DId;
@@ -11,7 +11,7 @@ export interface ModelBaseParams {
     receiveShadow?: boolean;
 }
 
-export default abstract class ModelBase extends ActorBase {
+export default abstract class ThreeModelBase extends ThreeActorBase {
     protected _assetId: AssetId;
     protected _parameters: ModelBaseParams;
     declare protected _model: Group | Object3D | Mesh;
@@ -42,20 +42,6 @@ export default abstract class ModelBase extends ActorBase {
         this.add(this._model);
     }
 
-    public override dispose(): void {
-        super.dispose();
-        this._model.traverse((child) => {
-            if (child instanceof Mesh) {
-                child.geometry.dispose();
-                if (Array.isArray(child.material)) {
-                    child.material.forEach((material) => material.dispose());
-                } else {
-                    child.material.dispose();
-                }
-            }
-        });
-    }
-
     public update(dt: number): void {
         super.update(dt);
     }

package/template-vanilla/tsconfig.json

@@ -4,14 +4,9 @@
         "module": "ESNext",
         "moduleResolution": "Node",
         "strict": true,
-        "lib": [
-            "DOM",
-            "ES2020"
-        ],
+        "lib": ["DOM", "ES2020"],
         "skipLibCheck": true,
         "noEmit": true
     },
-    "include": [
-        "src"
-    ]
-}
+    "include": ["src"]
+}

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

@@ -1,21 +0,0 @@
-import { Object3D } from 'three';
-
-export default abstract class ActorBase extends Object3D {
-    constructor() {
-        super();
-    }
-
-    public init(): void {
-        this.reset();
-    }
-
-    public reset(): void {
-        //
-    }
-
-    public dispose(): void {
-        //
-    }
-
-    public update(_dt: number): void { }
-}