//import { FBXLoader } from "./FBXLoader.js"; //import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; //import { MeshBasicMaterial, MeshStandardMaterial, Vector3 } from "three"; import Vue from "vue"; import fetchAndCombine from "../public/loader/loader"; import { UWB } from "../public/plugin/uwb/index.js"; import { FXAAShader } from "../public/shader/FAAXShader.js" import '../public/libs/tools.js' // 定义一个函数,接受元素ID和一个回调函数作为参数,用于处理点击事件 window.waterMap = {} window.sdkInstance = null; window.uwbInstance = null; window.getsqlData = getsqlData; var fbxLoader1Loaded = false; var fbxLoader2Loaded = false; let textureLoader = new THREE.TextureLoader(); let textureReady = textureLoader.load('../images/location_ready.png'); let textureRunning = textureLoader.load('../images/location_running.png'); let textureOffline = textureLoader.load('../images/location_offline.png'); function getsqlData(sdkInstance, uwbInstance) { let g_PosArrayResult = null; if (g_PosArrayResult == null) { var sqlstr = "SELECT * FROM dat_bench_extend order by bench_id asc"; //sqlstr = sqlstr.format(two_seconds_ago, two_seconds_ago) console.log(sqlstr); let msg = { cmd: "query", // server端要进行判断的 data: { name: "name", // 这个无所谓怎么写,有就行 //sql: 'select * from his_location_tadiao_result_unity limit 300' sql: sqlstr, }, }; // 触发事件进行从服务器获取数据 window.vm.$socket.emit("REPT", msg, (datas) => { g_PosArrayResult = datas.data; var now = new Date(); var two_seconds_ago = new Date(now.getTime() - 2 * 1000).Format( "yyyy-MM-dd hh:mm:ss.S" ); var one_second_ago = new Date(now.getTime() - 1 * 1000).Format( "yyyy-MM-dd hh:mm:ss.S" ); { let result = g_PosArrayResult; for (var item of result) { let x = item.x; let y = item.y; let z = item.z; let ang_x = 0.0; let ang_y = 0.0; let ang_z = 0.0; let benchType = item.bench_type if (item.use_fix_pos == 1) { x = JSON.parse(JSON.stringify(item.fix_pos_x)); y = JSON.parse(JSON.stringify(item.fix_pos_y)); z = JSON.parse(JSON.stringify(item.fix_pos_z)); ang_x = JSON.parse(JSON.stringify(item.fix_angle_x)); ang_y = JSON.parse(JSON.stringify(item.fix_angle_y)); ang_z = JSON.parse(JSON.stringify(item.fix_angle_z)); } else { } var distance = 10000.0; var xSubTmp = x; var ySubTmp = y; var zSubTmp = z; var ang_xSubTmp = ang_x; var ang_ySubTmp = ang_y; var ang_zSubTmp = ang_z; if (g_PosArrayResult) { var iCount = 0; for (var itemSub of g_PosArrayResult) { iCount++; var xSub = itemSub.x; var ySub = itemSub.y; var zSub = itemSub.z; var ang_xSub = 0.0; var ang_ySub = 0.0; var ang_zSub = 0.0; xSub = itemSub.fix_pos_x; ySub = itemSub.fix_pos_y; zSub = itemSub.fix_pos_z; ang_xSub = itemSub.fix_angle_x; ang_ySub = itemSub.fix_angle_y; ang_zSub = itemSub.fix_angle_z; var disTmp = Math.sqrt(Math.pow(x - xSub, 2) + Math.pow(y - ySub, 2) + Math.pow(z - zSub, 2)) if (disTmp < distance) { distance = disTmp; xSubTmp = xSub; ySubTmp = ySub; zSubTmp = zSub; ang_xSubTmp = ang_xSub; ang_ySubTmp = ang_ySub; ang_zSubTmp = ang_zSub; } } } x = xSubTmp; y = ySubTmp; z = zSubTmp; ang_x = ang_xSubTmp; ang_y = ang_ySubTmp; ang_z = ang_zSubTmp; x = JSON.parse(JSON.stringify(xSubTmp)); y = JSON.parse(JSON.stringify(ySubTmp)); z = JSON.parse(JSON.stringify(zSubTmp)); ang_x = JSON.parse(JSON.stringify(ang_xSubTmp)); ang_y = JSON.parse(JSON.stringify(ang_ySubTmp)); ang_z = JSON.parse(JSON.stringify(ang_zSubTmp)); let card_id = item.card_id; let bench_id = item.bench_id; let show_remote_button = item.show_remote_button; // 添加水滴 let benchList = window.store ? window.store.getters['benchList/getBenchList'] : []; let currentBench = benchList.find(b => b.id == bench_id); let texture = null; if (currentBench) { switch(currentBench.status) { case "ready": texture = textureReady; break; case "running": texture = textureRunning; break; case "offline": texture = textureOffline; break; default: texture = textureOffline; break; } } else { texture = textureOffline; } if (window.waterMap[bench_id]) { sdkInstance.sceneRenderer.scene.remove(window.waterMap[bench_id]); } // 创建精灵对象 const geometry = new THREE.PlaneGeometry(1.2, 1.2); let spriteMaterial = new THREE.SpriteMaterial({ map: texture }); let uniformsA = { amplitude: {value: 1.0}, color: {value: new THREE.Color(0xff2200)}, texture: {value: texture } }; // 创建着色器材质 const shaderMaterial = new THREE.ShaderMaterial({ uniforms: uniformsA, vertexShader: `varying vec2 vUv; uniform sampler2D texture; void main() { vUv = uv; vec4 t = texture2D( texture, vUv ); gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x,position.y,position.z+t.g, 1.0 ); }`, fragmentShader: `varying vec2 vUv; uniform sampler2D texture; void main() { gl_FragColor = texture2D( texture, vUv ); }`, side: THREE.DoubleSide, transparent: true }) let sprite = new THREE.Sprite(spriteMaterial); const mesh = new THREE.Mesh(geometry, shaderMaterial); var customData = { benchId: bench_id, benchFlag: false, bShowRemoteButton: false, type: 'water' }; mesh.userData = customData; // sprite.scale.set(100, 100, 1); mesh.position.set(x, y + 10, z); mesh.rotation.set(-Math.PI / 2, 0, 0); window.waterMap[bench_id] = mesh; console.log('添加模型和水滴1111') if (sdkInstance) { sdkInstance.sceneRenderer.scene.add(mesh) } }; } let dracoLoader = new THREE.DRACOLoader(); THREE.DRACOLoader.setDecoderPath("../gltf/"); var fbxLoader1 = new THREE.GLTFLoader(); fbxLoader1.setDRACOLoader(dracoLoader); if (!fbxLoader1Loaded) { fbxLoader1.load("../models/meshDraco.gltf", function (fbx) { fbxLoader1Loaded = true; let result = g_PosArrayResult; for (var item of result) { let x = item.x; let y = item.y; let z = item.z; let ang_x = 0.0; let ang_y = 0.0; let ang_z = 0.0; let benchType = item.bench_type if (item.use_fix_pos == 1) { x = JSON.parse(JSON.stringify(item.fix_pos_x)); y = JSON.parse(JSON.stringify(item.fix_pos_y)); z = JSON.parse(JSON.stringify(item.fix_pos_z)); ang_x = JSON.parse(JSON.stringify(item.fix_angle_x)); ang_y = JSON.parse(JSON.stringify(item.fix_angle_y)); ang_z = JSON.parse(JSON.stringify(item.fix_angle_z)); } else { } var distance = 10000.0; var xSubTmp = x; var ySubTmp = y; var zSubTmp = z; var ang_xSubTmp = ang_x; var ang_ySubTmp = ang_y; var ang_zSubTmp = ang_z; if (g_PosArrayResult) { var iCount = 0; for (var itemSub of g_PosArrayResult) { iCount++; var xSub = itemSub.x; var ySub = itemSub.y; var zSub = itemSub.z; var ang_xSub = 0.0; var ang_ySub = 0.0; var ang_zSub = 0.0; xSub = itemSub.fix_pos_x; ySub = itemSub.fix_pos_y; zSub = itemSub.fix_pos_z; ang_xSub = itemSub.fix_angle_x; ang_ySub = itemSub.fix_angle_y; ang_zSub = itemSub.fix_angle_z; var disTmp = Math.sqrt(Math.pow(x - xSub, 2) + Math.pow(y - ySub, 2) + Math.pow(z - zSub, 2)) if (disTmp < distance) { distance = disTmp; xSubTmp = xSub; ySubTmp = ySub; zSubTmp = zSub; ang_xSubTmp = ang_xSub; ang_ySubTmp = ang_ySub; ang_zSubTmp = ang_zSub; } } } x = xSubTmp; y = ySubTmp; z = zSubTmp; ang_x = ang_xSubTmp; ang_y = ang_ySubTmp; ang_z = ang_zSubTmp; x = JSON.parse(JSON.stringify(xSubTmp)); y = JSON.parse(JSON.stringify(ySubTmp)); z = JSON.parse(JSON.stringify(zSubTmp)); ang_x = JSON.parse(JSON.stringify(ang_xSubTmp)); ang_y = JSON.parse(JSON.stringify(ang_ySubTmp)); ang_z = JSON.parse(JSON.stringify(ang_zSubTmp)); let card_id = item.card_id; let bench_id = item.bench_id; let show_remote_button = item.show_remote_button; if (benchType == 1) { console.log("控制台查看加载gltf文件返回的对象结构", fbx); var childMesh = childMesh = fbx.scene.children[0].children[0]; let childMeshTmp = new THREE.Mesh(childMesh.geometry, childMesh.material) let scale = 5; childMeshTmp.scale.set(scale, scale, scale) //fbx.scene.children[0].scale.set(5, 5, 5) //fbx.scene.children[0].position.set(8.7, -1.6, 5.4) childMeshTmp.position.set(x, y, z) var Euler = new THREE.Euler(Math.PI * ang_x, Math.PI * ang_y, Math.PI * ang_z); //var Euler = new THREE.Euler( Math.PI*1.5, Math.PI*0, Math.PI*0); var quaternion = new THREE.Quaternion(); childMeshTmp.quaternion.copy(quaternion.setFromEuler(Euler)) var customData = { benchId: bench_id, benchFlag: true, bShowRemoteButton: show_remote_button == 1 ? true : false, }; childMeshTmp.userData = customData; console.log('添加模型和水滴1111') sdkInstance.sceneRenderer.scene.add(childMeshTmp) } }; }) } var fbxLoader2 = new THREE.GLTFLoader(); fbxLoader2.setDRACOLoader(dracoLoader); if (!fbxLoader2Loaded) { fbxLoader2.load("../models/mesh2Draco.gltf", function (fbx) { fbxLoader1Loaded = true; let result = g_PosArrayResult; for (var item of result) { let x = item.x; let y = item.y; let z = item.z; let ang_x = 0.0; let ang_y = 0.0; let ang_z = 0.0; let benchType = item.bench_type if (item.use_fix_pos == 1) { x = JSON.parse(JSON.stringify(item.fix_pos_x)); y = JSON.parse(JSON.stringify(item.fix_pos_y)); z = JSON.parse(JSON.stringify(item.fix_pos_z)); ang_x = JSON.parse(JSON.stringify(item.fix_angle_x)); ang_y = JSON.parse(JSON.stringify(item.fix_angle_y)); ang_z = JSON.parse(JSON.stringify(item.fix_angle_z)); } else { } var distance = 10000.0; var xSubTmp = x; var ySubTmp = y; var zSubTmp = z; var ang_xSubTmp = ang_x; var ang_ySubTmp = ang_y; var ang_zSubTmp = ang_z; if (g_PosArrayResult) { var iCount = 0; for (var itemSub of g_PosArrayResult) { iCount++; var xSub = itemSub.x; var ySub = itemSub.y; var zSub = itemSub.z; var ang_xSub = 0.0; var ang_ySub = 0.0; var ang_zSub = 0.0; xSub = itemSub.fix_pos_x; ySub = itemSub.fix_pos_y; zSub = itemSub.fix_pos_z; ang_xSub = itemSub.fix_angle_x; ang_ySub = itemSub.fix_angle_y; ang_zSub = itemSub.fix_angle_z; var disTmp = Math.sqrt(Math.pow(x - xSub, 2) + Math.pow(y - ySub, 2) + Math.pow(z - zSub, 2)) if (disTmp < distance) { distance = disTmp; xSubTmp = xSub; ySubTmp = ySub; zSubTmp = zSub; ang_xSubTmp = ang_xSub; ang_ySubTmp = ang_ySub; ang_zSubTmp = ang_zSub; } } } x = xSubTmp; y = ySubTmp; z = zSubTmp; ang_x = ang_xSubTmp; ang_y = ang_ySubTmp; ang_z = ang_zSubTmp; x = JSON.parse(JSON.stringify(xSubTmp)); y = JSON.parse(JSON.stringify(ySubTmp)); z = JSON.parse(JSON.stringify(zSubTmp)); ang_x = JSON.parse(JSON.stringify(ang_xSubTmp)); ang_y = JSON.parse(JSON.stringify(ang_ySubTmp)); ang_z = JSON.parse(JSON.stringify(ang_zSubTmp)); let card_id = item.card_id; let bench_id = item.bench_id; let show_remote_button = item.show_remote_button; if (benchType == 2) { console.log("控制台查看加载gltf文件返回的对象结构", fbx); var childMesh = fbx.scene.children[0]; let childMeshTmp = new THREE.Mesh(childMesh.geometry, childMesh.material) let scale = 0.05; childMeshTmp.scale.set(scale, scale, scale) //fbx.scene.children[0].scale.set(5, 5, 5) //fbx.scene.children[0].position.set(8.7, -1.6, 5.4) childMeshTmp.position.set(x, y, z) var Euler = new THREE.Euler(Math.PI * ang_x, Math.PI * ang_y, Math.PI * ang_z); //var Euler = new THREE.Euler( Math.PI*1.5, Math.PI*0, Math.PI*0); var quaternion = new THREE.Quaternion(); childMeshTmp.quaternion.copy(quaternion.setFromEuler(Euler)) var customData = { benchId: bench_id, benchFlag: true, bShowRemoteButton: show_remote_button == 1 ? true : false, }; childMeshTmp.userData = customData; sdkInstance.sceneRenderer.scene.add(childMeshTmp) } }; if (!sessionStorage.getItem('3dMode') || sessionStorage.getItem('3dMode') == 0) { setTimeout(() => { var benchPosList = []; for (var item of result) { var localPosition = new THREE.Vector3(item.fix_pos_x, item.fix_pos_y, item.fix_pos_z); var worldPosition = uwbInstance.convertLocalToWorld(localPosition); var pos = sdkInstance.getScreenPosition(worldPosition); benchPosList.push( { x: pos.x, y: pos.y, benchType: item.bench_type, benchId: item.bench_id } ) } window.showBenchPos(benchPosList); }, 2000 ) } }) } }); } } // uwb 插件初始化 function uwbInit(originPointPose) { console.log("=====初始化uwb 实例====="); const uwbIns = new UWB({ upAxis: "y-up", LR: "r", worldPose: originPointPose, }); return uwbIns; } export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) { console.log("uwbMain enter"); finalMode = finalMode || "floorplan"; var radius = 0.3; var height = 0.5; var segments = 4; var color = 0x00ff00; let g_gltf_downloaded = false; let composer = null; let box = null; let sqlQueryInited = false; let g_fbx = null; let g_fbxLoader = null; let sdkInstance = null; window.renderHeight = modelHeight; window.renderWidth = modelWidth; var geometry = new THREE.ConeGeometry(radius, height, segments); var material1 = new THREE.MeshBasicMaterial({ color: color, opacity: 0.2, transparent: true, }); fetchAndCombine().then(([err, data]) => { if (err) { console.error(err); console.log("模型加载出错"); } else { let HousePlay = HOUSEPLAY.HousePlay; let playerContainer = document.getElementById(domId) data.container = playerContainer; sdkInstance = new HousePlay(data); window.sdkInstance = sdkInstance; sdkInstance.start(); let vrBgContainer = document.getElementById("vr-bg-container"); vrBgContainer.style.width = modelWidth + 'px' vrBgContainer.style.height = modelHeight + 'px' vrBgContainer.style.backgroundColor = 'transparent' window.sdkInstance.emit("endLoading", finalMode); window.sdkInstance.emit("modeChange", null, finalMode); if (!sessionStorage.getItem('3dMode') || sessionStorage.getItem('3dMode') == 0) { setTimeout(() => { var element = document.getElementById('house-player'); var container = document.getElementById("ordinary-map") container.style.opacity = 1; let mapDom = document.getElementsByClassName("ordinary-map-container")[0]; let style = getComputedStyle(mapDom); let width = parseFloat(style.width); let height = parseFloat(style.height); let ratio = 1.8; window.renderWidth = width * ratio; window.renderHeight = height * ratio; window.sdkInstance.sceneRenderer.updateScreenSize(width * ratio, height * ratio); element.style.marginLeft = ((width - (width * ratio)) / 2) + 'px'; element.style.marginTop = ((height - (height * ratio)) / 2) + 'px'; let playersmall = document.getElementById('playersmall') playersmall.appendChild(element) setTimeout(() => { window.sdkInstance.changeMode('floorplan'); }, 1200) }, 1500) } sdkInstance.on("endLoading", (mode) => { console.log(mode, '-----+++++-----') vrBgContainer.style.display = "none"; // 本地坐标系原点位姿 const originPointPose = { worldPosition: { x: 0, y: 0, z: 0 }, worldQuaternion: { x: 0, y: 0, z: 0, w: 1, }, }; //初始化uwb插件 let uwbInstance = uwbInit(originPointPose); window.uwbInstance = uwbInstance; if (g_gltf_downloaded == false) { let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光 sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中 let pointLight = new THREE.PointLight(0xffffff, 1, 0); pointLight.position.set(200, 200, 200); //设置点光源位置 sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景 g_gltf_downloaded = true; } let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光 sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中 let pointLight = new THREE.PointLight(0xffffff, 1, 0); pointLight.position.set(200, 200, 200); //设置点光源位置 sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景 if (g_fbxLoader == null) { g_fbxLoader = new THREE.GLTFLoader(); // g_fbxLoader.load("../models/mesh2.gltf", function (fbx) { // let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光 // sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中 // let pointLight = new THREE.PointLight(0xffffff, 1, 0); // pointLight.position.set(200, 200, 200); //设置点光源位置 // sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景 // g_fbx = fbx; // console.log("控制台查看加载gltf文件返回的对象结构", fbx); // //fbx.scene.children[0].children[0].scale.set(5, 5, 5) // //window.shader = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material); // //window.shader1 = new THREE.MeshStandardMaterial(fbx.scene.children[0].children[0].material); // }); // if (false) { // sqlQueryInited = true; // var index = 0; // setTimeout( // function (card_id, x, y, z) { // // }, // 500 // ); // } getsqlData(sdkInstance, uwbInstance) // var timerId = setInterval(function () { // getsqlData(sdkInstance, uwbInstance) // }, 1500); } // 创建物体add // 模型加载完成,进入模型页面,添加摆放的物体 let canvas = document.getElementsByTagName('canvas')[0] canvas.style.borderRadius = "0px" canvas.onmousedown = (event) => { let mouse = new THREE.Vector2(); let raycaster = new THREE.Raycaster(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, sdkInstance.player.camera); let intersects = raycaster.intersectObjects(sdkInstance.sceneRenderer.scene.children); if (intersects && intersects.length > 0) { let bFirst = true; let bool = false; let bool1 = false; intersects.forEach(m => { console.log('点击水滴', event, m && m.object && m.object.geometry && m.object.geometry.type, m.object) if (m.object.geometry.type != "PlaneBufferGeometry") { console.log('onmousedown', 111) if (m.object.userData && m.object.userData.benchFlag == true) { if (!bool) { bool = true; //m.object.material = window.shader1; ////m.object.scale.set(10, 10, 10) //m.object.scale.set(5, 5, 5) //outlineObj(m.object) // let player = document.getElementById(domId) // player.style.display = "none if (box) { sdkInstance.sceneRenderer.scene.remove(box); } window.handleBenchClick(m.object.userData.benchId, m.object.userData.bShowRemoteButton) box = new THREE.BoxHelper(m.object, '#ff0000'); //object 模型 sdkInstance.sceneRenderer.scene.add(box) //let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光 //sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中 //let pointLight = new THREE.PointLight(0xffffff, 1, 0); //pointLight.position.set(200, 200, 200); //设置点光源位置 //sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景 } //outlineObj(m.object //m.object.material = FXAAShader } } else if (m.object.geometry.type == "PlaneBufferGeometry") { console.log('onmousedown', 222) if (m.object.userData && m.object.userData.benchFlag == true) { window.handleListClick(m.object.userData.benchId) } }}) bool = false; bool1 = false; } } canvas.onmousemove = (event) => { let mouse = new THREE.Vector2(); let raycaster = new THREE.Raycaster(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, sdkInstance.player.camera); let intersects = raycaster.intersectObjects(sdkInstance.sceneRenderer.scene.children); if (intersects && intersects.length > 0) { let bFirst = true; let bool = false; let bool1 = false; intersects.forEach(m => { if (m && m.object && (m.object.userData.type == 'water')) { console.log('===== bench selected =====') window.store.dispatch('benchList/setMouseOverBench', { bench_id: m.object.userData.benchId, pageX: event.x, pageY: event.y, status: true }) } else { window.store.dispatch('benchList/setMouseOverBench', { bench_id: m.object.userData.benchId, pageX: event.x, pageY: event.y, status: false }) } }) bool = false; bool1 = false; } } return; let outlinePass = null; function outlineObj(selectedObjects) { composer = new THREE.EffectComposer(sdkInstance.sceneRenderer.renderer); // 特效组件 var renderPass = new THREE.RenderPass(sdkInstance.sceneRenderer.scene, sdkInstance.player.camera); composer.addPass(renderPass); // 特效渲染 outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), sdkInstance.sceneRenderer.scene, sdkInstance.player.camera); composer.addPass(outlinePass); // 加入高光特效 outlinePass.pulsePeriod = 2; //数值越大,律动越慢 outlinePass.visibleEdgeColor.set(0xff0000); // 高光颜色 outlinePass.hiddenEdgeColor.set(0x000000);// 阴影颜色 outlinePass.usePatternTexture = true; // 使用纹理覆盖? outlinePass.edgeStrength = 5; // 高光边缘强度 outlinePass.edgeGlow = 1; // 边缘微光强度 outlinePass.edgeThickness = 1; // 高光厚度 var textureLoader = new THREE.TextureLoader(); textureLoader.load('../models/matcap.png', function (texture) { outlinePass.patternTexture = texture; texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; outlinePass.selectedObjects = selectedObjects; // 需要高光的obj if (composer != null) { animate(); } }) } function animate() { requestAnimationFrame(animate); if (composer != null) { composer.render(); } } }); } sdkInstance.on("modeChange", function (currentMode, newMode) { if (newMode === "transitioning") { return; } console.log(newMode, '@@@@@@@@@@@@@') }); }); }