为网站添加"原神,启动!"页面

原神, 启动!

项目的开源地址: https://github.com/gamemcu/www-genshin

将项目下载到本地

点击上方的开源地址, 将源码下载到本地

安装项目用到的包

查看

打开项目根目录下的vite.config.ts文件查看

安装

在项目的根目录打开终端, 运行下面的命令行(package-name替换为包的名字)

npm i package-name

构建网页

构建前要修改的部分

直接构建的话, 由于打包出来的js文件比较大, 会有大小超过限制的警告, 可以通过分块打包和更改大小限制的方法解决

方法可以参考

【Vue3】vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification-阿里云开发者社区 (aliyun.com)

【Vue3】vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification_some chunks are larger than 500 kbs after minifica-CSDN博客

构建方法

方法可以参考部署静态站点 | Vite 官方中文文档 (vitejs.cn)

解决报错

如果构建时, 出现关于ShaderTest.ts文件中没找到xviewer和cameraCenter的报错, 解决办法如下

// 第二行后面的部分
from "../libs/xviewer";
// 替换为
from "../../libs/xviewer";

在第二行后面另起一行添加

import { cameraCenter } from "./ForwardCamera";

网页的构建位置

成功构建后, 项目根目录中dist文件夹里面的内容就是构建出来的网页

题外话

关于WebGL

WebGL全称叫做Web Graphics Library，它是JavaScrint API、用于在任何兼容的Web浏览器中演染交互式的3D图形，并且无需使用插件。它基于 OpenGL ES 2.0(一个用于嵌入式系统的图形库)，并与其他 Web 标准完全集成，使开发者能够利用 GPU 加速图形处理直接在网页上实现复杂的图形效果。

关于three.js