<body>
<center>
<canvas id="cavsElem" width="800" height="560" style="border: 1px solid black ">你的浏览器不支持此涂鸦板</canvas>
画笔颜色：<input type="color" id="context.color" />
画笔大小:<input type="number"id="context.size" max="10" value="1" />
</center>
<script>
(function(){
var canvas=document.getElementById('cavsElem')//获得画布
var context=canvas.getContext('2d')//准备画笔
var a=document.getElementById('context.color')
var b=document.getElementById('context.size')
canvas.onmousedown=function(e){ //鼠标触发onmousedown事件时,获取起始坐标
var x=e.clientX-canvas.getBoundingClientRect().left
var y=e.clientY-canvas.getBoundingClientRect().top
context.beginPath()
context.moveTo(x,y)
canvas.onmousemove=function(event){ //触发鼠标移动事件时，获取绘制线条的坐标
var x=event.clientX-canvas.getBoundingClientRect().left
var y=event.clientY-canvas.getBoundingClientRect().top
context.lineTo(x,y)//绘制线条
context.strokeStyle=a.value
context.lineWidth=b.value
context.stroke()
}
canvas.onmouseup=function(event){ //鼠标被松开时，返回null
canvas.onmousemove=null
}
}
}())
</script>
</body>
本案例用到的技能： 1.加载模型 2.相机移动 3.鼠标选中模型 4.在场景中加入新的物体 5.物体沿路径移动 5.第一视角巡视 7.canvas画布自适应-页面窗口改变时模型不变形 首先新建react项目，引入Three，新建一个加载模型的class方法类，用于处理模型相关的操作。 主要思想是将图形组件与前端页面分离，降低图形组件与前端业务逻辑的耦合度。在图形组件中将方法暴露出来，前端页面来调用即可。 图形组件的class方法 初始化及加载模型： 渲染场景 canvas画布自适应窗口变化的方法： 鼠标选中模型的方法 // 鼠标点击时相机移动，即改变相机位置和中心点位置，以显示点击物体的最佳视角 在场景中加入一个新的立方体，并在立方体上加入相机，后面物体沿轨迹移动时调用物体身上的相机，实现以物体的视角展示模型 在场景中加入路径，物体沿着此路径移动 // 立方体沿路径移动和停止的方法，调用时执行 // 调用立方体上面的相机，展示第一视角 前端页面调用 页面中展示模型的canvas、信息div，操作按钮 实例化模型加载方法 // 鼠标移动和点击时将鼠标的位置传过去，在图形组件中转裁剪坐标，以判断是否选中物体 // 点击巡视按钮时调用立方体上的相机，并使立方体沿轨迹移动项目中需要做远程控制,可以传输指令和音频,领导说用前端做,整合到h5中,于是研究了一下webRTC,基本能解决需求.就把项目简化写了一个demo分享出来
核心就是两端通过内网nat穿透建立p2p连接,这里我将peerB作为主控端,初始化时,连接本机获取本地icecandidate,这里icecandidate可以理解为内网nat对外网的映射,可以直接在公网访问的地址,可以是一个公网域名,也可以是服务器ip+端口,获取之后,通过http传输给TURN中继服务器,由中继服务器转发给peerA,这里peerA和peerB由登录的用户组来控制,进行不同的初始化设置.
在socket初始化时,获取本地地址,进而换取icecandidate
peerB作为主控端,主动发起连接,发出offer,设置本地LocalDescription和远端RemoteDescription,都是同一个offer标志,peerA接收到请求后回复answer,设置本地LocalDescription和远端RemoteDescription,都是同一个answer标志,此时连接完成,会自动调用peerA和peerB的onopen事件,可以进行双工通信
信令格式可以自定义,我这里是简化demo,所以就简单的放置了clientX, clientY, type, target, innerText 五个参数,都是从鼠标事件中获取的,获取之后用相应的信道进行发送,远端注册相应的onmessage函数进行处理即可
鼠标事件不可连续发送,由于js线程和ui线程是互斥的,连续发送事件会造成ui阻塞,所以必须按一定的时间间隔进行发送鼠标位置
在接收端,设置一个old标志,第一次接收到数据并不绘制,保存起来,从第二次接收到数据开始与前一帧数据进行运算,插值绘制鼠标轨迹,可以有效提升性能.
以上就是webRtc信令传输实现远程控制的基本思路,音频也是类似,当p2p通道建立起来之后,整个连接可以复用多条udp连接,直接进行音频推送就可以实现语音和鼠标控制事件同时发送给被控端了
demo地址: https://github.com/gusuziyi/Remote-control.git
