@benjos/create-boilerplate 1.5.1 → 1.5.6

package/template-vue/src/experiences/views/threes/bases/components/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/threes/loaders/LoaderThreeView.ts

@@ -0,0 +1,28 @@
+import { ViewId } from '../../../constants/experiences/ViewId';
+import ThreeViewBase from '../bases/ThreeViewBase';
+import TemplateLoaderThreeActor from './components/TemplateLoaderThreeActor';
+
+export default class LoaderThreeView extends ThreeViewBase {
+    declare private _threeLoader: TemplateLoaderThreeActor;
+
+    constructor() {
+        super(ViewId.THREE_LOADER);
+        this._generateActors();
+    }
+
+    protected override _generateActors(): void {
+        super._generateActors();
+        this._threeLoader = new TemplateLoaderThreeActor();
+        this._actors.push(this._threeLoader);
+
+        for (const actor of this._actors) this.add(actor);
+    }
+
+    public readonly show = (): Promise<void> => {
+        return this._threeLoader.material.show();
+    };
+
+    public readonly hide = (): Promise<void> => {
+        return this._threeLoader.material.hide();
+    };
+}

package/template-vue/src/experiences/views/threes/loaders/components/TemplateLoaderThreeActor.ts

@@ -0,0 +1,49 @@
+import { Mesh, PlaneGeometry } from 'three';
+import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
+
+export default class TemplateLoaderThreeActor extends ThreeActorBase {
+    private static readonly _DEFAULT_SIZE_WIDTH: number = 2;
+    private static readonly _DEFAULT_SIZE_HEIGHT: number = 2;
+    private static readonly _DEFAULT_SEGMENTS_WIDTH: number = 1;
+    private static readonly _DEFAULT_SEGMENTS_HEIGHT: number = 1;
+
+    declare private _geometry: PlaneGeometry;
+    declare private _material: LoaderMaterial;
+    declare private _mesh: Mesh;
+
+    constructor() {
+        super();
+
+        this._generateGeometry();
+        this._generateMaterial();
+        this._generateMesh();
+
+        this.add(this._mesh);
+    }
+
+    private _generateGeometry(): void {
+        this._geometry = new PlaneGeometry(
+            TemplateLoaderThreeActor._DEFAULT_SIZE_WIDTH,
+            TemplateLoaderThreeActor._DEFAULT_SIZE_HEIGHT,
+            TemplateLoaderThreeActor._DEFAULT_SEGMENTS_WIDTH,
+            TemplateLoaderThreeActor._DEFAULT_SEGMENTS_HEIGHT
+        );
+    }
+
+    private _generateMaterial(): void {
+        this._material = new LoaderMaterial();
+    }
+
+    private _generateMesh(): void {
+        this._mesh = new Mesh(this._geometry, this._material);
+    }
+
+    //#region Getters
+    //
+    public get material(): LoaderMaterial {
+        return this._material;
+    }
+    //
+    //#endregion
+}

package/template-vue/src/experiences/views/threes/worlds/World2ThreeView.ts

@@ -0,0 +1,35 @@
+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/TemplateFont';
+import TemplateMesh2 from './components/TemplateMesh2';
+import TemplateModel from './components/TemplateModel';
+
+export default class World2ThreeView extends ThreeViewBase {
+    constructor() {
+        super(ViewId.THREE_WORLD_2);
+    }
+
+    protected override _generateActors(): void {
+        super._generateActors();
+
+        if (DebugManager.isActive) {
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            viewsDebug.add({ switchToWorld2ThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_WORLD_2) }, 'switchToWorld2ThreeView').name('SWITCH WORLD_2_VIEW');
+        }
+
+        this._actors.push(new Environment());
+        this._actors.push(new TemplateMesh2());
+        this._actors.push(new TemplateModel());
+        this._actors.push(new TemplateFont());
+
+        for (const actor of this._actors) this.add(actor);
+    }
+
+    public override update(dt: number): void {
+        for (const actor of this._actors) actor.update(dt);
+    }
+}

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

@@ -0,0 +1,35 @@
+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/TemplateFont';
+import TemplateMesh from './components/TemplateMesh';
+import TemplateModel from './components/TemplateModel';
+
+export default class WorldThreeView extends ThreeViewBase {
+    constructor() {
+        super(ViewId.THREE_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_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());
+
+        for (const actor of this._actors) this.add(actor);
+    }
+
+    public override update(dt: number): void {
+        for (const actor of this._actors) actor.update(dt);
+    }
+}

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

@@ -0,0 +1,89 @@
+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 '../../bases/components/ThreeActorBase';
+
+interface EnvironmentMap {
+    intensity?: number;
+    texture?: DataTexture;
+}
+
+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;
+    private static readonly _DEFAULT_SUN_SHADOW_CAMERA_FAR: number = 15;
+    private static readonly _DEFAULT_SUN_SHADOW_MAP_SIZE: number = 1024;
+    private static readonly _DEFAULT_SUN_SHADOW_NORMAL_BIAS: number = 0.05;
+    private static readonly _DEFAULT_SUN_POSITION: Vector3 = new Vector3(0, 2, 1);
+
+    declare private _environmentMap: EnvironmentMap;
+    declare private _sunLight: DirectionalLight;
+
+    constructor() {
+        super();
+
+        this._generateEnvironmentMap();
+        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;
+        this._environmentMap.texture = ThreeAssetsManager.getHDR(AssetId.THREE_HDR_TEMPLATE);
+        this._environmentMap.texture.needsUpdate = true;
+
+        MainThreeApp.scene.environment = this._environmentMap.texture;
+        MainThreeApp.scene.environmentIntensity = this._environmentMap.intensity!;
+
+        if (DebugManager.isActive) {
+            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!;
+            });
+        }
+    };
+
+    private _generateSunLight(): void {
+        this._sunLight = new DirectionalLight(
+            Environment._DEFAULT_SUN_LIGHT_COLOR,
+            Environment._DEFAULT_SUN_LIGHT_INTENSITY
+        );
+        this._sunLight.castShadow = true;
+        this._sunLight.shadow.camera.far = Environment._DEFAULT_SUN_SHADOW_CAMERA_FAR;
+        this._sunLight.shadow.mapSize.set(
+            Environment._DEFAULT_SUN_SHADOW_MAP_SIZE,
+            Environment._DEFAULT_SUN_SHADOW_MAP_SIZE
+        );
+        this._sunLight.shadow.normalBias = Environment._DEFAULT_SUN_SHADOW_NORMAL_BIAS;
+        this._sunLight.position.copy(Environment._DEFAULT_SUN_POSITION);
+        this.add(this._sunLight);
+
+        if (DebugManager.isActive) {
+            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');
+            sunLightFolder.add(this._sunLight.position, 'z', -5, 5, 0.01).name('positionZ');
+        }
+    }
+
+    public update(_dt: number): void { }
+}

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

@@ -0,0 +1,58 @@
+import { Mesh, MeshStandardMaterial, type MeshStandardMaterialParameters } from 'three';
+import { TextGeometry, type TextGeometryParameters } from 'three/examples/jsm/Addons.js';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
+
+export default class TemplateFont extends ThreeActorBase {
+    private static readonly _DEFAULT_TEXT: string = 'Hello boilerplate!';
+    private static readonly _DEFAULT_TEXT_OPTION: TextGeometryParameters = {
+        font: null!,
+        size: 0.25,
+        depth: 0.01,
+        curveSegments: 5,
+        bevelEnabled: true,
+        bevelThickness: 0.03,
+        bevelSize: 0.02,
+        bevelOffset: 0,
+        bevelSegments: 4,
+    };
+    private static readonly _DEFAULT_MATERIAL_OPTION: MeshStandardMaterialParameters = {
+        color: 0xffffff,
+        metalness: 0.7,
+        roughness: 0.2,
+        envMapIntensity: 0,
+    };
+    private static readonly _DEFAULT_MESH_POSITION_Y = 3;
+
+    declare private _geometry: TextGeometry;
+    declare private _material: MeshStandardMaterial;
+    declare private _mesh: Mesh;
+
+    constructor() {
+        super();
+
+        this._generateGeometry();
+        this._generateMaterial();
+        this._generateMesh();
+    }
+
+    private _generateGeometry(): void {
+        this._geometry = new TextGeometry(TemplateFont._DEFAULT_TEXT, {
+            ...TemplateFont._DEFAULT_TEXT_OPTION,
+            font: ThreeAssetsManager.getFont(AssetId.THREE_FONT_TEMPLATE),
+        });
+        this._geometry.center();
+    }
+
+    private _generateMaterial(): void {
+        this._material = new MeshStandardMaterial(TemplateFont._DEFAULT_MATERIAL_OPTION);
+    }
+
+    private _generateMesh(): void {
+        this._mesh = new Mesh(this._geometry, this._material);
+        this._mesh.position.y = TemplateFont._DEFAULT_MESH_POSITION_Y;
+
+        this.add(this._mesh);
+    }
+}

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

@@ -0,0 +1,65 @@
+import { Mesh, MeshStandardMaterial, RepeatWrapping, SphereGeometry, type MeshStandardMaterialParameters } from 'three';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
+
+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;
+    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: SphereGeometry;
+    declare private _material: MeshStandardMaterial;
+    declare private _mesh: Mesh;
+
+    constructor() {
+        super();
+
+        this._generateGeometry();
+        this._generateMaterial();
+        this._generateMesh();
+    }
+
+    private _generateGeometry(): void {
+        this._geometry = new SphereGeometry(
+            TemplateMesh._DEFAULT_GEOMETRY_RADIUS,
+            TemplateMesh._DEFAULT_GEOMETRY_WIDTH_SEGMENTS,
+            TemplateMesh._DEFAULT_GEOMETRY_HEIGHT_SEGMENTS
+        );
+    }
+
+    private _generateMaterial(): void {
+        const normalMat = ThreeAssetsManager.getTexture(AssetId.THREE_TEXTURE_TEMPLATE);
+        normalMat.repeat.set(TemplateMesh._DEFAULT_MATERIAL_REPEAT, TemplateMesh._DEFAULT_MATERIAL_REPEAT);
+        normalMat.wrapS = normalMat.wrapT = RepeatWrapping;
+
+        this._material = new MeshStandardMaterial({
+            ...TemplateMesh._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 * TemplateMesh._MESH_ROTATION_Y;
+    }
+}

package/template-vue/src/experiences/views/threes/worlds/components/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/components/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-vue/src/experiences/views/threes/worlds/components/TemplateModel.ts

@@ -0,0 +1,33 @@
+import { Vector3 } from 'three';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import { DebugGuiTitle } from '../../../../constants/experiences/DebugGuiTitle';
+import DebugManager from '../../../../managers/DebugManager';
+import ThreeModelBase from '../../bases/components/ThreeModelBase';
+
+export default class TemplateModel extends ThreeModelBase {
+    private static readonly _DEFAULT_POSITION: Vector3 = new Vector3(0, 1, 0);
+    private static readonly _ROTATION_Y = 0.25;
+
+    constructor() {
+        super(AssetId.THREE_GLTF_TEMPLATE, {
+            castShadow: true,
+            receiveShadow: true,
+        });
+        this.position.copy(TemplateModel._DEFAULT_POSITION);
+
+        if (DebugManager.isActive) {
+            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-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,8 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "compilerOptions": {
+        "target": "ES2022",
+        "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,16 @@
+{
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "target": "ES2023",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "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()],
+});

package/template-react/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])