标签归档：html5

佳佳教程

WebGL2画球

2条评论

本文演示的代码均在这里，本文仅说明原理，不会细化到webgl基础。

最近学会了用WebGL2画球，其实学会也有两个多月了，但由于某些误解一直没法生成正确的贴图映射，导致贴图错乱，直到两周前才突然开窍发现了原因，又拖到今天才来发这么一篇文章。忙里偷闲做事就是效率低下，好在并没有什么迫切需求要做，慢慢学也无所谓。

要用WebGL画球主要就是要先建个球模，然后给它上色或者贴图。要贴图就要搞清楚每个顶点和贴图的坐标映射关系，不同的球模类型映射关系也不一样，我这画的是最容易理解的经纬球，即以地球仪那种经纬线为线框的球体。

接下来开始我们的正题。

先摆一个随便找的经纬球

现在假装看不见经线（竖线），只能看见纬线（横线），那么这个球外面每隔一定的角度就绕着一个正圆，我们生成模型也可以用这种逻辑，首先生成一个正圆，然后把它按角度调整好大小并放到正确的位置上。关于生成一个合适边数的圆的方法我在前一篇文章已经写过了，这里就不再赘述了。

继续阅读WebGL2画球 →

佳佳教程、笔记

server-sent 服务器主动发送事件

留下评论

以前的HTML版本中，要获取实时数据，必须要不断向服务器发出请求来查询有没有新内容，这样不管从建立连接还是等待时间来说都是要多苦逼就有多苦逼啊(微观来说)，[最近死在学校里实在没事做就去逛了逛w3，中文的w3school更新比英文版慢了不知多少啊]然后我发现了w3的html专版里多出了一个HTML5 服务器发送事件这东西。
看了一下他的介绍大概知道她是干什么用的了，简单地说就是用javascript建立一个长连接到一个网页脚本，然后脚本就可以按需向浏览器页面主动发送数据。

下面来解释一下工作方式

//这是我整合了w3里的示例代码，添加详细注释来助解
if (typeof(EventSource) !== "undefined") {//检查是否支持服务器推送
	var a = new EventSource("脚本.php");//建立和"脚本.php"的连接
	a.onmessage=function(event) {//接收到消息的事件
		/*这里的event.data存储了从服务器传回来的数据*/
        /*比如alert(event.data)来提示返回的数据*/
	};
    
    a.onopen=function(event){//打开连接时的事件
    /*用event.readyState可以获取此时的状态号*/
        /*建立好连接的时候干些什么*/
    };
    
    a.onerror=function(event){//发生错误时的事件
    /*用event.readyState可以获取此时的状态号*/
        /*发生错误的时候干些什么*/
    };
} else {//不支持推送的话
	alert("您老的浏览器不支持服务器推送");
    
    a.close();//用close()方法可以关闭连接
    a=null;//把a对象清空，让它的空间自动被回收
}