MMSDT.videoBlend()
利用RGB颜色叠加着色器渲染、相机矩阵融合，让二维监控摄像头无缝融合进三维场景中。
Tips：1、查看监控视频的时候，需调低环境光线，否则颜色融合的时候会曝光。
2、需先进行视频流转换绘图。
3、三维引擎版本需升级至V861以上（不含）的Bata版本。
构造函数
MMSDT.videoBlend( option:object, callback:function )
option - 对象，监控参数设置。
video: 对象，视频材质。
position: 数组，xyz监控摄像机位置。
target: 数组，xyz摄像机目标位置。
angle: 数字0~360，监控摄像机的广角度。
size: 数字，监控摄像机的范围。
callback - 回调函数，初始化完成。
属性
.visible( Boolean )
显示或隐藏该点的监控摄像机图像，布尔值。true显示，false隐藏
.helper( Boolean )
显示或隐藏该点的监控摄像机线框范围，布尔值。true显示，false隐藏
.target( position )
改变该监控摄像机的照射方向位置，数组。xyz坐标值
代码示例
var config = {
edit: false, //是否编辑状态，true编辑状态，false监控状态
exception: [], //需要材质拆分的网格名称
instancing: [], //合并实例化网格名称
shadowSide: false, //物体模型的背面是否产生阴影，true有阴影，false背面没有，默认false
shadowUpdata: true, //阴影是否自动更新，true实时自动更新，false仅在初始化的时候生成固定阴影，默认true
gpuTesting: ["GTX","RTX"], //显卡检测，没包含的型号会弹出提示框，该对象为空则默认不检测
}
MMSDT.initScene( config );
//设置第3人称鼠标控制器
controls3.maxPolarAngle = Math.PI*0.49; //向下，最大角度限制
controls3.maxDistance = 800; //最远距离限制
controls3.screenSpacePanning = false; //右键平移是否上下移动
controls3.enableDamping = true; //是否开启惯性阻尼
controls3.dampingFactor = 0.1; //惯性阻尼系数
//使用json文件让场景还原
MMSDT.onloadScene( "models/mms3D_louceng1.json", function(progress){
//显示进度条数字
if( typeof progress === 'number' ){
document.getElementById("loadNum").innerHTML = Math.round( progress )+'%';
//加载完成
}else if( progress == 'done' ){
onloadDone();
//渲染完成
}else if( progress == 'ok' ){
}
});
//定义变量
var videoTwins=[], configs=[], videos=[];
//测试视频，实际项目中换成监控流媒体
videos[0] = new MMSDT.videoMaterial('firstVideo1');
videos[1] = new MMSDT.videoMaterial('firstVideo2');
videos[2] = new MMSDT.videoMaterial('firstVideo3');
//场景加载完成
function onloadDone(){
//3个摄像头的视频融合参数
configs[0] = {
video: videos[0].material.map, //视频材质
position: [65,56,103], //监控摄像机位置
target: [15,4,87], //摄像机目标位置
angle: 60, //监控摄像机的广角度
size: 200, //监控摄像机的范围
}
configs[1] = {
video: videos[1].material.map, //视频材质
position: [45,58,103], //监控摄像机位置
target: [70,11,76], //摄像机目标位置
angle: 60, //监控摄像机的广角度
size: 150, //监控摄像机的范围
}
configs[2] = {
video: videos[2].material.map, //视频材质
position: [40,55,76], //监控摄像机位置
target: [55,1,130], //摄像机目标位置
angle: 60, //监控摄像机的广角度
size: 150, //监控摄像机的范围
}
for( let i=0; i < configs.length; i++ ){
//初始化视频融合
videoTwins[i] = new MMSDT.videoBlend( configs[i], function(){
if( i == 0 ){
videoTwins[i].visible(true); //只显示1号监控，默认是隐藏的
}
});
}
}
//自定义对外函数接口------------------------------------------------------------------------
//监控显示隐藏
var videoD1=true, videoD2=false, videoD3=false;
MMAPI.cameraBlend = function(num){
switch(num) {
case 0: //一号监控
videoD1=!videoD1;
videoTwins[0].visible(videoD1);
break;
case 1: //二号监控
videoD2=!videoD2;
videoTwins[1].visible(videoD2);
break;
case 2: //三号监控
videoD3=!videoD3;
videoTwins[2].visible(videoD3);
break;
}
}
//摄像机线框显示隐藏
var wireframeV=true;
MMAPI.cameraHelp = function(){
wireframeV=!wireframeV;
videoTwins[0].helper(wireframeV);
videoTwins[1].helper(wireframeV);
videoTwins[2].helper(wireframeV);
}
//镜头聚焦摄像机视角
MMAPI.focusCamera = function(num){
MMSDT.cameraTarget( configs[num].target, configs[num].position, 1000 );
//系统相机的广角度与监控摄像头的广角度同步
setTimeout(function(){
camera.fov = 60;
camera.updateProjectionMatrix();
},1000)
}
//恢复视角
MMAPI.restoreCamera = function(){
MMAPI.resCamera();
camera.fov = 45;
camera.updateProjectionMatrix();
}
//调整1号监控位置
MMAPI.targetPosition1 = function(value){
configs[0].target[0] = value;
videoTwins[0].target( configs[0].target );
}
MMAPI.targetPosition2 = function(value){
configs[0].target[1] = value;
videoTwins[0].target( configs[0].target );
}
MMAPI.targetPosition3 = function(value){
configs[0].target[2] = value;
videoTwins[0].target( configs[0].target );
}
//调整2号监控位置
MMAPI.targetPosition4 = function(value){
configs[1].target[0] = value;
videoTwins[1].target( configs[1].target );
}
MMAPI.targetPosition5 = function(value){
configs[1].target[1] = value;
videoTwins[1].target( configs[1].target );
}
MMAPI.targetPosition6 = function(value){
configs[1].target[2] = value;
videoTwins[1].target( configs[1].target );
}
点击查看示例演示 →
Powered by mms3D