分享一个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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型的更多相关文章
- SharePoint Server 2013开发之旅(二):使用在线的开发人员网站进行SharePoint App开发
上一篇我已经介绍了新版本的SharePoint Server提供了四种主要的开发场景,其中一个全新的App开发模型让我们眼前一亮.这一篇我将介绍如何在线进行SharePoint App开发. 谈到Sh ...
- 使用IntelliJ IDEA开发SpringMVC网站(一)开发环境
使用IntelliJ IDEA开发SpringMVC网站(一)开发环境 摘要: 主要讲解初期的开发环境搭建,Maven的简单教学. 访问GitHub下载最新源码:https://github.com/ ...
- 【分享】分享一个压缩 PNG 的网站 TinyPNG
TinyPNG 能做什么? TinyPNG 采用智能的有损压缩技术来减少你的 PNG 文件的文件大小.通过选择性地减少图像中的颜色数量,更少的字节用于存储数据.效果几乎是看不见的,但它在文件大小方面差 ...
- 分享一个基于ssm框架下的webService接口开发
首先肯定是导入相关jar包 cxf-core-3.1.9.jar cxf-rt-bindings-soap-3.1.9.jar cxf-rt-bindings-xml-3.1.9.jar cxf-rt ...
- 分享一个linux中测试网站是否正常的shell脚本
#! /bin/bash #Author=Harry CheckUrl() { #<==定义函数,名字为CheckUrl timeout=5 #<==定义wget访问的超时时间,超时就退出 ...
- 分享一个FileUtil工具类,基本满足web开发中的文件上传,单个文件下载,多个文件下载的需求
获取该FileUtil工具类具体演示,公众号内回复fileutil20200501即可. package com.example.demo.util; import javax.servlet.htt ...
- 分享一个设计logo的网站
https://editor.freelogodesign.org/
- 使用IntelliJ IDEA开发SpringMVC网站(二)开发环境
访问GitHub下载最新源码:https://github.com/gaussic/SpringMVCDemo 文章已针对IDEA 2016做了一定的更新,部分更新较为重要,请重新阅读文章并下载最新源 ...
- 使用IntelliJ IDEA开发SpringMVC网站(二)框架配置
原文:使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 摘要 讲解如何配置SpringMVC框架xml,以及如何在Tomcat中运行 目录[-] 文章已针对IDEA 15做了一定 ...
随机推荐
- Visual Studio 2017 本地调试 Chrome浏览器自动退出
在使用VS 2017(15..6 .15.7)对.NET Core MVC应用程序进行本地调试的时候,选择使用Chrome浏览器.但输入中文 就自动关闭Chrome浏览器,随后结束调试.但复制.粘贴中 ...
- B. Vanya and Food Processor【转】
B. Vanya and Food Processor time limit per test 1 second memory limit per test 256 megabytes input s ...
- TRANSFORM_TEX是做什么的
简单来说,TRANSFORM_TEX主要作用是拿顶点的uv去和材质球的tiling和offset作运算,确保材质球里的缩放和偏移设置是正确的. (v.texcoord就是顶点的uv) 而_MainTe ...
- C++中的声明与定义
转自:http://www.cnblogs.com/kingcat/archive/2011/12/30/2307426.html C++是一种复杂的计算机语言,很多在现代高级语言中已经不需要程序员操 ...
- Codevs 1794 修剪花卉
1794 修剪花卉 题目描述 Description ZZ对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题. 一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿 ...
- jzoj5987. 【WC2019模拟2019.1.4】仙人掌毒题 (树链剖分+概率期望+容斥)
题面 题解 又一道全场切的题目我连题目都没看懂--细节真多-- 先考虑怎么维护仙人掌.在线可以用LCT,或者像我代码里先离线,并按时间求出一棵最小生成树(或者一个森林),然后树链剖分.如果一条边不是生 ...
- P3803 【模板】多项式乘法(NTT)
传送门 NTT好像是比FFT快了不少 然而感觉不是很看得懂……主要是点值转化为系数表示那里…… upd:大概已经搞明白是个什么玩意儿了……吧…… //minamoto #include<bits ...
- Mol Cell Proteomics. |彭建祥| 人胃肠道间质瘤亚群蛋白质组图谱
大家好,本周分享的是发表在Molecular & Cellular Proteomics 上的一篇关于人胃肠道间质瘤亚群蛋白质组图谱的文章,题目是Proteomic maps of human ...
- python-selenium-robotframework安装问题
背景 当前系统安装了两个不同版本的python,分别是python27和python36(如图1),如图 说明 系统安装的两个python版本,python2中的python.exe默认不做修改:py ...
- 分布式通信-tcp/ip socket
Socket通讯的过程 Server端Listen(监听)某个端口是否有连接请求,Client端向Server 端发出Connect(连接)请求,Server端向Client端发回Accept(接受) ...