你的位置:首页 > 软件开发 > 网页设计 > 结合WebSocket编写WebGL综合场景示例

结合WebSocket编写WebGL综合场景示例

发布时间:2016-11-05 15:00:07
在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制。首先是场景截图:上图在场景中导入一个Babylon骨骼模型,使用asdw、空格、鼠标控制加速度移动,在移动时播放骨骼动画。上图在场景中加入更多的骨骼模型(兔子),兔子感知到人类接近后 ...

在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制。

首先是场景截图:

结合WebSocket编写WebGL综合场景示例

上图在场景中导入一个Babylon骨骼模型,使用asdw、空格、鼠标控制加速度移动,在移动时播放骨骼动画。

结合WebSocket编写WebGL综合场景示例

上图在场景中加入更多的骨骼模型(兔子),兔子感知到人类接近后会加速远离人类。

结合WebSocket编写WebGL综合场景示例

上图,一个局域网中的新玩家进入场景,(他们头上的数字是WebSocket分配的session id),兔子们受到0和1的叠加影响。

 

具体实现:

一、工程结构:

 前台WebStorm工程:

结合WebSocket编写WebGL综合场景示例

其中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工程:

结合WebSocket编写WebGL综合场景示例

使用JDK1.7,因为Tomcat v8.0里包含了WebSocket所用的库,所以不需要引入额外jar包,只写了一个类。

二、基本场景构建和骨骼模型导入:

html页面文件:

结合WebSocket编写WebGL综合场景示例结合WebSocket编写WebGL综合场景示例
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>使用websocket联网进行数据传递,这个节点应该既可以做主机也可以加入他人的主机</title> 6 </head> 7 <body> 8 <div id="all_base" style="position:fixed;top:0px;left: 0px;"> 9   <div id="div_canvas" style="float: left;width: 75%;border: 1px solid">10     <canvas id="renderCanvas" style="width: 100%;height: 100%"></canvas>11   </div>12   <div id="div_log" style="float: left;border: 1px solid;overflow-y: scroll">13   </div>14   <div id="div_bottom" style="float: left;width: 100%;height: 100px;padding-top: 10px;padding-left: 10px">15     <input style="width: 200px" id="str_ip" value="localhost">16     <input id="str_name">17     <button id="btn_create" onclick="createScene()" disabled=true>启动场景</button>18     <button id="btn_connect" onclick="Connect()" >websocket连接</button>19     <button id="btn_close" onclick="Close()" disabled=true>关闭连接</button>20     <span id="str_id" style="display: inline-block"></span><br><br>21     <input style="width: 400px" id="str_message">22     <button id="btn_send" onclick="Send()">发送</button>23   </div>24 </div>25 <script src='/images/loading.gif' data-original="../JS/LIB/babylon.max.js"></script>26 <script src='/images/loading.gif' data-original="../JS/MYLIB/View.js"></script>27 <script src='/images/loading.gif' data-original="../JS/LIB/jquery-1.11.3.min.js"></script>28 <script src='/images/loading.gif' data-original="../JS/MYLIB/FileText.js"></script>29 <script src='/images/loading.gif' data-original="../JS/MYLIB/Sdyq.js"></script>30 <script src='/images/loading.gif' data-original="../JS/MYLIB/player.js"></script>31 <script src='/images/loading.gif' data-original="../JS/MYLIB/MoveWeb.js"></script>32 <script src='/images/loading.gif' data-original="../JS/MYLIB/utils.js"></script>33 <script src='/images/loading.gif' data-original="../JS/PAGE/scene_link.js"></script>34 <script src='/images/loading.gif' data-original="../JS/PAGE/WebSocket.js"></script>35 </body>36 <script>37   var username="";38   window.onload=BeforeLog;39   window.onresize=Resize_Pllsselect;40   function BeforeLog()41   {42     Resize_Pllsselect();43     //DrawYzm();44     //createScene();45   }46   var str_log=document.getElementById("div_log");47   function Resize_Pllsselect()48   {49     var size=window_size();50     document.getElementById("all_base").style.height=(size.height+"px");51     document.getElementById("all_base").style.width=(size.width+"px");52     document.getElementById("div_canvas").style.height=(size.height-100+"px");53     str_log.style.height=(size.height-100+"px");54     str_log.style.width=((size.width/4)-4+"px");55     if(engine!=undefined)56     {57       engine.resize();58     }59   }60 61   var state="offline";62 63   var arr_myplayers=[];64   var arr_webplayers=[];65   var arr_animals=[];66   var arr_tempobj=[];//暂存对象初始化信息67   var tempobj;68 69   var canvas = document.getElementById("renderCanvas");70   var ms0=0;//上一时刻毫秒数71   var mst=0;//下一时刻毫秒数72   var schange=0;//秒差73 74   var skybox,75       scene,76       sceneCharger = false,77       meshOctree,78       cameraArcRotative = [],//弧形旋转相机列表79       octree;80   var engine;81   var shadowGenerator ;82 83 </script>84 </html>

原标题:结合WebSocket编写WebGL综合场景示例

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。