Skip to content

minimal implemention of a 3d renderer based on webgl

License

Notifications You must be signed in to change notification settings

re-ovo/webglvue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebglVue

基于 Vue3+Vite 的WebGL实践项目, 实现了3D引擎的核心功能,仅供学习参考,不建议用于生产环境

已实现功能

  • 场景管理 (src/scene)
  • 渲染器 (renderer.js)
  • PBR材质
  • 灯光
  • 阴影计算
  • Skybox (天空盒)
  • Environment (环境光贴图)
  • 控制器 (controls.js)
  • (半)透明物体渲染

由于本项目主要是为了实践WebGL,所以没有实现模型加载器,采用threejs的GLBLoader来加载顶点数据和材质贴图, 因为解析.glb 文件有点麻烦,不在本项目的重点范围内

渲染效果

scene

scene

项目运行

请自行准备一个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.

About

minimal implemention of a 3d renderer based on webgl

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published