unity楼层内摄像头模型设计碰撞点击、hover等功能及与web交互视频流显示全流程记录

一、Unity端开发

（1）楼层模型设计碰撞点击

在unity工程中依次点击左侧层级楼层内的摄像头模型----点击右侧检查器内的【添加组件】按钮----点击 Box Collider----在Box Collider组件内点击【编辑碰撞器】----调整碰撞器的四周位置，使得摄像头模型被碰撞器边界线完全包裹

 以上方法依次处理各个摄像头模型。

（3）编写碰撞体碰撞处理脚本

（3.1）

　　在unity项目层级下的Scripts文件夹下新建脚本CameraColliderAndHover.cs；在脚本内部删除自动生成的void Start(),void Update()方法（用于该脚本用户处理hover事件和click事件，用不到帧相关操作）；在脚本追加摄像头的基础属性配置信息

 （3.2）依次将脚本绑定到摄像头中，并填写摄像头基础属性信息

 （3.3）在unity项目层级下的Plugins下新建CameraHover&Click.jslib中间件文件，用于后续unity事件被监听后，调用中间件指定方法，再通过该方法内部调用web端暴露的js函数，实现unity--->web通信交互

 

 （3.4）引入jslib中间件函数、编写C#脚本hover事件与点击事件的业务逻辑

CameraHover&Click.jslib中间件内部定义：

mergeInto(LibraryManager.library, {
//摄像头被hover时
    CameraBeHovering: function (cameraname, cameraip,x, y) {
        var cameraname = UTF8ToString(cameraname);
        var cameraip = UTF8ToString(cameraip);

        // 调用网页上暴露的全局方法
        if (window.ShowCameraTooltip) {
            window.ShowCameraTooltip(cameraname, cameraip,x, y);
        }
    },
//摄像头被hover后离开时
    CameraBeHovered: function () {
        if (window.HideCameraTooltip) {
            window.HideCameraTooltip();
        }
    },
//摄像头被点击时
    CameraBeClicked: function (cameraname, cameraip) {
        var cameraname = UTF8ToString(cameraname);
        var cameraip = UTF8ToString(cameraip);

        if (window.HandleCameraClick) {
            window.HandleCameraClick(cameraname, cameraip);
        }
    }
});

CameraColliderAndHover.cs内部定义：

using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.EventSystems;

/// <summary>
/// 用于处理第二页楼层内摄像头模型的点击事件和hover事件的处理（也会涉及unity通知jslib进而调用webjs逻辑）
/// </summary>
public class CameraColliderAndHover : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler,IPointerClickHandler
{
    [Header("摄像头名称/位置")]
    public string cameraName;

    [Header("摄像头IP")]
    public string cameraIP;


    ////--------------- 引入中间件jslib定义的中间方法 （会自动搜索中间件方法）----------------------
    //注意：
    //.jslib 定义的函数只会在 WebGL 构建产物里被 Unity 的 WebGL 桥接系统生成/绑定成可调用的符号；在 **Editor 里运行（UNITY_EDITOR）**时，这个符号根本不存在
    //所以在函数调用处，加 #if UNITY_WEBGL && !UNITY_EDITOR #else #endif等判断，避免unity editor调试时报错！！

    //摄像头被hover时
    [DllImport("__Internal")]
    private static extern void CameraBeHovering(string cameraname,string cameraip,float x,float y );

    //摄像头被hover后离开时
    [DllImport("__Internal")]
    private static extern void CameraBeHovered();

    //摄像头被点击时
    [DllImport("__Internal")]
    private static extern void CameraBeClicked(string cameraname, string cameraip);


    ////--------------- hover、click业务逻辑方法 ----------------------


    /// <summary>
    /// 1. 实现IPointerEnterHandler接口方法
    /// 
    /// 摄像头被hover时
    /// </summary>
    /// <param name="eventData"></param>
    public void OnPointerEnter(PointerEventData eventData)
    {
        //获取鼠标hover时的转换到屏幕平面的（X,Y）位置
        float webX = Input.mousePosition.x;
        //注意：Unity的Y轴是从下往上；而Web的Y轴是从上往下
        float webY = Screen.height - Input.mousePosition.y;
#if UNITY_WEBGL && !UNITY_EDITOR
        CameraBeHovering(cameraName, cameraIP, webX, webY);//调用中间件方法
#else
        Debug.Log($"摄像头被hoverl了,webX,WebY：{webX}，{webY}");
#endif
    }


    /// <summary>
    /// 2. 实现IPointerExitHandler接口方法
    /// </summary>
    /// <param name="eventData"></param>

    public void OnPointerExit(PointerEventData eventData)
    {
#if UNITY_WEBGL && !UNITY_EDITOR
        CameraBeHovered();//调用中间件方法
#else
        Debug.Log($"摄像头hover离开，触发隐藏！");
#endif
    }


    /// <summary>
    /// 3. 实现IPointerClickHandler接口方法
    /// </summary>
    /// <param name="eventData"></param>
    public void OnPointerClick(PointerEventData eventData)
    {
#if UNITY_WEBGL && !UNITY_EDITOR
        CameraBeClicked(cameraName, cameraIP);
#else
        Debug.Log($"摄像头被点击，触发通知web端显示弹出框并显示视频流！");
#endif 
    }

}

二、Web端开发