自己学习记录05

摇杆数据控制物体移动

通过webRTC连接，将gamepad数据通过datachannel通道传输到untiy来，直接控制物体移动

  dataChannel.OnMessage = bytes => {
            string message = System.Text.Encoding.UTF8.GetString(bytes);
            MyObject myObject = JsonUtility.FromJson<MyObject>(message);

            // 将x和y应用到物体的移动
            cube.transform.position += new Vector3(myObject.x * 0.05f, myObject.y * 0.05f, 0);
        };

 datachannel接收数据：

DataChannel | WebRTC | 3.0.0-pre.5 (unity3d.com)

WebRTC | WebRTC | 3.0.0-pre.5 (unity3d.com)

Receive messages

The RTCDataChannel.OnMessage delegate is used to receive messages.

// Register OnMessage delegate.
channel.OnMessage = bytes => 
{
    // ...
}

添加joystick2

可以使用 nipplejs 库创建多个可拖动的虚拟摇杆，并将它们的控制信号通过 DataChannel 实现数据传输。

import nipplejs from "nipplejs"

class JoyRtcComponent extends HTMLElement {
  // ... 其他代码 ...

  constructor() {
    // ... 其他代码 ...

    const pad1 = document.createElement("div")
    pad1.innerText = "Joystick 1"
    const ipad1 = document.createElement("div")
    pad1.appendChild(ipad1)
    this.root.appendChild(pad1)

    const pad2 = document.createElement("div")
    pad2.innerText = "Joystick 2"
    const ipad2 = document.createElement("div")
    pad2.appendChild(ipad2)
    this.root.appendChild(pad2)

    const instance1 = nipplejs.create({
      zone: ipad1,
      mode: 'static',
      position: { top: '50%', left: '50%' },
      dynamicPage: true,
      restOpacity: 0.6,
      fadeTime: 200,
    })

    instance1.on('move', (e, data) => {
      console.log(e, data)
      this.dc?.send(JSON.stringify({ joystick: 1, vector: data.vector }))
    })

    const instance2 = nipplejs.create({
      zone: ipad2,
      mode: 'static',
      position: { top: '50%', left: '50%' },
      dynamicPage: true,
      restOpacity: 0.6,
      fadeTime: 200,
    })

    instance2.on('move', (e, data) => {
      console.log(e, data)
      this.dc?.send(JSON.stringify({ joystick: 2, vector: data.vector }))
    })

    // ... 其他代码 ...
  }

  // ... 其他代码 ...
}

customElements.define('joy-rtc', JoyRtcComponent)
export default JoyRtcComponent

 在此示例中，我创建了两个摇杆控制器 pad1 和 pad2，并分别通过 DataChannel 发送它们的控制信号。你可以根据需要添加更多的摇杆控制器，并在事件回调函数中监听每个摇杆的移动事件，将相应的控制信号发送到 DataChannel 中。

两个摇杆控制物体

要将joystick1和joystick2都用于控制飞机，您可以按照以下步骤进行修改：

1、创建一个新的自定义类，以匹配包含两个摇杆数据的消息格式。

[System.Serializable]
public class JoystickData
{
    public float x;
    public float y;
}

[System.Serializable]
public class MessageData
{
    public JoystickData joystick1;
    public JoystickData joystick2;
}

2、在接收到的消息中提取joystick1和joystick2对象的x和y值。 

MessageData messageData = JsonUtility.FromJson<MessageData>(message);
float joystick1X = messageData.joystick1.x;
float joystick1Y = messageData.joystick1.y;
float joystick2X = messageData.joystick2.x;
float joystick2Y = messageData.joystick2.y;

完整修改后的代码如下所示：

dataChannel.OnMessage = bytes => {
    string message = System.Text.Encoding.UTF8.GetString(bytes);
    MessageData messageData = JsonUtility.FromJson<MessageData>(message);
    float joystick1X = messageData.joystick1.x;
    float joystick1Y = messageData.joystick1.y;
    float joystick2X = messageData.joystick2.x;
    float joystick2Y = messageData.joystick2.y;
    Debug.Log(message);
    // 将x和y应用于飞机的控制
   


 
    /
};

添加切换摄像机的按钮

 

		const buttonClick = document.createElement("button");
		buttonClick.innerText = "点击我";
		buttonClick.addEventListener("click", () => {
			this.handleClick();
		});

		this.root.appendChild(buttonClick);

 按下切换摄像机按钮发送消息

按照以下方式编写handleClick方法：

handleClick() {
  const message = { type: "camera_mode_toggle" };
  this.dc?.send(JSON.stringify(message));
}

 这将创建一个包含"type"属性为"camera_mode_toggle"的消息对象，并通过数据通道发送该消息。你可以根据需要调整消息的内容和格式。

unity接收消息，写逻辑来切换摄像机视角