资料
  • 资料
  • 专题
Three.js可视化企业实战WEBGL课(23年7月升级版45章)
推荐星级:
时间:2023-07-04
大小:1.77KB
阅读数:160
上传用户:蝴蝶结欧恩
查看他发布的资源
下载次数
3
所需E币
0
ebi
新用户注册即送 300 E币
更多E币赚取方法,请查看
close
资料介绍
分享一套WEBGL视频教程——《Three.js可视化企业实战WEBGL视频教程》,2023年7月升级版45章!

什么是WebGL。WebGL是在浏览器中实现三维效果的一套规范。使用WebGL原生的API来写3D程序是一件非常痛苦的事情,幸好,有很多同行花业余时间写了一些WebGL开源框架,其中three.js就是非常优秀的一个。

什么是threejs,很简单,你将它理解成three + js就可以了。three表示3D的意思,js表示javascript的意思。那么合起来,three.js就是使用javascript 来写3D程序的意思。

three.js官方定义的三大要素:场景(scene)、相机(camera)、渲染器(render)。我觉得还得加上一个物体(内容)。

场景主要包含Object, 和灯光。Object有很多类别,主要是点,线,网格Mesh。然后Mesh有是由Geometry和Material材质组成的。Geometry是纯网格顶点信息,有Geometry和BufferGeometry两类,这两类下边又有很多子类。Material是材质信息,下边又有一些子类,比如基础材质,PBR材质,和可配置shader的材质。然后可以在场景里添加灯光。灯光主要有点光源,方向光,聚光灯,面光源。其中面光源用到了比较新的算法,但是目前实现的效果应该还有些问题。

相机主要是两大类,透视相机和正交相机。

渲染器主要是基于webgl的WebGLRenderer和非webgl的SVGRenderer。

要在屏幕上展示3D图形,思路大体上都是这样的:
1、构建一个三维空间
Three中称之为场景(Scene)
2、选择一个观察点,并确定观察方向/角度等
Three中称之为相机(Camera)
3、在场景中添加供观察的物体
Three中的物体有很多种,包括Mesh,Line,Points等,它们都继承自Object3D类
4、将观察到的场景渲染到屏幕上的指定区域
Three中使用Renderer完成这一工作

Three.js应用场景
利用Three.JS可以制作出很多酷炫的3D动画,并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互,在页面上增加一些3D动画和3D交互可以产生更好的用户体验。

通过Three.JS可以实现全景视图,这些全景视图应用在房产、家装行业能够带来更直观的视觉体验。在电商行业利用Three.JS可以实现产品的3D效果,这样用户就可以360度全方位地观察商品了,给用户带来更好的购物体验。另外,使用Three.JS还可以制作类似微信跳一跳那样的小游戏。随着技术的发展、基础网络的建设,web3D技术还能得到更广泛的应用。

版权说明:本资料由用户提供并上传,仅用于学习交流;若内容存在侵权,请进行举报,或 联系我们 删除。
相关评论 (下载后评价送E币 我要评论)
没有更多评论了
  • 可能感兴趣
  • 关注本资料的网友还下载了
  • 技术白皮书