在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制。
首先是场景截图:
上图在场景中导入一个Babylon骨骼模型,使用asdw、空格、鼠标控制加速度移动,在移动时播放骨骼动画。
上图在场景中加入更多的骨骼模型(兔子),兔子感知到人类接近后会加速远离人类。
上图,一个局域网中的新玩家进入场景,(他们头上的数字是WebSocket分配的session id),兔子们受到0和1的叠加影响。
具体实现:
一、工程结构:
前台WebStorm工程:
其中map.jpg是地形高度图,tree.jpg不是树而是地面泥土的纹理。。。
LIB文件夹里是引用的第三方库(babylon.max.js是2.4版),MYLIB文件夹里是我自己编写或整理修改的库,PAGE里是专用于此网页的脚本文件
其中FileText.js是js前台文件处理库(这里只用到了其中的产生日期字符串函数)
MoveWeb.js是加速度计算库
Sdyq.js里是对物体对象的定义和操作监听
Player.js里是继承了物体对象的玩家对象和动物对象的定义
utils是一些其他工具
View是页面控制库
MODEL文件夹里是人物和兔子的骨骼模型文件。
后台MyEclipse工程:
使用JDK1.7,因为Tomcat v8.0里包含了WebSocket所用的库,所以不需要引入额外jar包,只写了一个类。
二、基本场景构建和骨骼模型导入:
html页面文件:
1
2
3
4
5
使用websocket联网进行数据传递,这个节点应该既可以做主机也可以加入他人的主机6
7
8
9
10
11