re-ovo / webglvue

minimal implemention of a 3d engine based on webgl

WebglVue

基于 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

License

                    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.