基于Three.js的三维全景漫游demo
A Vue.js project
使用方式以及思路
访问地址: 无后台所以保存和发布场景不可用
具体参考: Three.js的官方例子
图形学相关思路参考:
项目具体业务逻辑实现:
Three.js
是一个基于WebGL封装的JS库,WebGL绘图API本身支持绘制点(Point),线(line),以及三角形(Triangle)
WebGL绘制过程包括以下三步:
1、获取顶点坐标 (三维软件导出,或者框架生成几何体)
2、图元装配(通过投影矩阵将三维世界坐标转换为屏幕坐标,并通过顶点着色器画出一个个三角形)
3、光栅化(通过openGL的片元着色器生成片元(像素),即三角形中生成一个个像素点)
Three.js做了些什么
这幅图,我们可以看到能做的,three.js基本上都帮我们做了:
辅助我们导出了模型数据;
自动生成了各种矩阵;
生成了顶