wukai
/
twin-web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="loading">正在加载模型中...</div>
		<!-- 添加呈现的video标签或img标签，并设置必要的css来控制其大小 -->
		<video id="EngineContent" autoplay muted style="width: 1900px;height:1080px;">浏览器不支持</video>
		<div>
			<button id="moveToHome" onclick="updateCamera(this)">移动到主视图</button>
			<!-- <button id="moveTo" onclick="updateCamera(this)">移动到指定相机参数</button>
			<button id="moveToCode" onclick="updateCamera(this)">移动到某个树节点(code)</button>
			<button id="moveToItem" onclick="updateCamera(this)">移动到某个树节点(item)</button>
			<button id="moveToPos" onclick="updateCamera(this)">移动到某个位置</button -->
			<!-- <button id="moveToAabbWithFace" onclick="updateCamera(this)">移动到包围盒某个面</button> -->
			<button id="moveToAabbWithDistance" onclick="updateCamera(this)">移动到包围盒某个面(Distance)</button>
			<!-- <button id="moveToAabbWithMatrix" onclick="updateCamera(this)">移动到包围盒某个面(Matrix)</button> -->
		</div>
		<div>
			<input type="text" id="color.value" value="0xA0522Dff" />
			<button id="itemColor" onclick="updateModel(this)">修改颜色</button>
			<button id="itemColorClean" onclick="updateModel(this)">颜色还原</button>
			<button id="selectItem" onclick="updateModel(this)">选中模型</button>
			<button id="selectAndMove" onclick="selectAndMove(this)">选中并移动到</button>

		</div>
		<div>
			<label>着色器(全局) </label><br />
			<select id="context.shaderIndex" onchange="onchangeSetting(this, 'int')"
				oninput="onchangeSetting(this, 'int')">
				<option value="0">未设置</option>
				<option value="1">物理光照-单灯</option>
				<option value="2">物理光照-双灯</option>
				<option value="3">物理光照-三灯</option>
				<option value="4" selected>颜色</option>
			</select>
			
			<div>
			    <label>环境光补偿</label><br />
			    <input type="range" id="ambientIndenty" min="0.00" max="1.00" step="0.01" value="0.5"
			           onchange="onchangeSetting(this, 'float')"
			           oninput="onchangeSetting(this, 'float')" /><span id="ambientIndentyValue"></span>
			</div>
			
			<div>
			    <label>光线强度</label><br />
			    <input type="range" id="diffuseIntensity" min="0.00" max="1.00" step="0.01" value="0.5"
			           onchange="onchangeSetting(this, 'float')"
			           oninput="onchangeSetting(this, 'float')" /><span id="diffuseIntensityValue"></span>
			</div>
			
			<div>
			    <label>高光强度</label><br />
			    <input type="range" id="specularIntensity" min="0.00" max="1.50" step="0.01" value="0.75"
			           onchange="onchangeSetting(this, 'float')"
			           oninput="onchangeSetting(this, 'float')" /><span id="specularIntensityValue"></span>
			</div>
			
			<div>
			    <label>探照灯强度</label><br />
			    <input type="range" id="searchLightIntensity" min="0.00" max="1.00" step="0.01" value="0.5"
			           onchange="onchangeSetting(this, 'float')"
			           oninput="onchangeSetting(this, 'float')" /><span id="searchLightIntensityValue"></span>
			</div>
		</div>
		<div>
			<label>点选背景虚化</label>
			<input type="range" id="color.pickup.bkAlpha" value="0.2" min="0" max="1" step="0.01"
				onchange="updateSettings(this, 'float')" oninput="updateSettings(this, 'float')">
			<span id="color.pickup.bkAlphaValue"></span>
		</div>
		<div>
			<label>viewCube </label>
			<input type="checkbox" id="viewcube.visible" onchange="onchangeSetting(this, 'bool')" checked="checked" />
		</div>
		<div>
			<label>显示帧率 </label>
			<input type="checkbox" id="sysinfo.visible" onchange="onchangeSetting(this, 'bool')" checked="checked" />
		</div>
		<div><label for="eventType">事件类型:</label><span id="eventType"></span></div>
		<div><label for="worldPos">世界坐标:</label><span id="worldPos"></span></div>
		<div><label for="screenPos">屏幕坐标:</label><span id="screenPos"></span></div>
		<div><label for="targetItem">目标节点:</label><span id="targetItem"></span></div>
		<div><label for="targetName">目标名称:</label><span id="targetName"></span></div>
		<div><label for="targetCode">目标位号:</label><span id="targetCode"></span></div>
		<div><label for="targetModel">目标模型:</label><span id="targetModel"></span></div>
		<div><label for="targetModel">当前相机参数:</label><span id="currentParam" onclick="console.log(player.Native.Camera.currentParam())">获取</span></div>
		<!-- <img id="EngineContent"></img> -->

		<!-- 引入qwebchannel.js、Player.js、PlayerUtils.js -->
		<script src="qwebchannel.js"></script>
		<script src="Player.js"></script>
		<script src="PlayerUtils.js"></script>

		<script>
			var sam0023;
			var modelsMap={}
			//1.创建RemotePlayer对象
			var player = new RemotePlayer({
				video: document.getElementById("EngineContent"), //绑定视频标签或图片标签
				signalServer: "ws://192.168.101.66:17008", //云渲染服务器，发布时需要改为实际地址
				engineId: "" + Date.now(), // 引擎会话id，如果已存在则连接，没有则创建，会话在断开连接后超时自动关闭
				rtcIni: 'rtc.ini', // 可指定webrtc配置文件，默认为rtc.ini，相对目录为集群节点的enginePath目录
				autoResize: true, // 引擎是否跟跟随标签尺寸
				limtMoveCPS: 10, // 限制每秒鼠标移动的消息个数
				userTimeout: 1000 * 60 * 60 * 3, // 用户操作超时设置，毫秒
				exitTimeout: 1000 * 30, // 用户超时后多久断开会话
				maxTimeout: 1000, // 会话超时时间，允许掉线后引擎保存多久，在该时间内可重新连接到会话，否则会创建新的会话
				debug: false // 是否启用调试，开启后调用Native接口时会使用console.log进行记录
			});

			//2.[可选]监听连接成功消息
			player.on("Connected", () => {
				console.log("Has connected to engine")
			});

			//3.[可选]监听连接失败消息
			player.on("Disconnected", (e) => {
				console.log("Disconnected from engine", e);
				//4.[推荐]尝试重新连接
				player.reconnect();
			});

			//5. [推荐] 响应UserTimeOut消息，引擎接收用户鼠标触屏事件超时发出通知
			player.on("UserTimeOut", () => {
				console.info(`用户长时间没有操作三维视图，会话即将退出，可调用player.resetTimer()取消退出`);
			});

			//6.监听远程过程调用加载完成消息
			player.on("NativeLoad", async (Native) => {				
				var cf="data://models/CF.pr";
				var t2File = "data://models/T2.pr";
				var SamplerFile = "data://models/sampler.pr";
				// var errStr = await PlayerUtils.call(Native.NodeProxy.openProject, "data://pprj/test/test.pprj");
				// 加载工程模型
				var errStr = await PlayerUtils.call(Native.Model.loadModel, "cf", cf);
				//小经编机列表
				var machineList=[
					{"text":"","xy":[]},
				];
				var cnt = 1
				var top=0;
				for(var i=1;i<=6;i++){ //6排										
					if (i==2||i==4||i==6){
						top += 13 //过道
					}else{
						top += 8 //小过道
					}	
					var left=0;	
					for (var i2 = 1; i2 <= 11; i2++) { //每排11组，每组2台
							left += 5 //每组间过道间隔宽度
							if(i==1 && i2==7){
								left = left+3
								continue //第一排的入口，不摆放机器 
							}
							//每组2台						 	 
							let name="t"+cnt;
							await PlayerUtils.call(Native.Model.loadModel, name, t2File);
							let temp=await player.Native.Model.getInfo(name);	
							modelsMap[temp.nodePtr] = name				
							player.Native.NodeProxy.setNodePosition(temp.nodePtr, [left,top,0]);
							if(i==1||i==3||i==5) player.Native.NodeProxy.setNodeRotation(temp.nodePtr, [0,0,180]); //第一排机器方向
							var srcPosition = await player.Native.NodeProxy.getNodePosition(temp.nodePtr);
							//console.log("posio",srcPosition)
							// 创建标记
						    var options = {"text":(cnt)+"#机器","visible":true,"maxLod":110,"minLod":0.1,"textColor":parseInt("0x62cafdff")}; 
						    options.pos = [srcPosition[0]-1,srcPosition[1]-2,srcPosition[2]];
						    var markPtr = await player.Native.GisMarker.create(options);
						    player.Native.GisMarker.update(markPtr, options);
						    cnt++
						    left = left+3 //同组两两机器间隔
						    name="t"+cnt;
							await PlayerUtils.call(Native.Model.loadModel, name, t2File);
							temp=await player.Native.Model.getInfo(name);	
							modelsMap[temp.nodePtr] = name				
							player.Native.NodeProxy.setNodePosition(temp.nodePtr, [left,top,0]);
							if(i==1||i==3||i==5) player.Native.NodeProxy.setNodeRotation(temp.nodePtr, [0,0,180]); //第一排机器方向
							var srcPosition = await player.Native.NodeProxy.getNodePosition(temp.nodePtr);
							//console.log("posio",srcPosition)
							// 创建标记
						    var options = {"text":(cnt)+"#机器","visible":true,"maxLod":110,"minLod":0.1,"textColor":parseInt("0x62cafdff")}; 
						    options.pos = [srcPosition[0]-1,srcPosition[1]-2,srcPosition[2]];
						    var markPtr = await player.Native.GisMarker.create(options);
						    player.Native.GisMarker.update(markPtr, options);
						    cnt++						
					}
				}
				document.getElementById("loading").remove(true)
				// var xxxx = await PlayerUtils.call(Native.Model.loadModel, "t2", t2File);
				// var t2=await player.Native.Model.getInfo("t2");
				// console.error("t2======",t2)
				// // // player.Native.NodeProxy.setNodePosition(t2,)
				// var srcPosition = await player.Native.NodeProxy.getNodePosition(t2.nodePtr);
				// console.error("posio",srcPosition)
				// player.Native.NodeProxy.setNodePosition(t2.nodePtr, [10,0,0]);
				// 调整视角
				//player.Native.Camera.goHome(1);
				player.Native.Camera.moveTo([45.23259656137503, -33.901171144513334, 28.26770063277006], [45.76455018242784, 27.05467622332595, 6.080741774994106], [0.0029846509218903667, 0.34200712024661856, 0.9396926207859086], 1.1);
				//player.Native.Camera.moveToItem(lastPtr,1);
				// // 选择Pickup工具
				player.Native.Tools.setCurrentTool("system.Pickup");
				//不显示提示框
				player.Native.Settings.set("tips.enabled", "bool", false);
				// //点选高亮显示
				player.Native.Settings.set("pickUp.highlight", "bool", false);
				//点选包围盒
				player.Native.Settings.set("show.select.box", "bool", true);
				player.Native.Settings.set("skybox.select", "string", "blue");
				//点选背景虚化
				player.Native.Settings.set("color.pickup.bkAlpha", "float", 0.8);
				// 选中展示节点
				// sam0023 = await player.Native.ModelTree.findItemByName("CYLINDER 3 of EQUIPMENT /C1101", 0, true, 3);				
				player.Native.Settings.set('ambientIndenty', 'float', 0.39);//初始化环境光补偿
				player.Native.Settings.set('diffuseIntensity', 'float', 0.8);//初始化光线强度
				player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
				player.Native.Settings.set('searchLightIntensity', 'float', 0.5);//初始化探照灯强度
				// 点击事件一般仅用于浏览工具，在点选工具下无效
				Native.Tools.setCurrentTool("system.Browse");
				Native.ModelTree.EventBrowseLClick.connect((event) => {
					updateInfo("左键点击", event)
				});
				Native.ModelTree.EventBrowseRClick.connect((event) => {
					updateInfo("右键点击", event)
				});
			})

			async function updateSettings(object, type) {
				console.log(object)
				if (object.id) {
					if (type == "bool") {
						player.Native.Settings.set(object.id, type, object.checked);
					} else if (type == "red") {
						//参数前3个为RGB值，最后一个为透明度？，有点问题，好像不是正常的RGB？
						const xx = document.getElementById("color.value");
						player.Native.Settings.set(object.id, "string", xx.value);
					} else {
						player.Native.Settings.set(object.id, type, object.value);
					}
					// 更新span值
					if (type == "float") {
						var showValueStr = object.id + "Value";
						if (document.getElementById(showValueStr))
							document.getElementById(showValueStr).innerText = object.value;
					}
				}
			}
			//修改模型
			async function updateModel(object) {
				// sam0023 = await player.Native.ModelTree.getSelectedItem();
				sam0023 = await player.Native.ModelTree.getItemBySelfId(2433);
				console.log("0023", sam0023);
				if (object.id === "selectItem") {
					// if (object.checked) {
					player.Native.ModelTree.setSelectItem(sam0023.item);
					// } else {
					// 	player.Native.ModelTree.setSelectItem(0);
					// }
				} else if (object.id == "itemColor") {
					console.log("瓦特？", JSON.stringify(sam0023))
					// if (object.checked) {
					const xx = document.getElementById("color.value");
					player.Native.ModelTree.setItemColor(sam0023.item, parseInt(xx.value));
					// } else {
					// player.Native.ModelTree.restoreItemColor(sam0023.item);
					// }
				} else if (object.id == "itemColorClean") {
					player.Native.ModelTree.restoreItemColor(sam0023.item);
				} else if (object.id == "itemVisible") {
					player.Native.ModelTree.setItemVisible(sam0023.item, object.checked);
				}
			}

			var eventType = document.getElementById("eventType");
			var worldPos = document.getElementById("worldPos");
			var screenPos = document.getElementById("screenPos");
			var targetItem = document.getElementById("targetItem");
			var targetName = document.getElementById("targetName");
			var targetCode = document.getElementById("targetCode");
			var targetModel = document.getElementById("targetModel");
			var targetParent = document.getElementById("targetParent");

			function updateInfo(name, event) {
				//console.log(name, event);
				/*
				eventType.innerText = name;
				worldPos.innerText = JSON.stringify(event.pos);
				screenPos.innerText = JSON.stringify(event.screen);
				targetItem.innerText = event.object ? event.object.item : "";
				targetName.innerText = event.object ? event.object.name : "";
				targetCode.innerText = event.object ? event.object.code : "";
				targetModel.innerText = event.object ? event.object.ownModel : "";
				*/
				var modelsId = event.object ? event.object.ownModel : "";
				if (modelsId=="") return
				var devName=modelsMap[modelsId];
				if(devName==null) return;
			}

			//背景虚化设置
			async function onchangeSetting(object, type) {
				if (object.id) {
					player.Native.Settings.set(object.id, type, object.checked);
				}
			}

			//选中并移动
			async function selectAndMove(obj) {
				var se = await player.Native.ModelTree.getItemBySelfId(2433);
				console.log("se", se);
				//选中
				player.Native.ModelTree.setSelectItem(se.item);
				//移动相机
				calcInfo = await PlayerUtils.call(player.Native.ModelTree.calcItemAabb, se.item);
				player.Native.Camera.moveToAabbWithDistance([calcInfo.localAabb.min, calcInfo.localAabb.max], 3,
					40, 7);
			}


			//相机移动设置
			async function updateCamera(obj) {
				if (obj.id == "moveToHome")
					player.Native.Camera.goHome(3);
				else if (obj.id == "moveTo")
					player.Native.Camera.moveTo([9, 53, 12], [9, 11, 9], [0, 0, 1], 3);
				else if (obj.id == "moveToCode")
					player.Native.Camera.moveToCode(sam002.code, 3);
				else if (obj.id == "moveToItem") {
					sam0023 = await player.Native.ModelTree.getItemBySelfId(1576);
					player.Native.Camera.moveToItem(sam0023.item, 3);
				} else if (obj.id == "moveToPos")
					player.Native.Camera.moveToPos([0, 5, 5], sam.nodePtr, 5, 3);
				else if (obj.id == "moveToAabbWithFace") {
					var curItemInfo = await player.Native.ModelTree.getItemBySelfId(1576);
					// var curItemInfo = await PlayerUtils.call(player.Native.ModelTree.findItemByName, "/VENTILATION_UNIT1", 0, true, 3);
					calcInfo = await PlayerUtils.call(player.Native.ModelTree.calcItemAabb, curItemInfo.item);
					player.Native.Camera.moveToAabbWithFace([calcInfo.localAabb.min, calcInfo.localAabb.max], 3, 40);
					// player.Native.Camera.moveToAabbWithFace([calcInfo[0].aabb.min, calcInfo[0].aabb.max], 3, 21);
				} else if (obj.id == "moveToAabbWithDistance") {
					var curItemInfo = await player.Native.ModelTree.getItemBySelfId(1576);
					// var curItemInfo = await PlayerUtils.call(player.Native.ModelTree.findItemByName, "/VENTILATION_UNIT1", 0, true, 3);
					calcInfo = await PlayerUtils.call(player.Native.ModelTree.calcItemAabb, curItemInfo.item);
					player.Native.Camera.moveToAabbWithDistance([calcInfo.localAabb.min, calcInfo.localAabb.max], 3,
						40, 7);
				} else if (obj.id == "moveToAabbWithMatrix") {
					var curItemInfo = await player.Native.ModelTree.getItemBySelfId(1576);
					// var curItemInfo = await PlayerUtils.call(player.Native.ModelTree.findItemByName, "/VENTILATION_UNIT1", 0, true, 3);
					calcInfo = await PlayerUtils.call(player.Native.ModelTree.calcItemAabb, curItemInfo.item);
					identityMat = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];

					// void js::CameraProxy::moveToAabbWithMatrix	(	const QVariantList & 	aabb,
					// float 	second,
					// int 	face,
					// double 	kDistance,
					// const QVariantList & 	mat 
					// )		
					// inlineslot
					// 移动到包围盒某个面，将会清除未完成的相机动画任务，立即执行该动画

					// 参数
					// aabb	包围盒 [[minX, minY, minZ], [maxX, maxY, maxZ]]
					// second	过渡时间，单位为秒
					// face	面索引，0表示不定位视角，可设置一个面，也可设置两个或三个面进行组合
					// Top = 1
					// Bottom = 2
					// Front = 4
					// Back = 8
					// Left = 16
					// Right = 32,
					// kDistance	与包围盒中心的距离系数，相对于包围盒对角线一半，默认是1.1
					// mat	aabb所处坐标系到世界坐标系的矩阵，默认是单位矩阵，即aabb基于世界坐标系
					player.Native.Camera.moveToAabbWithMatrix([calcInfo.localAabb.min, calcInfo.localAabb.max], 3, 40,
						5, identityMat);
				}
			}
			//着色器设置
			async function onchangeSetting(object, type) {
				if (object.id) {
					player.Native.Settings.set(object.id, type, object.value);
					// 更新span值
					if (type == "float") {
						var showValueStr = object.id + "Value";
						document.getElementById(showValueStr).innerText = object.value;
					}
				}
			}
		</script>
	</body>
</html>
<style type="text/css">
	body{
		padding: 0;
		margin: 0;
	}
	#loading{
		position: absolute;
	    top: 50%;
	    left: 50%;
	    font-size: 18px;
	    color: blue;
	    z-index: 1;
	    margin-left: -75px;
	    width: 150px;
	}
</script>