所需E币: 0
时间: 2023-7-4 11:31
大小: 1.77KB
分享一套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技术还能得到更广泛的应用。