在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制。首先是场景截图:上图在场景中导入一个Babylon骨骼模型,使用asdw、空格、鼠标控制加速度移动,在移动时播放骨骼动画。上图在场景中加入更多的骨骼模型(兔子),兔子感知到人类接近后 ...
在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 <!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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:结合WebSocket编写WebGL综合场景示例
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。