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

qianfeng 发布于2019-08-23 12:28 / 3440人阅读

摘要：今天我要给大家分享一个用开发的网站，感兴趣的朋友可以在开发者工具里调试它的源码来学习。借助，前端开发人员可以开发出非常专业的场景和模型。网站地址进入之后，会看到一个炫目的控制台。在开发者工具的页面能看到相关的输出。

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

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

现实中程序员是这样的：编码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/en...

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

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

cd wikipedia

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

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

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

这个网站的源码在github：http://github.com/arscan/enco...

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98567.html

SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
three.js 简介

摘要：对于自身不能发光的物体，需要给场景添加光源从而达到可视的效果。中渲染阴影的开销比较大，所以默认物体是没有阴影的，需要单独开启。主要用于检测动画运行时的帧数，可以显示表示每秒多少帧和每帧多少毫秒，越大越好，但太大会影响性能，一般为左右。一、WebGL 与 three.js WebGL（Web Graphics Library）是一种3D绘图协议，它允许把JavaScript和OpenG...

yankeys 2019-08-22 15:14 评论0 收藏0
产品三维模型在线预览

摘要：次时代传统的方式就是创建次时代模型，对应中的材质是高光网格材质对象，通常贴图文件包含颜色贴图法线贴图和高光贴图。产品在线展示案例预览玉镯在线预览：http://www.yanhuangxueyuan.co... 汽车在线预览：http://www.yanhuangxueyuan.co... Web3D技术历史可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维...

DirtyMind 2019-08-23 12:08 评论0 收藏0