分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

这张图每位程序员应该都深有感触。

人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞。

现实中程序员是这样的:编码5分钟,调试两小时。

今天我要给大家分享一个用WebGL开发的网站,感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。

WebGL(Web Graphics Library)是3D绘图协议的一种,该技术的特色是将万能的JavaScript和OpenGL ES 2.0结合在一起,为HTML5的 Canvas提供硬件3D加速渲染。借助WebGL,前端开发人员可以开发出非常专业的3D场景和模型。

今天我要介绍的网站:Legacy Encom Boardroom Visualization就是一个采取JavaScript 加上WebGL开发3D场景和模型的一个典型例子。

网站地址:https://www.robscanlon.com/encom-boardroom/

进入之后,会看到一个炫目的控制台。左下角的动画效果很像电影《生化危机》里的DNA双螺旋模型。屏幕右边是一个控制台,你在键盘上输入的字符会有个酷炫的动画效果:

您可以手动在控制台里输入shell命令,比如:

cd wikipedia

ls

以此来浏览wikipedia文件夹下的所有内容。或者直接用鼠标左键点击wikipedia这个文件夹:

然后就能进入wikipedia这个文件夹,看到几个酷炫的3D模型,一个是正在旋转的地球的3D模型,另一个是不同维度展示的长方体模型。

在Chrome开发者工具的console页面能看到WebGL相关的输出。

这个网站的源码在github:http://github.com/arscan/encom-boardroom

如果大家对WebGL技术感兴趣的,不妨去细读下源代码:

要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
已标记关键词 清除标记
参考资料得知可以设置偏移量, 有没有办法计算任何滚动值的正确偏移量? 我还想在旋转锥体时延长锥体的长度,这样当它旋转30度时,锥体的底部仍然会在那个方向上到达地面,而顶点仍然保持在原来的位置,我不知道这有多可行。 ``` var viewer = new Cesium.Viewer('cesiumContainer'); var position = Cesium.Cartesian3.fromDegrees(-75, 40, 90); //Original, non-rotated cone for comparison. viewer.entities.add(new Cesium.Entity({ position: position, point: { color: Cesium.Color.YELLOW, show: true, pixelSize: 20 }, cylinder: { topRadius: 0, bottomRadius: 45, length: 180, material: Cesium.Color.YELLOW.withAlpha(0.5) } })); var heading = Cesium.Math.toRadians(0.0); var pitch = Cesium.Math.toRadians(0.0); var roll = Cesium.Math.toRadians(90.0); var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); //Create a rotation var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr); // offset the rotation so it's rotating from the apex of the cone, instead of the centre var offset = new Cesium.Cartesian3(0, 90, 90); //Create a transform for the offset. var enuTransform = Cesium.Transforms.eastNorthUpToFixedFrame(position); //Transform the offset Cesium.Matrix4.multiplyByPointAsVector(enuTransform, offset, offset); //Add the offset to the original position to get the final value. Cesium.Cartesian3.add(position, offset, position); viewer.entities.add(new Cesium.Entity({ position: position, orientation: orientation, point: { color: Cesium.Color.YELLOW, show: true, pixelSize: 20 }, cylinder: { topRadius: 0, bottomRadius: 45, length: 180, material: Cesium.Color.YELLOW.withAlpha(0.5) } })); viewer.zoomTo(viewer.entities); ```
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页