diff --git a/assets/models/.DS_Store b/assets/models/.DS_Store index 1b8830b..7fdccb8 100644 Binary files a/assets/models/.DS_Store and b/assets/models/.DS_Store differ diff --git a/assets/models/uasb1.glb b/assets/models/uasb1.glb new file mode 100644 index 0000000..ec0779c Binary files /dev/null and b/assets/models/uasb1.glb differ diff --git a/assets/models/uasb2.glb b/assets/models/uasb2.glb new file mode 100644 index 0000000..27dfdba Binary files /dev/null and b/assets/models/uasb2.glb differ diff --git a/htmlbard.html b/htmlbard.html index 7d13860..69366ea 100644 --- a/htmlbard.html +++ b/htmlbard.html @@ -239,9 +239,12 @@ - // document.body.appendChild(glRenderer.domElement); - document.body.appendChild(cssRenderer.domElement); - cssRenderer.domElement.appendChild(glRenderer.domElement); + document.body.appendChild(glRenderer.domElement); + glRenderer.domElement.appendChild(cssRenderer.domElement); + + + // document.body.appendChild(cssRenderer.domElement); + // cssRenderer.domElement.appendChild(glRenderer.domElement); glScene = new THREE.Scene(); cssScene = glScene//new THREE.Scene(); @@ -279,6 +282,66 @@ } initialize(); + + + var raycaster = new THREE.Raycaster() + var mouse = new THREE.Vector3() + //点击模型 + // window.addEventListener('click', onMouseClick); + window.addEventListener('dblclick', onDBMouseClick); + function onMouseClick(event) { + var mesh = []; + // 点击屏幕创建一个向量 + var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window + .innerHeight) * 2 + 1, 0.5); + vector = vector.unproject(window.camera); // 将屏幕的坐标转换成三维场景中的坐标 + var raycaster = new THREE.Raycaster(window.camera.position, vector.sub(window.camera.position).normalize()); + var intersects = raycaster.intersectObjects(mesh, true); + // debugger + if (intersects.length > 0) { + intersects[0].object.material.color.set("#ff0000"); + alert(JSON.stringify(intersects[0])) + } + } + + + + function onDBMouseClick(event) { + + //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标 + mouse.x = (event.clientX / window.innerWidth) * 2 - 1 + mouse.y = -((event.clientY / window.innerHeight) * 2 - 1) + //console.log("mouse:"+mouse.x+","+mouse.y) + + // 通过鼠标点的位置和当前相机的矩阵计算出raycaster + raycaster.setFromCamera(mouse, window.camera); + + // 获取raycaster直线和所有模型相交的数组集合 + // debugger + var intersects = raycaster.intersectObjects(scene.children); + console.log("onclick ", intersects); + + //debugger + //将所有的相交的模型的颜色设置为红色 + for (var i = 0; i < intersects.length; i++) { + let obj = intersects[i]; + if (obj.object) { + let tmpobj = obj.object; + console.log(tmpobj) + //输出 增加标签 位置 + console.log('{name:"' + tmpobj.name + '1",text:"' + tmpobj.name + '",x:' + obj.point.x.toFixed(2) + ',y:' + obj.point.y.toFixed(2) + ',z:' + obj.point.z.toFixed(2) + ',rx:0,ry:0,rz:0}'); + if (tmpobj.name.indexOf('水泵M_') > -1) { // 水泵 + + openDialog(tmpobj) + //alert(tmpobj.name, "双击"); + } + break; + + } + } + } + + diff --git a/index.html b/index.html index 9c57d64..acc28f4 100644 --- a/index.html +++ b/index.html @@ -157,7 +157,7 @@ var raycaster = new THREE.Raycaster() var mouse = new THREE.Vector2() //点击模型 - // window.addEventListener('click', onMouseClick); + window.addEventListener('click', onMouseClick); function onMouseClick(event) { diff --git a/index2.html b/index2.html index 74f09b0..ebebd24 100644 --- a/index2.html +++ b/index2.html @@ -1,203 +1,205 @@ - + - - - - + Threejs鼠标点击场景对象获取对象信息，Threejs使用Raycaster拾取对象信息 + + + + + - - -
2d 数据显示位置
- - - diff --git a/js/app.js b/js/app.js index 0c1dadf..a2a4874 100644 --- a/js/app.js +++ b/js/app.js @@ -1,16 +1,16 @@ - + import { OrbitControls } from 'jsm/controls/OrbitControls.js'; - + import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'jsm/renderers/CSS3DRenderer.js'; import css3dlabel from './units/css3dlabel.js' - + var APP = { Player: function () { - - var controls, camera, glScene, cssScene, glRenderer, cssRenderer; + + var controls, camera, glScene, cssScene, glRenderer, cssRenderer; camera = new THREE.PerspectiveCamera( 45, @@ -28,27 +28,10 @@ var APP = { document.body.appendChild(cssRenderer.domElement); document.body.appendChild(glRenderer.domElement); // glRenderer.domElement.appendChild(cssRenderer.domElement); - // document.body.appendChild(glRenderer.domElement); - - // cssRenderer.domElement.appendChild(glRenderer.domElement); - - - - - - - // document.body.appendChild(cssRenderer.domElement); - // cssRenderer.domElement.appendChild(glRenderer.domElement); glScene = new THREE.Scene(); - cssScene = new THREE.Scene(); + cssScene = new THREE.Scene(); - var ambientLight = new THREE.AmbientLight(0x555555); - glScene.add(ambientLight); - - var directionalLight = new THREE.DirectionalLight(0xffffff); - directionalLight.position.set(-.5, .5, -1.5).normalize(); - glScene.add(directionalLight); // for (var i = 0; i < 20; i++) { // create3dPage( @@ -60,14 +43,10 @@ var APP = { // initModel(); createLights(); - // window.addEventListener('resize', function () { - - // this.setSize(window.innerWidth, window.innerHeight); - // }); window.camera = camera; window.scene = glScene; - + var waters = []; @@ -78,7 +57,7 @@ var APP = { alpha: true }); - glRenderer.setClearColor(0xECF8FF); + glRenderer.setClearColor(0x34495E); glRenderer.setPixelRatio(window.devicePixelRatio); glRenderer.setSize(window.innerWidth, window.innerHeight); @@ -90,7 +69,7 @@ var APP = { } function createCssRenderer() { - var cssRenderer = new CSS3DRenderer(); + var cssRenderer = new CSS3DRenderer(); cssRenderer.setSize(window.innerWidth, window.innerHeight); cssRenderer.domElement.style.position = 'absolute'; glRenderer.domElement.style.zIndex = 0; @@ -138,6 +117,10 @@ var APP = { } function createLights() { + var directionalLight = new THREE.DirectionalLight(0xafafaf); + directionalLight.position.set(-.5, .5, -1.5).normalize(); + glScene.add(directionalLight); + const light = new THREE.AmbientLight("#ffffff"); glScene.add(light); @@ -170,26 +153,17 @@ var APP = { glScene.add(light7) } - function initialize() { - - - } - - - - - this.load = function (json) { + this.setClearColor = function (color) { + glRenderer.setClearColor(color); } - //position = { x: 0, y: 0, z: 0 }, rotation= { x: 0, y: 0, z: 0 } - this.addModels = function (value ){ + this.addModels = function (value) { glScene.add(value); }; - this.setCamera = function (value) { camera = value; @@ -202,11 +176,11 @@ var APP = { this.setScene = function (value) { - scene = value; - window.scene = scene + glScene = value; + window.scene = glScene }; - this.addWater=function(water){ + this.addWater = function (water) { waters.push(water); } this.setPixelRatio = function (pixelRatio) { @@ -231,16 +205,16 @@ var APP = { cssRenderer.setSize(this.width, this.height); }; - - + + var time, startTime, prevTime; - + function animate() { - + // controls.update(); glRenderer.render(glScene, camera); @@ -250,13 +224,13 @@ var APP = { // // 播放特效 // water.material.uniforms['time'].value += 1.0 / 60.0; // }); - + } - var objects=[] + var objects = [] this.play = function () { - + // if (renderer.xr.enabled) dom.append(vrButton); @@ -281,7 +255,7 @@ var APP = { object.position.x = Math.random() * 4 - 2, object.position.y = Math.random() * 4 - 2, object.position.z = Math.random() * 4 - 2; - object.scale.set(0.01, 0.01, 0.01); + object.scale.set(0.01, 0.01, 0.01); glScene.add(object); objects.push(object); @@ -295,7 +269,7 @@ var APP = { cssScene.add(createSpriteShape()); cssScene.add(createBox13DLabel()); - + }; @@ -312,7 +286,7 @@ var APP = { dispatch(events.stop, arguments); glRenderer.setAnimationLoop(null); - + }; @@ -329,8 +303,8 @@ var APP = { }; // - this.create3dPage=function( w, h, position, rotation, url) { - + this.create3dPage = function (w, h, position, rotation, url) { + var plane = css3dlabel.createPlane( w, h, position, @@ -344,7 +318,37 @@ var APP = { url); cssScene.add(cssObject); } - + let defaultScale=300 + this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) { + + let txtlength=text.length + + var width = defaultScale * txtlength; + var height = defaultScale + 800; + // debugger + var plane = css3dlabel.createPlane( + width, height, + position, + rotation); + // plane.scale.set(0.03, 0.03, 0.03); + glScene.add(plane); + + var cssObject = css3dlabel.createCssLabel(text, + w, h, + position, + rotation); + // if(parent){ + // parent.add(cssObject); + + // }else{ + cssObject.scale.set(0.3, 0.3, 0.3); + cssScene.add(cssObject); + // } + + + + + } function createSpriteShape() { /*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/ let canvas = document.createElement("canvas"); @@ -364,7 +368,7 @@ var APP = { map: texture,//设置精灵纹理贴图 }); let mesh = new THREE.Sprite(material); - mesh.position.x=2; + mesh.position.x = 2; mesh.position.y = 2; /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/ //mesh.scale.set(100,100,1); diff --git a/js/units/css3dlabel.js b/js/units/css3dlabel.js index 90170b2..d4050df 100644 --- a/js/units/css3dlabel.js +++ b/js/units/css3dlabel.js @@ -35,6 +35,30 @@ export default { css2DLabel.userData = { name: "datalable", id: "", url: "" } return css2DLabel; + }, + //创建标签 + createCssLabel: function (text, w, h, position,rotation, className = 'label') { + + const labelDiv = document.createElement('div'); + labelDiv.className = className; + labelDiv.name = "csslabeldiv" + labelDiv.textContent = text; + labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 + + var cssObject = new CSS3DObject(labelDiv); + cssObject.position.x = position.x; + cssObject.position.y = position.y; + cssObject.position.z = position.z; + + cssObject.rotation.x = rotation.x; + cssObject.rotation.y = rotation.y; + cssObject.rotation.z = rotation.z; + + cssObject.scale.set(0.03, 0.03, 0.03); + cssObject.name = "datalabel" + cssObject.userData = { name: "datalable", id: "", url: "" } + return cssObject; + }, create3dPage: function (scene, w, h, position, rotation, url) { var plane = this.createPlane( diff --git a/lndexUASB.html b/lndexUASB.html index af07b16..1bd6140 100644 --- a/lndexUASB.html +++ b/lndexUASB.html @@ -33,7 +33,7 @@ color: #ff000f; font-family: sans-serif; padding: 2px; - /* background: rgba(0, 0, 0, .6); */ + background: rgba(77, 0, 0, .6); } .label1 { @@ -57,8 +57,8 @@ } } - - + + @@ -78,9 +78,9 @@ import { Water } from 'jsm/objects/Water.js'; import modellabel from './js/units/modellabel.js' import css2dlabel from './js/units/css3dlabel.js' - + import config from './js/config.js' - + window.THREE = THREE; // Used by APP Scripts. var client = null; @@ -113,27 +113,43 @@ player.setSize(window.innerWidth, window.innerHeight); }); - + //设置背景颜色 + player.setClearColor(0x34495E); initModel() - + addRemarkLabels(); mqttInit(); for (var i = 0; i < 1; i++) { player.create3dPage( 1020, 680, - new THREE.Vector3(-2 - i, 1 + i / 3, -4.2 + i), + new THREE.Vector3(-2 - i, 2 + i / 3, -4.2 + i), new THREE.Vector3(0, Math.PI, 0), 'https://zuoben.blog.csdn.net/'); } } // document.body.appendChild(player.dom); + function initModel() { + var loader = new THREE.FileLoader(); + loader.load('uasb3.json', function (text) { + let json = JSON.parse(text); + let objloader = new THREE.ObjectLoader(); + let scene = objloader.parse(json.scene) - function initModel() { + player.addModels(scene);//.children[3]); + + setModel(scene, player); + // AddWaters(player); + // addRemarkLabels(); + + }); + } + + function initModel1() { var loader = new GLTFLoader(); - loader.load('assets/models/uasb.glb', function (gltf) { + loader.load('assets/models/uasb2.glb', function (gltf) { // gltf.scene.traverse(function (child) { // switch (child.name) { // case 'walls': @@ -153,15 +169,118 @@ // initDraws(child) // } // }) - let tmpmodel= gltf.scene; - tmpmodel.rotation.set(-0.2,2,0.3) + + let tmpmodel = gltf.scene//.children[1]; + + tmpmodel.rotation.set(0, 2, -0.2) player.addModels(tmpmodel); - setModel(window.scene, player); + setModel(tmpmodel, player); }); } - + var x = 0; + // 设置标签 + function setModel(scene, player) { + + + scene.castShadow = true; // 开启阴影 + scene.receiveShadow = true; // 接受阴影 + + scene.children.forEach((item, index) => { + + + // console.log("--------item ==", index); + // console.log("name=", item.name) + // console.log("type=", item.type) + if (item.name.indexOf('OilTank00') > -1) { + addLabel(item, 0, 0.4, 0) + } + else if (item.name.indexOf('水泵M_') > -1) { // 水泵 + x = x + 1; + pumpModelArr.push(item); + //debugger + if (item.name === '水泵001') { + item.material.color.set(0x00f); + } else { + item.material.color.set(0x006600); + + } + console.log("x=",x,"--------item ==", index, "name=", item.name, "type=", item.type); + addStateLabel(item, x/2, 2+x/2, x/2) + + + } + + if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级 + + setModel(item, player); + } + + + + }) + console.log('pumpModelArr=', pumpModelArr) + } + + // 设置标签 + function setModel1(scene, player) { + + + // scene.castShadow = true; // 开启阴影 + // scene.receiveShadow = true; // 接受阴影 + + scene.children.forEach((item, index) => { + + + console.log("--------item ==", index, "name=", item.name, "type=", item.type); + + if (item.name.indexOf('OilTank00') > -1) { + addLabel(item, 0, 0.4, 0) + } + else if (item.name == "水泵001") { + item.material.color.set(0xff0000); + } + else if (item.name == "水泵_2") { + item.material.color.set(0xff0000); + } + else if (item.name.indexOf('水泵M_') > -1 && item.type == "Mesh") { // 水泵 + pumpModelArr.push(item); + + // debugger + // if (item.name === '水泵001') { + // item.material.color.set(0xff0000); + // } else { + // item.material.color.set(0x006600); + + // } + if (item.name === '水泵M_1') { + item.material.color.set(0xff0000); + // item.children[0].material.color.set(0xff0000); + // item.children[1].material.color.set(0xff0000); + // // item.children[2].material.color.set(0xff0000); + } else { + // item.material.color.set(0x006600); + // item.children[0].material.color.set(0x006600); + // item.children[1].material.color.set(0x006600); + // item.children[2].material.color.set(0x006600); + + } + + addStateLabel(item, 0, 3, 0) + + + } + + if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级 + + setModel(item, player); + } + + + }) + console.log('pumpModelArr=', pumpModelArr) + } //添加这个就可以用鼠标拖动 @@ -170,36 +289,35 @@ //点击模型 // window.addEventListener('click', onMouseClick); window.addEventListener('dblclick', onDBMouseClick); - // function onMouseClick(event) { + function onMouseClick(event) { - // //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标 - // mouse.x = (event.clientX / window.innerWidth) * 2 - 1 - // mouse.y = -((event.clientY / window.innerHeight) * 2 - 1) - // //console.log("mouse:"+mouse.x+","+mouse.y) - - // // 通过鼠标点的位置和当前相机的矩阵计算出raycaster - // raycaster.setFromCamera(mouse, window.camera); + //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标 + mouse.x = (event.clientX / window.innerWidth) * 2 - 1 + mouse.y = -((event.clientY / window.innerHeight) * 2 - 1) + //console.log("mouse:"+mouse.x+","+mouse.y) - // // 获取raycaster直线和所有模型相交的数组集合 - // var intersects = raycaster.intersectObjects(scene.children); - // console.log(intersects); - // //debugger - // //将所有的相交的模型的颜色设置为红色 - // for (var i = 0; i < intersects.length; i++) { - // let obj = intersects[i]; - // if (obj.object) { + // 通过鼠标点的位置和当前相机的矩阵计算出raycaster + raycaster.setFromCamera(mouse, window.camera); - // // if (obj.object.name == "视频监控1") { + // 获取raycaster直线和所有模型相交的数组集合 + var intersects = raycaster.intersectObjects(scene.children, true); + console.log(intersects); + //debugger + //将所有的相交的模型的颜色设置为红色 + for (var i = 0; i < intersects.length; i++) { + let obj = intersects[i]; + if (obj.object) { - // // obj.object.material.color.set(0xff6666); - // // alert("视频"); - // // } else { - // // obj.object.material.color.set(0xff0000); - // // } - // } - // } - // } + if (obj.object.name == "视频监控1") { + obj.object.material.color.set(0xff6666); + alert("视频"); + } else { + obj.object.material.color.set(0xff0000); + } + } + } + } function onDBMouseClick(event) { @@ -213,8 +331,9 @@ raycaster.setFromCamera(mouse, window.camera); // 获取raycaster直线和所有模型相交的数组集合 - var intersects = raycaster.intersectObjects(scene.children); - console.log(intersects); + // debugger + var intersects = raycaster.intersectObjects(scene.children, true); + console.log("onclick ", intersects); //debugger //将所有的相交的模型的颜色设置为红色 @@ -225,7 +344,7 @@ console.log(tmpobj) //输出 增加标签 位置 console.log('{name:"' + tmpobj.name + '1",text:"' + tmpobj.name + '",x:' + obj.point.x.toFixed(2) + ',y:' + obj.point.y.toFixed(2) + ',z:' + obj.point.z.toFixed(2) + ',rx:0,ry:0,rz:0}'); - if (tmpobj.name.indexOf('水泵M_') > -1) { // 水泵 + if (tmpobj.name.indexOf('水泵') > -1) { // 水泵 openDialog(tmpobj) //alert(tmpobj.name, "双击"); @@ -239,50 +358,6 @@ - - - - - // 设置标签 - function setModel(scene, player) { - - - scene.castShadow = true; // 开启阴影 - scene.receiveShadow = true; // 接受阴影 - scene.children.forEach((item, index) => { - - - // console.log("--------item ==", index); - // console.log("name=", item.name) - // console.log("type=", item.type) - if (item.name.indexOf('OilTank00') > -1) { - addLabel(item, 0, 0.4, 0) - } - else if (item.name.indexOf('水泵M_') > -1) { // 水泵 - pumpModelArr.push(item); - //debugger - if (item.name === '水泵001') { - item.material.color.set(0xff0000); - } else { - item.material.color.set(0x006600); - - } - addStateLabel(item, 0, 3, 0) - - - } - - if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级 - - setModel(item, player); - } - - - }) - console.log('pumpModelArr=', pumpModelArr) - } - - //添加 模型标签 function addRemarkLabels() { remarkLabArr.forEach((item, index) => { @@ -350,6 +425,7 @@ //状态标签 async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') { + if (!parent.name) { return; @@ -357,15 +433,16 @@ console.log("parent.name2=", parent.name) let item = await getlabel(parent.name); if (item) { - let css2DLabel = css2dlabel.createCSSLabel('●' + item.text, x, y, z, className); - if (parent) { - parent.add(css2DLabel); + // let css2DLabel = player.create3dLabel('●' + item.text, x, y, z, className); + player.create3dLabel(parent, item.text, + 1020, 680, + new THREE.Vector3(x, y, z), + new THREE.Vector3(0, Math.PI, 0), + ); + } + - } else { - window.scene.add(css2DLabel); - } - } } @@ -389,7 +466,7 @@ { textureWidth: 255, textureHeight: 255, - waterNormals: new THREE.TextureLoader().load('./img/waternormals.jpg', function (texture) { + waterNormals: new THREE.TextureLoader().load('./assets/textures/waternormals.jpg', function (texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; @@ -466,8 +543,8 @@ function openDialog(tmpobj) { layer.open({ type: 1 - , offset: type //具体配置参考：http://doc/modules/layer.html#offset - , id: 'layerDemo' + type //防止重复弹出 + , offset: 1 //具体配置参考：http://doc/modules/layer.html#offset + , id: 'layerDemo' + 1 //防止重复弹出 , content: '
' + tmpobj.name + '
' , btn: '关闭' , btnAlign: 'c' //按钮居中 diff --git a/lndexZHSC.html b/lndexZHSC.html index 5ca56d4..b5d579a 100644 --- a/lndexZHSC.html +++ b/lndexZHSC.html @@ -48,13 +48,13 @@ } - + @@ -91,14 +91,14 @@ player.setSize(window.innerWidth, window.innerHeight); player.play(); - document.body.appendChild(player.dom); + // document.body.appendChild(player.dom); window.addEventListener('resize', function () { player.setSize(window.innerWidth, window.innerHeight); }); - var orbitControls = new OrbitControls(window.camera, player.dom); + // var orbitControls = new OrbitControls(window.camera, player.dom); // initLable(); // setModel(window.scene, player); // AddWaters(player); diff --git a/uasb3.json b/uasb3.json index 1e57798..d784912 100644 --- a/uasb3.json +++ b/uasb3.json @@ -3119,38 +3119,7 @@ "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1], "background": 1847635, "children": [ - { - "uuid": "f5ef1b23-342e-4e57-8362-f875224ea133", - "type": "AmbientLight", - "name": "环境光源AmbientLight", - "layers": 1, - "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1], - "color": 2236962, - "intensity": 1 - }, - { - "uuid": "2d2cbb50-d5e3-4588-b769-8c448131610c", - "type": "DirectionalLight", - "name": "平行光源DirectionalLight", - "layers": 1, - "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.015664010947554097,9.843879363885673,11.744623534686504,1], - "color": 16777215, - "intensity": 0.7, - "shadow": { - "camera": { - "uuid": "cd55d683-302a-4773-b8ac-87ccb981ac62", - "type": "OrthographicCamera", - "layers": 1, - "zoom": 1, - "left": -5, - "right": 5, - "top": 5, - "bottom": -5, - "near": 0.5, - "far": 500 - } - } - }, + { "uuid": "63e6e186-be3a-4702-9071-d52c9d20bd61", "type": "DirectionalLight",