基于 Vue3+Vite 的WebGL实践项目, 实现了3D引擎的核心功能,仅供学习参考,不建议用于生产环境
- 场景管理 (src/scene)
- 渲染器 (renderer.js)
- PBR材质
- 灯光
- 阴影计算
- Skybox (天空盒)
- Environment (环境光贴图)
- 控制器 (controls.js)
- (半)透明物体渲染
由于本项目主要是为了实践WebGL,所以没有实现模型加载器,采用threejs的GLBLoader来加载顶点数据和材质贴图, 因为解析
.glb
文件有点麻烦,不在本项目的重点范围内
请自行准备一个glb模型文件,放在public
目录下,然后修改src/main.js
中的模型加载路径为你的模型文件名
// src/main.js
// 例如: vans_old_skool_green.glb
const model = await loadGlb('vans_old_skool_green.glb')
项目启动:
npm install
npm run dev
GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.