File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 55```
66cms-program/
77├── .github/ # GitHub 配置和工作流
8- │ └── workflows/ # GitHub Actions 工作流配置
98├── assets/ # 静态资源
10- │ ├── images/ # 图片资源(WebP格式优先)
11- │ ├── videos/ # 视频资源(MP4格式)
12- │ ├── fonts/ # 字体文件(WOFF2格式)
13- │ └── audio/ # 音频资源(MP3格式)
14- │ └── models/ # 3D模型资源
159├── build/ # 下载的依赖包
16- │ └── README.md # 下载依赖包的说明文档
17- │ └── XXXX.js/ # 下载的依赖包
1810├── pages/ # HTML页面
19- │ └── XXXX.html # XXXX页面
2011├── scripts/ # JavaScript脚本
21- │ └── common/ # 公共脚本
22- │ | └── XXXX.js # 公共脚本
23- │ | └── README.md # 公共脚本说明文档
24- │ └── XXXX/ # XXXX页面脚本
25- │ └── index.js # 主逻辑
2612├── styles/ # 样式文件
27- │ ├── reset.css # 浏览器样式重置
28- │ ├── fonts.css # 字体定义
29- │ ├── keyframes.css # 动画关键帧定义
30- │ └── XXXX/ # XXXX页面样式
31- │ └── index.css # 主样式
3213├── index.html # 网站入口
3314└── README.md # 项目说明文档
3415```
Original file line number Diff line number Diff line change 11# 赴九天 问苍穹 - 第三方库使用说明
22
3- ## ESM模块使用限制
3+ ## ESM 模块使用限制
44
5- 在本次作品赛中,我们无法使用原生的ES模块系统 (即` import ` 和` export ` 语法),这是因为:
5+ 在本次作品赛中,我们无法使用原生的 ES 模块系统 (即` import ` 和` export ` 语法),这是因为:
66
7- 1 . 评委老师通常会直接从文件夹中点击HTML文件打开作品进行评审
8- 2 . 当直接从文件系统打开HTML文件时,浏览器的安全策略会阻止ES模块的加载 ,这是由于跨域资源共享(CORS)限制
9- 3 . ES模块需要通过HTTP协议加载 ,而非直接通过` file:// ` 协议打开
7+ 1 . 评委老师通常会直接从文件夹中点击 HTML 文件打开作品进行评审
8+ 2 . 当直接从文件系统打开 HTML 文件时,浏览器的安全策略会阻止 ES 模块的加载 ,这是由于跨域资源共享(CORS)限制
9+ 3 . ES 模块需要通过 HTTP 协议加载 ,而非直接通过` file:// ` 协议打开
1010
1111## 解决方案
1212
1313为了解决这一问题,我们采取了以下措施:
1414
15151 . 从[ cdnjs.com/libraries] ( https://cdnjs.com/libraries ) 下载了所需的第三方库代码
16162 . 将下载的库代码存放在` build ` 目录中
17- 3 . 特别是对Three.js的处理 :
18- - 处理了Three.js的core包和module包
19- - 修改了导入方式,使其可以通过传统的script标签直接使用
17+ 3 . 特别是对 Three.js 的处理 :
18+ - 处理了 Three.js 的 core 包和 module 包
19+ - 修改了导入方式,使其可以通过传统的 script 标签直接使用
2020 - 确保全局变量正确暴露给窗口对象
2121
2222## 使用方法
2323
24- 在HTML中,只需通过常规script标签引入即可 :
24+ 在 HTML 中,只需通过常规 script 标签引入即可 :
2525
2626``` html
2727<script src =" ./build/three.js" ></script >
3333
3434目前` build ` 目录中包含以下经过处理的库:
3535
36- - Three.js - 用于3D渲染
36+ - Three.js - 用于 3D 渲染
3737- GSAP - 用于高级动画效果
3838
3939## 性能考虑
4040
41- 虽然这种方式增加了文件大小,但为了确保评审过程中作品能正常展示,这是必要的权衡。我们已经尽可能移除了不必要的代码,以减小文件体积。
41+ 虽然这种方式增加了文件大小,但为了确保评审过程中作品能正常展示,这是必要的权衡。我们已经尽可能移除了不必要的代码,以减小文件体积。
You can’t perform that action at this time.
0 commit comments