@benjos/create-boilerplate 1.5.0 → 1.5.2

package/template-vue/src/experiences/views/threes/worlds/components/actors/bases/ThreeAnimatedModelBase.ts

@@ -0,0 +1,63 @@
+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 ThreeModelBase, { type ModelBaseParams } from './ThreeModelBase';
+
+export default abstract class ThreeAnimatedModelBase extends ThreeModelBase {
+    private static readonly _DEFAULT_ANIMATION_FADE_DURATION: number = 1;
+
+    declare private _mixer: AnimationMixer;
+    declare private _actions: AnimationAction[];
+    declare private _currentAction: AnimationAction | null;
+
+    constructor(assetId: AssetId, params: ModelBaseParams = {}) {
+        super(assetId, params);
+
+        this._generateAnimations();
+    }
+
+    protected _generateAnimations(): void {
+        const animations = ThreeAssetsManager.getModel(this._assetId).animations;
+        this._mixer = new AnimationMixer(this._model);
+        this._actions = [];
+        this._currentAction = null;
+
+        for (const clip of animations) {
+            const action = this._mixer.clipAction(clip);
+            this._addAnimationAction(action);
+        }
+    }
+
+    private _addAnimationAction(action: AnimationAction): void {
+        this._actions.push(action);
+    }
+
+    protected _playAnimation = (
+        animationId: AnimationId,
+        fadeDuration: number = ThreeAnimatedModelBase._DEFAULT_ANIMATION_FADE_DURATION
+    ): void => {
+        if (!this._actions) return;
+        const newAction = this._getAnimationAction(animationId);
+        const oldAction = this._currentAction ?? null;
+
+        newAction.reset();
+        newAction.play();
+        if (oldAction) newAction.crossFadeFrom(oldAction, fadeDuration);
+        this._currentAction = newAction;
+    };
+
+    private _getAnimationAction = (animationId: AnimationId): AnimationAction => {
+        for (const action of this._actions) {
+            if (action.getClip().name === animationId) {
+                return action;
+            }
+        }
+        throw new Error(`Animation action not found for animationId: ${animationId}`);
+    };
+
+    public update(dt: number): void {
+        super.update(dt);
+        if (this._mixer) this._mixer.update(dt);
+    }
+}

package/template-vue/src/experiences/views/threes/worlds/components/actors/bases/ThreeModelBase.ts

@@ -0,0 +1,48 @@
+import { Mesh, Object3D, type Group } from 'three';
+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 ThreeActorBase from './ThreeActorBase';
+
+export interface ModelBaseParams {
+    object3DId?: Object3DId;
+    castShadow?: boolean;
+    receiveShadow?: boolean;
+}
+
+export default abstract class ThreeModelBase extends ThreeActorBase {
+    protected _assetId: AssetId;
+    protected _parameters: ModelBaseParams;
+    declare protected _model: Group | Object3D | Mesh;
+
+    constructor(assetId: AssetId, params: ModelBaseParams = {}) {
+        super();
+        this._assetId = assetId;
+        this._parameters = params || {};
+
+        this._generateModel();
+    }
+
+    protected _generateModel(): void {
+        const originalModel = ThreeAssetsManager.getModel(this._assetId).scene;
+        const model = SkeletonUtils.clone(originalModel);
+
+        this._model = this._parameters.object3DId
+            ? (model.getObjectByName(this._parameters.object3DId) ?? model)
+            : model;
+
+        this._model.traverse((child) => {
+            if (child instanceof Mesh) {
+                if (this._parameters.castShadow) child.castShadow = true;
+                if (this._parameters.receiveShadow) child.receiveShadow = true;
+            }
+        });
+
+        this.add(this._model);
+    }
+
+    public update(dt: number): void {
+        super.update(dt);
+    }
+}

package/template-vue/src/experiences/views/vues/LoaderView.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import LoaderManager from '../../managers/LoaderManager';
+
+const isVisible = ref(false);
+const isEnded = ref(false);
+const loadingNumber = ref(0);
+const barScaleX = ref(0);
+
+const barStyle = computed(() =>
+    isEnded.value ? undefined : { transform: `translateY(-50%) scaleX(${barScaleX.value})` }
+);
+
+const onShow = (): void => {
+    loadingNumber.value = 0;
+    barScaleX.value = 0;
+    isEnded.value = false;
+    isVisible.value = true;
+};
+
+const onProgress = (): void => {
+    const progress = LoaderManager.progress * 100;
+    barScaleX.value = LoaderManager.progress;
+    loadingNumber.value = Math.round(progress);
+};
+
+const onHide = (): void => {
+    loadingNumber.value = 100;
+    barScaleX.value = 1;
+    isEnded.value = true;
+    isVisible.value = false;
+};
+
+onMounted(() => {
+    LoaderManager.onShow.add(onShow);
+    LoaderManager.onProgress.add(onProgress);
+    LoaderManager.onHide.add(onHide);
+});
+
+onUnmounted(() => {
+    LoaderManager.onShow.remove(onShow);
+    LoaderManager.onProgress.remove(onProgress);
+    LoaderManager.onHide.remove(onHide);
+});
+</script>
+
+<template>
+    <div id="loading-screen" class="html-view loading-screen" :class="{ show: isVisible }">
+        <div class="loading-progress">
+            <span class="loading-number">{{ loadingNumber }}</span>
+            <span>%</span>
+        </div>
+        <div class="loading-bar" :class="{ ended: isEnded }" :style="barStyle"></div>
+    </div>
+</template>

package/template-vue/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import App from './experiences/engines/vues/MainVue.vue';
+import Experience from './experiences/Experience';
+
+createApp(App).mount('#app');
+
+void Experience.init();

package/template-vue/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "verbatimModuleSyntax": false,
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+    },
+    "include": ["src/**/*.ts", "src/**/*.vue"]
+}

package/template-vue/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
+}

package/template-vue/tsconfig.node.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "target": "ES2023",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "types": ["node"],
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
+}

package/template-vue/vite.config.ts

@@ -0,0 +1,16 @@
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+import glsl from 'vite-plugin-glsl';
+
+export default defineConfig({
+    base: './',
+    server: {
+        host: true,
+    },
+    build: {
+        outDir: './dist',
+        emptyOutDir: true,
+        sourcemap: true,
+    },
+    plugins: [vue(), glsl()],
+});