前言
原神启动是一个项目网站，它基于 xviewer.js 开发而成，仅作学习交流之用。xviewer.js 是一款基于 three.js 的插件式渲染框架，它对 three.js 进行了深度封装，这一操作让代码更为简洁，使用起来也更显优雅。此外，xviewer.js 还提供了大量实用的组件和插件，这些元素能助力前端开发者更轻松地运用 WebGL 技术。
正文
WebGL 是一个 JavaScript API，全称为 Web Graphics Library。它能够让开发者在支持该技术的网页浏览器中渲染交互式 3D 图形，而且无需安装任何插件。WebGL 基于 OpenGL ES 2.0，这是一个专门为嵌入式系统设计的图形库。
WebGL 与其他网络标准紧密融合，开发者可借此利用图形处理单元（GPU）加速图形处理，进而在网页上呈现出复杂的 3D 视觉效果。在项目里，通过 xviewerjs 加载大量 3D glb 文件资源，开发者可以借助这个项目进一步学习 WebGL 技术。
public onEnter() {
const resources = this.target.viewer.user.resources;
return Promise.all([
gameManager.task(AssetManager.Load({ url: "Genshin/Login/DOOR.glb" }).then((v) => resources.DOOR = v), { name: "DOOR" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_BigCloud.glb" }).then((v) => resources.SM_BigCloud = v), { name: "SM_BigCloud" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_Light.glb" }).then((v) => resources.SM_Light = v), { name: "SM_Light" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_Qiao01.glb" }).then((v) => resources.SM_Qiao01 = v), { name: "SM_Qiao01" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_Qiao02.glb" }).then((v) => resources.SM_Qiao02 = v), { name: "SM_Qiao02" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_Qiao03.glb" }).then((v) => resources.SM_Qiao03 = v), { name: "SM_Qiao03" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_Qiao04.glb" }).then((v) => resources.SM_Qiao04 = v), { name: "SM_Qiao04" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_Road.glb" }).then((v) => resources.SM_Road = v), { name: "SM_Road" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_ZhuZi01.glb" }).then((v) => resources.SM_ZhuZi01 = v), { name: "SM_ZhuZi01" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_ZhuZi02.glb" }).then((v) => resources.SM_ZhuZi02 = v), { name: "SM_ZhuZi02" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_ZhuZi03.glb" }).then((v) => resources.SM_ZhuZi03 = v), { name: "SM_ZhuZi03" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/SM_ZhuZi04.glb" }).then((v) => resources.SM_ZhuZi04 = v), { name: "SM_ZhuZi04" }),
gameManager.task(AssetManager.Load({ url: "Genshin/Login/WHITE_PLANE.glb" }).then((v) => resources.WHITE_PLANE = v), { name: "WHITE_PLANE" }),
]);
}1.项目使用的技术如下：
Vite
这是一款现代化的前端构建工具，充分利用原生的 ES 模块导入特性。它的优势显著，不仅能够实现快速冷启动，还支持即时的模块热更新。此外，Vite 对 TypeScript 和 JSX 等现代 JavaScript 特性提供了良好的支持。
React18
此版本引入了全新的 Root API，大大提升了应用加载和更新的效率。它为开发者提供了更出色的组件生命周期控制，同时支持自动批处理和新的 startTransition API，为开发高效的应用程序提供了有力保障。
TypeScript
作为 JavaScript 的超集，TypeScript 增加了类型系统，并对 ES6 + 提供支持。其最大的特点是提供静态类型检查，这种机制能够帮助开发者在编译阶段就发现潜在的代码错误，从而有效提高代码质量，提升开发效率。
Less
Less 是一种 CSS 预处理器，它对 CSS 功能进行了扩展。在 Less 中，可以使用变量、Mixins、函数等丰富的特性，这些特性让 CSS 的编写朝着更加模块化和可复用的方向发展，使样式表的维护和管理更加便捷。
Eslint
Eslint 主要用于识别和报告 JavaScript 代码中存在的错误。它支持自定义规则，这对于团队开发而言意义重大，能够帮助团队统一代码风格，遵循最佳实践，确保代码的规范性和可读性。
Three.js
这是一个基于 WebGL 的 JavaScript 库，借助它，开发者可以在浏览器环境中轻松创建和展示 3D 图形，为网页带来丰富的三维视觉体验。
项目启动：
// 安装依赖
pnpm install
// 启动
npm start
