webGL,websocket,nodeJS做的3D的多人在线游戏,希望各位给点建议
发布于 2年前 作者 wangbin 3916 次浏览

第一次在这个社区发帖子……因为感觉这个社区的技术很好又有热情,所以才选择到这里发帖子,希望路过的朋友们能够帮帮忙…… 先说一下自己做的这个东西吧,我把它开源了并托管在github上,源代码地址在这里,它大概长这个样子……单机版的样子,最左侧是聊天系统,可以缩放到左下角,聊天系统支持广播和私聊两种方式,要先输入昵称才能进入聊天室,点击右侧昵称切换到私聊,点击右侧牛头换到广播(这奇葩的操作,我是怎么想的……)支持键盘操作,比如0-9切换枪,·键弹出系统菜单,空格跳跃,wasd行走等等,源码里有详细说明。 webGL这一块是用的Three.js这个开源库,包括模型的解析等,模型也是Three.js的例子上提供的,后台用的nodeJS,静态文件服务器跟websocket服务器没写在一起,websocket是用的nodeJS的socket.io模块,主要处理多人在线时的消息传输,先在这里感谢一下开源社区。 这个作品一眼看上去感觉效果挺好的,刚把这个东西做出来的时候也挺开心的,但是它存在很多的问题: 1.效率低下。因为要解析这个比较复杂的3D模型,所以在开始初始化的时候很容易导致浏览器崩溃。而且这个东西是前段时间通宵赶工赶出来的(那段时间郁闷极了才会这么逼自己),整个系统的结构,代码的结构,操作流程等等都没有怎么去考虑,只想赶快做出这个东西,所以有很多地方不合理,就比如支持多人在线这一块,本来应该是当有用户加入的时候动态生成一个3D模型,但是当时花了好久去弄,总是生成了一个没有纹理的模型,还不支持添加的键盘操作,然后很烦躁的把代码改成了一开始就初始化5个模型(所以多人也就最多5个人了……),然后有用户加入的时候把他们显示出来,真是坑爹…… 2.只支持chrome。只在chrome 19+做了实验,firefox问题不大,就是后来写css3动画的时候没有考虑firefox,IE就…… 3.存在一些已知或未知的bug。系统健壮性比较差,服务器偶尔会崩溃。现在github上的版本有点已知的bug还没有修改。 4.代码结构不好现在主要的逻辑都放在html文件里面了,还有不少的全局变量什么的,曾经想用seaJS模块化,但是失败了,因为事情比较多就没有继续尝试。 5.作品方向不能明确。这是最坑爹的,我一直在考虑webGL的前景以及这个作品未来的定位,webGL实在是不够成熟,自己做这个东西以后的方向是什么,自己有时也说不清楚。大一的时候看到有学长用openGL做了类似魔兽争霸的3D的游戏(效果什么的还是差很多,但是觉得确实做的很棒),但是被学院的教授们批评的体无完肤,就是因为作品方向的问题,我想现在我也遇到了类似的问题了吧…… 所以很希望有喜欢类似的作品的朋友提出建设性的意见,或者直接拿这份源码进行进一步的开发,只要这个作品能有用途就好。 简单说一下搭建服务器环境吧,server文件夹里面的server.js是静态文件服务器,要注意路径问题,start.js是websocket服务器,注意端口号。常规方式启动就好了,control_s.html里面的websocket服务器地址修改一下。 因为最近校园招聘比较多,这段时间奔波于各种宣讲会和笔试之间,按照以往的经验,一个项目放下一段时间后怎么也提不起兴趣再扩展了,所以也促成自己决心开源,不能让这个作品就这么烂尾了。当然里面吸取了很多开源的精华(虽然作品不咋的),也当作回馈开源社区,以后做出更好的作品还是会选择开源的。还有就是我的某个导师想把代码拿去,等下一级的学生做比赛用,个人觉得这种行为……而且这导师还忽悠我导致没能出去找实习,在他实验室苦逼了一暑假,真心觉得开源比拿去做比赛有意义太多太多了。在拿到正式工作的offer前估计是没多少时间写代码了,希望社区的对这个感兴趣的大神们能对那些问题进行优化或者有建设性的意见,小弟不胜感激!最近这段时间专心于校园招聘,最多修改一点小bug,也请多包涵。

37 回复

支持,关注,学习

支持,关注,学习,楼下保持队形。

好厉害. 想下载试玩一下, 求写 README

支持,关注,学习,收藏,楼下保持队形。

看起来好牛逼的样子。

好牛逼啊!!! 希望你等hujs上介绍的那个网易的游戏服务器框架开源之后对你的服务器端进行改进~~ 这个不是一般的牛逼啊! 3D模型怎么搞定的?一直不懂怎么做3D。

好牛逼啊!!! 希望你等hujs上介绍的那个网易的游戏服务器框架开源之后对你的服务器端进行改进~~ 这个不是一般的牛逼啊! 3D模型怎么搞定的?一直不懂怎么做3D。

互相学习~多谢~

嗯,写好了,上传上去了

多谢~互相学习~

只是看起来这样。。。估计真正看了代码就不会这样想了吧。。。

嗯,在关注网易要开源的框架。。 模型用3Dmax等建模工具建好(我不会,在网上找的模型),导出成.js格式的文件,数据是json格式,Three.js就能解析出来了,剩下的就是建立场景,设置摄像头,灯光等

3D模型应该是webGL做出来的

@wangbin 没玩起来啊…

➤➤ node server.js & node start.js &
[1] 26840
[2] 26841
➤➤    info  - socket.io started
Server is listening port 9099...
{}
{}

然后访问 http://localhost:9099/ 显示

请求的文件 /index.html 不在服务器上.

@jiyinyiyong sorry,当试图省事,就直接加了个文件夹把服务器端的东西放到server里面去了。其实server文件夹下面要新建一个app文件夹,然后把index.html,css那些东西放进去才行…

@wangbin 我等你 Github 上更新好了, Three.js 我没学会所以搞不来

很好很强大啊~膜拜~

@jiyinyiyong 调整了一下,应该可以了

是webGL的技术,用的Three.js这个类库

哎,雕虫小技啊…没什么东西…一直膜拜您写的那个博客应用啊……

@snoopy 吴哥有时候去看看webGL和openGL,有现有的库,很容易的,我们团队有一个就搞过,但具体不清楚,做出来的东西很神奇,据说是用js操作显卡的东东. http://mrdoob.github.com/three.js/

@a272121742 还有个基于 Three.js 的 tQuery, http://jeromeetienne.github.com/tquery/ 虽然难度降下来了, 但中文入门操作记录太少, 等待大哥开路

@wangbin 好了. 感觉很不错啊, 虽然还是有不少 bug 的.

@jiyinyiyong 要学的太多的,路漫漫其修远兮,吾将上下而求索,跪求神仙指路

支持,关注,学习,楼下保持队形。

目前客户端 js 绘图的效率是比较坑爹的,台式机都不一定吃得住,更别说移动终端了。

我看看能不能把服务端改为在“零秒”上运行,我个人虽然不是很看好 HTML5 的 3D 游戏,但算是个 DEMO 了。

是啊,光渲染模型就要好几秒,移动终端基本就不用考虑了肯定卡爆了……真不知道前景如何

哎……找工作忙了俩星期结果代码还是老样子……帖子也沉了……失落啊

運行之後畫面十分十分的慢!~ 到底有沒有使用到 顯卡的GPU ?

我在路由器上做了端口映射 (9099) 為什麼連不上 ?? 現在只有localhost:9099 能連得上

聊天室用不了, 也不能換槍的, 別人連上來後 根本見不到對方啊

有谁遇到过客户端socket.io连接上服务器端之后,服务器端不断接受到同一个客户端的连接请求,感觉客户端在不断轮询,不断触发服务器端的connection事件(我用的是express-2.5),不一会就产生大量的日志信息,都快把我的服务器撑爆了~~~~,不得不暂时关闭socket连接了。有什么方法能避免么?

刚才看了下socket.io的官方文档,原来socket.io参数是可以配置的。将log leve等级设置为1之后,日志量明显下降了,但是为啥服务器一直能不断监听到同一台客户端连接信息(就是不断触发connection),难道客户端这段代码保持连接服务器之后,服务器端没有做客户端识别么,采取不管时候是同一个客户端但只要在保持连接的情况下认为是不同客户端?所以才会定期去触发connection事件?

@waylon 又看了下官方的文档,connect事件是发生在连接初始化和保持连接持久化这两种情况下都会触发connect,难怪客户端连接到服务器之后会不断触发connect…

回到顶部