1563人阅读
web前端（10）
摘要：本文主要介绍运用webgl的第三方框架three.js实现的一款简单的3D类网页游戏。主要内容包括介绍three.js,如何运用three.js摆放相机，设置相机角度，相机视觉角度转移，场景中物体的位置摆放和贴皮，在3d世界中的直线运动，碰撞检测等。
关键词：3d数学, webgl, three.js,
技术领域：前端开发，游戏开发，3d，webgl
一.&&&背景
作为 HTML5 大家庭中的一员，相比 CSS3 和 WebSocket 等大家早已熟知的新技术，WebGL 可以说是其中最神秘的一员。长久以来很多人——包括这个圈子里的技术人，对 WebGL 都不是很了解，甚至有很多的误解，但实际上去年一年到现在 WebGL 正在以爆炸般的速度发展着，很多情况都发生了变化。WebGL 就像一只丑小鸭，正在慢慢从土肥圆成长为白富美的公主。实际上，相对于国外，国内这方面的探索还是比较少，因为万恶的喝了三鹿奶粉长大的ie系列占据浏览器半壁江山，决定不可能在短期内大范围运用该技术，即使你做了一个很炫很酷的3D网站，做到逛网站好像第一人称逛商店那样具有3d真是的立体感，上线后pm肯定跟你拼了，因为过半的国内用户无法访问。弹出类似以下的对话框
这样，再好再炫的技术也是没用，因为用户关心的不是背后的技术，而是直接的用户体验。就好像实现同样的页面效果，有人用纯CSS3实现（包括所有图片），也有人直接切图。这显得用CSS3的人很geek，但是上线后根本看不到原有效果，圆形变方形，方形还是畸形，畸形的什么都看不到。说这些无非是想说明webgl其实并不是一个新鲜的概念，而是一门技术而已。没有webgl的，unity3D，flash的stage3D一样可以做到，甚至有过之而无不及，兼容所有浏览器，直接可以商用，给用户就一个字，酷。
那不就是说webgl没用，拼不过flash吗？那还花那么多时间精力去写博客，做demo干嘛。实际上，WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。这样用户就可以不用安装各种各样的插件就可以访问3D型网页了。
PS，上面那段话是摘自百度百科的webgl词条，不相信可以去查一下，一模一样的。不过话说回来，个人鄙见，webgl在pc端是赢不了flash的，起码在未来十年。因为现在98.919%的浏览器都支持flash，用户情愿去装一个flash player，也不愿意改用浏览器（尤其是我们很有爱的ie6 ^_^）。所以pc端的话webgl有点尴尬。不过在移动端方面还是值得期待的，尽管刚刚发布的ios6没有说支持webgl，但是随着HTML5的web app在移动端的普及和硬件的升级，相信webgl还是可以打下移动端的半壁江山的。现在玩webgl相当于玩玩具，实属是各位技术发烧友和Geek打发周末无聊时间的必备良药。
吐槽了大半天，无非是介绍一下背景而已，下面正式开始我们的webgl之旅。
二.Three.js简介
国外有一位叫mrdoob的哥们，写了一个three.js的框架，对底层的webgl进行封装，极大方便了我们写webgl程序。关于这个框架，详情（）。
更多精彩的Demo，详见（） ，更多的基于three.js的第三方游戏框架可参见chandlerprall大牛写的一个插件，详情可见
说了这么多，还是有不少人不清楚three.js有什么便利，举个例子，要在场景中画一个立方体，以下代码足够了
如果是用原生的GLSL语言（可以理解为一种对底层图形硬件编程的语言），需要手工定义定点着色器，片元着色器，然后定义所有顶点数组，需要比较恐怖的代码量。
最核心的代码也需要以下这些。
以上的代码，其实我也看不明白，大意就是定义一个顶点数组，然后通过顶点着色器把顶点信息传给底层GLSL处理，光是大路货代码就要敲老半天，试问用这种方式还有心情去写具体的业务逻辑吗？
其实物体可以用其各个顶点坐标表示，顶点通过模型视图矩阵转换为视觉坐标，然后通过投影矩阵转换为裁剪坐标，接着通过透视除法规范化设备坐标，最后通过视口变换转变为窗口坐标。这就是一般的顶点变换过程。
所以一般要写webgl程序，都是用现成的封装好的框架，站在巨人的肩膀上。Three.js算是当前一个最流行最好的框架。
三.&游戏的具体实现原理
1. 游戏简介
说了这么多，还没有见到真正的游戏demo，很多童鞋估计要吐槽了。不用急，其实demo是次要，本文最重要的是通过demo去介绍如何使用一些基本的webgl的api和一些思想算法。
Demo的地址页&&源码也在里面，不另外附带。
游戏截图如下
相信不少80后都会记得那个红白机的炸弹人，没错，其实这个demo就是那个游戏的3D版。
2. 摆放相机
为了简化，游戏主要是用第一人称视觉，而不是生化危机那种介于第一和第三人称之间的视觉角度。下面是用Three.js设置相机的代码
其实相机就是相当于人的眼睛，人的眼睛看到的世界相当于一个视景体，如下图。
在计算机中，人能看到的东西其实就只有上图的近平面和远平面之间的东西。
PerspectiveCamera的第一个参数就是上图的视觉，第二第三个参数就是上图的W和H,第四第五个参数分别是近平面距离和远平面距离。至于camera.position.x,y,z这个就是相机在3D世界中的摆放位置。游戏中要移动人物是，只需要改变这三个值就可以了。
3.设置观看点
光是有当前的相机点还是不能确定要观看的东西的，还要设置观看点，例如你在(0,0,0)看(1,1,1)和(-1,-1,-1)是截然不同的两个世界。可以通过下面的代码实现观看点的设置。
大家如果在大一时有过被高数折磨的历史的话，那么恭喜你，下面的内容你应该很快能接受。
有人可能会问，为什么上面的公式中每一个后面都“+camera.position”？很明显，这个是因为相对于原点的平移。把当前点作为平移后球面的球心。
4. 如何运动
先看下面的公式
怎样，是不是很熟悉，再次勾起各位的青葱岁月的回忆？其实大学里学的理论知识是有用的。只不过很多人不知道怎样用而已（当然包括我自己，还不能充分运用各种理论知识）。FE们如果不想一辈子做页面，不想成为二八原则中的那80%，不想整天写点高中生就能懂的业务逻辑的话，就马上拾起高数，线代，概率课本复习吧。啊，说错了，上面这个是高中知识点。
如上图，以二维为例，三维一样的道理。假设有当前点是P1(x1,y1),观看点是P2(x2,y2)，那么，λ表示的是起点P1到P与P到末点P2的比值。这样通过确定λ,我们就可以得到单位时间移动后的到达的点。程序的核心代码是如下
因为本demo是只在x,z平面，所以不涉及y的运算。当然y的运算一样的道理。
5. 如何确定当前相机所在的区块
见上图，相信有过acm经历的童鞋肯定会对线段树的大路货代码情有独钟。没错线段树的确可以把O(n)效率化成O(logn)效率。由于本demo的特殊性，把整个地图划分为一个一个的正方形区域，有些区域放置木箱，有些区域是道路。所以可以通过二维线段树快速寻找出移动后相机点是否处于木箱区域，从而能够检测碰撞。具体做法如上图把一个正方形划分为四个区域块，如果当前点落在左上方，就递归到左上方继续寻找，需要注意的是“线段”边界的确定，如果中点处不是单位长度的两个端点，那么需要取到线段的两端，然后再继续划分。最后截止划分的结束条件是，划分的区域是“单位长度”。核心代码如下。
关于材质纹理贴图
一个游戏，给玩家的第一感受是美术设计，而不是程序的geek程度。所以即使程序很牛，很复杂，美术UE不过关，也是一个失败品。从这个意义上来说，本demo绝对可以称得上是失败品中的战斗机。
其实运用three.js贴图就好像打字一样简单，如下代码就可以给地面贴图了。
同样，给木箱贴图
本人在3D方面的功力有限，因为没有系统地学习过3D计算机图形学，所以上面的贴图方式在商业中是绝对不能直接采用的，否则效果是巨卡，这里只不过是给大家一个认识而已。
7. 关于键盘按键
&&& 相信做过canvas游戏的童鞋都知道，按键的处理方式了吧。这里就顺便啰嗦一下。按键的处理方式有两种。一种是立即做出反应。比如发射激光枪！按键后，按某种固定速率自动重复，比如每秒发射两次。另一种是根据按键时间长短期发生作用。例如，按方向键向前走，直到松手之后，才会停下。本demo按照第二种方式处理按键。设置一个按键数组，按下某个按键后改变数组中相对应的布尔值为1，表示正在按下该键，这样就可以同时允许按下多个按键，当放开按键，就把对应的数组的布尔值改为0。这样只需要在requestAnimationFrame（）中轮询检测键盘数组的各个布尔值做出相应的动作。
本文简单地介绍了运用Three.js基本的api做出自己的3D游戏。当然Three.js博大精深，很多其他的api都没有用到，例如光照等。只用到了最基本的几个。其实现在有很多很好的three.js物理引擎，例如ammo.js，相机的移动更是应该有现成的框架和方法，本demo都没有用上，而是自己写原生程序，所以疏忽之处在所难免。欢迎各位大神吐槽指教。另外，如果做得深入点的话还可以用nodejs + websocket+ socket.io搭建起在线对抗，类似于泡泡堂。还有添加AI功能等。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：20383次
排名：千里之外
原创：21篇
(1)(1)(1)(1)(4)(13)专业的QQ下载站 本站非腾讯QQ官方网站
官方网址：暂无
斗罗大陆3d页游挂机助手下载1.0 绿色版
软件大小：3.6M
软件语言：中文
更新时间：
软件类别：免费/页游辅助
软件性质：PC软件
软件厂商：
运行环境：WinAll
软件等级：
本类热门软件
软件简介软件截图相关软件相关文章
斗罗大陆页游微端缓存清除工具是斗罗大陆是3D页游微端的一款缓存清理辅助工具，玩家用微端进入游戏时，如果遇到资源加载错误导致无法进入游戏时，可以使用该款辅助工具解决问题。使用说明：1、下载文件2、下载之后，
更新：16-06-04&&大小：2KB&&类别：页游辅助
评分：10.0
斗罗大陆3D微端是斗罗大陆游戏网页版的登录器，游戏是由著名作家唐家三少的精品小说斗罗大陆改版而成，游戏是唐家三少正版授权，喜欢的朋友赶紧下载使用吧，畅游斗罗大陆近在眼前。职业介绍：蓝银草：特征：远距、控
更新：16-06-04&&大小：3.6M&&类别：页游辅助
评分：10.0
网页游戏大师是一款专为网页游戏玩家量身打造的游戏软件，让玩家在玩网页游戏的过程中，有像客户端游戏一般的优良体验，丰富的精品游戏内容，随时收藏自己喜爱的、常玩的游戏，特有的游戏资源极速加载技术能够让网页
更新：14-01-16&&大小：3.4M&&类别：网页游戏
浓缩了整整一代人的青春和热血的《魂斗罗》手机版即将上线,你是否做好准备迎接重温经典的准备？当熟悉的音乐响起,当熟悉的人物出现时,大脑是否又会回到当年三五成群与伙伴一起红白机的年代？
更新：13-05-25&&大小：2.0M&&类别：动作冒险
具有３Ｄ效果的动态变色字体，包含10个数字。喜欢的就下啦。
更新：12-08-30&&大小：285KB&&类别：QQ表情
&QQ表情的使用方法：直接对着图片点右键复制，然后粘贴到QQ输入框里即可。
以下是2009年12月日历壁纸，规格为，QQTN友情提示：请&右击大图&再点&图片另存为&保存图片。
如何添加qq表情 1、选择图片 2、点击右键 3、在目录里找到&添加到qq表情&选项　　预览：预览图1预览图2预览图3预览图4预览图5预览图6预览图7..
&QQ表情的使用方法：直接对着图片点右键复制，然后粘贴到QQ输入框里即可。 图片1 图片2 图片3 图片4
斗罗大陆3d页游辅助
斗罗大陆页游是由唐家三少的精品小说斗罗大陆改编而来，游戏是一款页游，制作团队重新再现原著场景，完美还原剧中人物，百分百忠于原著。想象着我们曾熬夜阅读，想象我们曾期待的更新，现在，有了这款游戏，我们不玩
斗罗大陆3d页游挂机助手下载 1.0 绿色版
其他版本下载
洛克王国东哥辅助最新版是一款绿色纯净的洛37游戏盒子是国内页游大佬37游戏专为其运营完美游戏平台主要提供了游戏多开、优化、管魔幻英雄英文名Strife，是款第二代MOBA游戏国服版我的世界正式上线啦，由网易游戏代理多玩天涯明月刀盒子拥有一键答题、捏脸数据魔兽争霸官方对战平台是暴雪官方唯一指定平LOL伴侣助你走向王者之路，主要提供游戏直播《极品飞车online》由腾讯游戏运营，是极品英雄联盟lol日服客户端已经正式发布啦，不少
本类月下载排行
12345678910您当前的位置： >
> 3D坦克争霸怎么修改钻石和弹药数量 修改辅助工具分享
3D坦克争霸怎么修改钻石和弹药数量 修改辅助工具分享
时间： 16:44:06　　来源：斗蟹游戏　　编辑：斗蟹　　浏览：151
在3D坦克争霸游戏中，钻石和弹药的数量是玩家获胜的一个重要因素。怎么修改这些属性呢？今天跟大家推荐一种使用工具修改的方法，下面就跟大家一起看看下面的3D坦克争霸怎么修改钻石和弹药数量 修改辅助工具分享吧。工具名称辅助类型下载地址实用工具这款修改器可以帮助玩家修改钻石和弹药数量。使用方法如下：1、打开修改器；2、运行游戏；3、查看钻石以及弹药数量并记录下数值；4、打开修改器输入数值进行自动搜索；5、进入到游戏 改变钻石弹药数量并记录下新的数值；6、切换到修改器输入数值，如此循环几次只到出现想要的数并进行修改；7、回到游戏，即可体验到效果了！
游戏语言：简体中文
游戏类型：即时战略
游戏大小：194.81 MB
更新时间：
操作系统：XP / VISTA / WIN
共 7 人评分
（1445）人阅读
（55）人阅读
（94）人阅读
（51）人阅读
（81）人阅读
（464）人阅读
（30）人阅读
（457）人阅读
（55）人阅读
（355）人阅读
热门手游攻略您的当前位置：> >N卡详细设置方法让游戏更加流畅不卡顿
N卡详细设置方法让游戏更加流畅不卡顿
23:39:29 条|来源：多玩永恒之塔论坛|作者：汪小蕾|
　　多重取样性能较高、画质稍弱，超级取样性能较低、画质较好，请根据对游戏画面要求选择；默认“关”。
　　打开NVIDIA显卡驱动的控制面板，右键单击桌面，选择NVIDIA控制面板。进入3D设置的&管理3D设置&，在全局设置&可以看到3D性能控制选项。
&三重缓冲&，该选项在开启垂直同步后有效，一般建议&关&；
&各向异性过滤&，该选项对于游戏画质有明显提高，按照自己显卡等级选择倍数，建议低端显卡选4x，中端显卡选8x，高端显卡选16x。
&垂直同步&，是指显卡为了保持与显示器之间的刷新频率平衡，而将游戏刷新频率上限锁定在与显示器相同的刷新频率。
　　如果屏幕刷新频率是60hz的话，游戏画面速度将受60帧/秒限制，建议&强行关闭&。&多显示器/混合GPU加速&，该选项只有在使用多个显示设备时有效，一般保持默认&多显示器性能模式&即可。
　　4、 &平滑处理-模式&，该选项是选择是否要在驱动中强行控制游戏反锯齿，若游戏本身有AA选项，则可选择
&应用程序控制的&；
　　若希望在驱动中强行设置，则应选&替换任何应用程序设置&。平滑处理-灰度纠正&，该选项开启后可以让AA效果更佳，性能下降很少，一般建议&开&。
&平滑处理-设置&，该选项只有当选择了&替换任何应用程序设置&才能调节，2x、4x、8xQ、16xQ为MS取样，8x、16x为CS取样；
　　其中MS取样性能下降比较大，CS取样在效果和性能上取得平衡点；此选项自己按照显卡性能选择；默认&无&。
&平滑处理-透明度&，该选项就是设置透明抗锯齿模式，透明抗锯齿模式可以实现非边缘AA，抗锯齿效果更佳；
　　多重取样性能较高、画质稍弱，超级取样性能较低、画质较好，请根据对游戏画面要求选择；默认&关&。
&最大预渲染帧数&，该选项就是画面刷新的速度，数字越大就越顺畅,越小就越卡。
　　&预先渲染的最大帧&是用于垂直刷新同步模式被关闭后，在显卡处理游戏画面前，所需要准备的帧数目。所以理论上越高越流畅，这个流畅只是指动作连贯而不是帧数高，但是设置太高会造成输入延迟和可能造成慢动作等问题。
本文由多玩 汪小蕾 发布，转载请注明作者及出处，与作者互动交流请
今日重点推荐
你觉得这篇文章怎么样？
本周给力新闻排行
05.23 05.21 05.10 05.09 05.03
精彩视频推荐
Aion你问我答
07.31 07.30 07.30 07.29 07.28 07.27 07.25 07.23 07.21
4.75热门资料
友情链接： |}