Mutiply AR

Project setup

npm install

Compiles and hot-reloads for development

npm run electron:serve

Compiles and minifies for production

npm run electron:build

多人体感协作实现

视讯模块 (Websocket + WebRTC)

双人和多人的区别在于是否要使用池子来管理多个RTCPeerConnection

一、 单向: ClientA发起场景, ClientB加入场景

1、 A创建场景，将A的SDP发予Signaling

{ type: 'offer', sdp: OBJECT(SDP-A) }

2、 等待其它客户端加入场景，假设现有B要加入场景

B将要加入的场景的创建者的id发予Signaling

{ type: 'id', id: id-A }

3、 Signaling通过(2)中的id寻找到对应客户端的SDP，发还给B, 若找不到则sdp: false

{ type: 'offer', sdp: OBJECT(SDP-A) }

4、 B将SDP-A设置为remoteSDP, 创建Answer更新localSDP， 将SDP(answer)发予A

{ type: 'answer', id: id-A, sdp: Answer }

5、 Signaling通过(4)中的id寻找到对象，将B发来的sdp通过对象主动发予给A

{ type: 'answer', sdp: Answer }

6、 A设置remoteSDP为Answer, 连接完成

7、 关闭WebRTC(连接方B让A去关闭, A要关闭可直接关闭)

{ type: 'close', id: id-A }

尚待解决的BUG √ ×

1、 B关闭时应通知Signaling关闭对应通道, C加入时，无法与A进行连接 【√】

2、 长按事件的起初停顿问题: 操作系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间 【√】

3、 多按键事件发生时若松开其中一个按键，物件行走的方向不正确 【√】

4、 动作停止时无法把动作动画的帧数走完, 会呈现暂停状态 【√】

5、 欧拉变换的万向节锁问题 【√】

6、 欧拉角和四元数变换时使用atan2 在角度变换的时候x轴会有卡顿现象 【√】

7、 冲刺时先放开方向键, 停止后再放开Shift后, 再冲刺需要再触发一次Shift的弹起才能生效 【×】

8、 连续点击多次造成程序卡死崩溃 【√】

遇到的难点

1、 WebRTC的使用

2、 * 多按键同时触发的监听事件

3、 Three.js的使用

4、 多人视频的实现

5、 物体根据相机的方向行走

6、 相机锁定物体移动

7、 同一个模型多个动画的切换

8、 * 长按事件的起初停顿问题: 操作系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间

9、 用户无操作时在随机间隔时间内 模型播放特定的动作动画

10、 欧拉角到四元数的过渡

11、 物理引擎的引入

12、 跳跃动作的实现

13、 Mediapipe的使用

THREE相关

1、 物体辅助轴绿色y 蓝色z 红色x

2、 物理盒子的position起点在中心, three的物体则是在底端 ***

操作相关

客户端启动后，若未开视频，则可以用方向键移动，开视频后可以使用手势操作

1、 支持上下左右、斜角移动、鼠标控制视角

2、 支持冲刺(Shift)、跳跃(Space)

3、 先Shift后方向键时冲刺无效

4、 跳跃时不可操作其它动作(鼠标可以控制视角), 操作其它动作时可跳跃

使用手势控制时

左手用于加速或跳跃， 右手用于控制方向 () 右手: 1、大拇指伸向👉为👉向移动;
2、大拇指指伸向👈为👈向移动; 3、正向食指向上为向前移动; 4、正向食指+中指为向后移动; 5、其它动作无效

左手: 1、五指伸开为加速 2、正向食指向上为跳跃 3、其它动作无效(包含无左手)

待修改

应将相机的视角更改为角色前方视角(现在为角色位置)