# Mutiply-Meeting-Player-Client

**Repository Path**: java-spring/mutiply-meeting-player-client

## Basic Information

- **Project Name**: Mutiply-Meeting-Player-Client
- **Description**: 基于Vue+Electron的3D场景手势识别控制Demo
使用Three.js+Cannon.js+Google的Mediapipe
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-10-19
- **Last Updated**: 2022-10-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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、其它动作无效(包含无左手)



###  待修改

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