项目在运行和打包时的入口文件是通过在vite.config.js
中的server.open
和build.rollupOptions.inout
配置项中指定的,通过修改相应参数可以修改运行和打包时的入口文件。
此外,此项目作为一个学习用的demo项目,每个不同的src文件夹代表不同的章节,所以此项目适合在本地运行作为学习用,不适合发布到线上。
如果要发布到线上,可以通过修改打包的入口文件来对不同的章节代码进行打包;或者修改项目结构,增加一个入口文件,制作为多页面展示项目,也就是可以参照three.js
官方文档中的demo示例的展示方式。
最后,这里并不是完整的demo,前面的一部分项目代码是使用parcel
作为打包工具进行构建的项目,git地址在这里,之后因为parcel
工具对文件引入的不友好(主要是非常见格式文件引入会报错,且未找到解决方案),转为使用vite
作为打包运行构建工具。
需要单独的loader
进行加载的文件统一放置在public
文件夹中,包括.hdr
文件、3D模型文件(.glb
、.gltf
、.obj
等格式)、音视频文件(.mp3
、.mp4
等格式)。二级文件夹的命名规则与src
文件夹类似,但是不与src文件夹一一对应(因为不是每个章节都会有这种文件)。
针对不同的章节,封装了不同的src
,也就是命名格式为**src-**
的那些src
平级文件夹,其中src
前面的数字表示分节(与课堂的章节不一致),-
后面的文字表示这一章节的主要内容。
- 项目中使用的文件引入方式统一使用
import
进行引入。 - 引入后缀使用了
?raw
和?url
两种后缀?raw
后缀主要用在着色器文件上,表示【以字符串方式引入】?url
后缀主要用在模型、贴图、音频文件上,表示【以路径方式引入】
- 所有资源存放于
src/assets
,不存放于public
,其目的和区别在于:- 目的:每个章节对应一个src,这样不会让不同章节的资源产生混淆
- 区别:存放于
public
中的文件会无条件放入打包后的文件中,存放于src/assets
中的文件只有被引入过才会放入打包后的文件。例如,如果只是在某个加载器中的load
参数中使用了路径,那么打包后的文件中不会有被load
的文件,会造成文件找不到的问题。这时需要在文件中通过显式的import
引入所用到的文件(可以通过?url
形式),然后在load
中使用引入后的变量。
- 04src-3D首页,这个章节并不在此存储库中,在这个库中。对应课程为第七章和第八章
- 13src-着色器修改现有材质,对应课程第十五章
- 17src-变形动画,对应课程第十九章