Browse Source

lable

master
lxc 2 years ago
parent
commit
586ae2a20f
  1. BIN
      assets/models/.DS_Store
  2. BIN
      assets/models/uasb1.glb
  3. BIN
      assets/models/uasb2.glb
  4. 69
      htmlbard.html
  5. 2
      index.html
  6. 344
      index2.html
  7. 84
      js/app.js
  8. 24
      js/units/css3dlabel.js
  9. 265
      lndexUASB.html
  10. 10
      lndexZHSC.html
  11. 33
      uasb3.json

BIN
assets/models/.DS_Store

Binary file not shown.

BIN
assets/models/uasb1.glb

Binary file not shown.

BIN
assets/models/uasb2.glb

Binary file not shown.

69
htmlbard.html

@ -239,9 +239,12 @@
// document.body.appendChild(glRenderer.domElement); document.body.appendChild(glRenderer.domElement);
document.body.appendChild(cssRenderer.domElement); glRenderer.domElement.appendChild(cssRenderer.domElement);
cssRenderer.domElement.appendChild(glRenderer.domElement);
// document.body.appendChild(cssRenderer.domElement);
// cssRenderer.domElement.appendChild(glRenderer.domElement);
glScene = new THREE.Scene(); glScene = new THREE.Scene();
cssScene = glScene//new THREE.Scene(); cssScene = glScene//new THREE.Scene();
@ -279,6 +282,66 @@
} }
initialize(); 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;
}
}
}
</script> </script>
</body> </body>

2
index.html

@ -157,7 +157,7 @@
var raycaster = new THREE.Raycaster() var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2() var mouse = new THREE.Vector2()
//点击模型 //点击模型
// window.addEventListener('click', onMouseClick); window.addEventListener('click', onMouseClick);
function onMouseClick(event) { function onMouseClick(event) {

344
index2.html

@ -1,203 +1,205 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<title></title> <title>Threejs鼠标点击场景对象获取对象信息,Threejs使用Raycaster拾取对象信息</title>
<meta charset="utf-8"> <meta charset="UTF-8">
<meta name="generator" content="Three.js Editor"> <script type="text/javascript" src="libs/statistics.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <script type="text/javascript" src="libs/steak.js"></script>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OrbitControls.js"></script>
<style> <style>
body { body {
font-family: sans-serif; margin: 0;
font-size: 11px; overflow: hidden;
background-color: rgb(23, 14, 111);
margin: 0px;
}
canvas {
display: block;
}
.label {
color: #FFF;
font-family: sans-serif;
padding: 2px;
background: rgba(255, 0, 0, .6);
}
.table {
color: #FFF;
font-family: sans-serif;
padding: 2px;
display: block;
position: absolute;
left: 100px;
top: 150px;
} }
</style> </style>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"jsm/": "../examples/jsm/"
}
}
</script>
</head> </head>
<body ontouchstart=""> <body>
<div class="table">2d 数据显示位置</div> <div id="dom"></div>
<script type="module"> <script type="text/javascript">
var camera;
import * as THREE from 'three'; var renderer;
import { APP } from './js/app.js'; var length = 36;
import { VRButton } from './js/VRButton.js'; var ws = 2;
var graph = [];
import { OrbitControls } from 'jsm/controls/OrbitControls.js'; var mesh = [];
import { CSS2DRenderer, CSS2DObject } from '/examples/jsm/renderers/CSS2DRenderer.js';
function init() {
// 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光。
window.THREE = THREE; // Used by APP Scripts. var scene = new THREE.Scene();
window.VRButton = VRButton; // Used by APP Scripts.
var urls = [
var loader = new THREE.FileLoader(); 'assets/bgImage/skyBox4/posx.jpg',
loader.load('app.json', function (text) { 'assets/bgImage/skyBox4/negx.jpg',
'assets/bgImage/skyBox4/posy.jpg',
var player = new APP.Player(); 'assets/bgImage/skyBox4/negy.jpg',
player.load(JSON.parse(text)); 'assets/bgImage/skyBox4/posz.jpg',
player.setSize(window.innerWidth, window.innerHeight); 'assets/bgImage/skyBox4/negz.jpg'
player.play(); ];
document.body.appendChild(player.dom); var cubeLoader = new THREE.CubeTextureLoader();
scene.background = cubeLoader.load(urls);
window.addEventListener('resize', function () {
// 创建一个摄像机,它定义了我们正在看的地方
player.setSize(window.innerWidth, window.innerHeight); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
// 将摄像机对准场景的中心
camera.position.x = 60;
camera.position.y = 35;
camera.position.z = 60;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);
// 创建一个渲染器并设置大小,WebGLRenderer将会使用电脑显卡来渲染场景
// initialize basic renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 将平面添加到场景中
var plane = createPlaneGeometryBasicMaterial();
scene.add(plane);
// 在屏幕上显示坐标轴
var axes = new THREE.AxesHelper(100);
scene.add(axes);
scene.add(new THREE.AmbientLight(0x666666));
scene.add(new THREE.AmbientLight("#ffffff", 1));
document.getElementById("dom").appendChild(renderer.domElement);
initGround();
initGrid();
// 启动动画
renderScene();
// 创建一个地面
function createPlaneGeometryBasicMaterial() {
var textureLoader = new THREE.TextureLoader();
var cubeMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("assets/textures/cd.jpg"),
}); });
var orbitControls = new OrbitControls(window.camera, player.dom); cubeMaterial.map.wrapS = THREE.RepeatWrapping;
initLable(); cubeMaterial.map.wrapT = THREE.RepeatWrapping;
cubeMaterial.map.repeat.set(18, 18)
// 创建地平面并设置大小
var planeGeometry = new THREE.PlaneGeometry(500, 500);
var plane = new THREE.Mesh(planeGeometry, cubeMaterial);
// 设置平面位置并旋转
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.z = 0;
return plane;
}
// 初始化线路
function initLine(pArr) {
var points = [];
var geometry = new THREE.Geometry();
for (var i = 0; i < pArr.length; i++) {
var randomX = pArr[i].x;
var randomY = pArr[i].y;
var randomZ = pArr[i].z;
var vector = new THREE.Vector3(randomX, randomY, randomZ);
geometry.vertices.push(vector);
points.push(vector);
}
var material = new THREE.LineBasicMaterial({
color: 0x0000FF
}); });
var line = new THREE.Line(geometry, material);
scene.add(line);
return points;
}
//添加这个就可以用鼠标拖动 // 绘制路网
function initGround() {
var raycaster = new THREE.Raycaster() var geometry = new THREE.Geometry();
var mouse = new THREE.Vector2() geometry.vertices.push(new THREE.Vector3(0, 0, 0));
//点击模型 geometry.vertices.push(new THREE.Vector3(length, 0, 0));
window.addEventListener('click', onMouseClick);
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);
// 获取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) {
if (obj.object.name == "视频监控1") {
obj.object.material[0].color.set(0xff6666); for (var i = 0; i <= length / ws; i++) {
alert("视频"); var material = new THREE.LineBasicMaterial({
color: 0x808080
});
var line = new THREE.Line(geometry, material);
line.position.z = i * ws;
scene.add(line);
var line = new THREE.Line(geometry, material);
line.position.x = i * ws;
line.position.z = length;
line.rotation.y = 90 * Math.PI / 180;
scene.add(line);
}
}
// 初始化障碍物
function initGrid() {
for (var i = 0; i < length / ws; i++) {
var nodeRow = [];
for (var j = 0; j < length / ws; j++) {
var salt = Math.random() * 7;
if (salt > 2) {
nodeRow.push(1);
} else { } else {
obj.object.material[0].color.set(0xff0000); nodeRow.push(0);
} }
if (salt <= 2) {
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
color: 0xC0C0C0
}));
let x = ws * j + ws / 2;
let z = ws * i + ws / 2;
cube.position.set(x, 1.2, z);
scene.add(cube);
mesh.push(cube);
} }
} }
graph.push(nodeRow);
}
} }
function createCSSLabel(text, parent) { document.addEventListener('click', onDocumentMouseDown, false);
const labelDiv = document.createElement('div');
labelDiv.className = 'label';
labelDiv.name = "csslabeldiv"
labelDiv.textContent = text;
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
const moonLabel = new CSS2DObject(labelDiv);
moonLabel.position.set(1, 2, 0);
moonLabel.name = "datalabel"
moonLabel.userData = { name: "datalable", id: "", url: "" }
return moonLabel;
function onDocumentMouseDown(event) {
// 点击屏幕创建一个向量
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(mesh, true);
if (intersects.length > 0) {
intersects[0].object.material.color.set("#ff0000");
alert(JSON.stringify(intersects[0]))
}
} }
const css2DLabelList = []
function addLabel(obj, scene, i) {
const labelDiv = document.createElement('div');
labelDiv.className = 'label';
labelDiv.name = "label" + i;
labelDiv.textContent = obj.text;
// 动画渲染
var step = 5;
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 function renderScene() {
const css2DLabel = new CSS2DObject(labelDiv); orbit.update();
css2DLabel.position.set(obj.x, obj.y, obj.z);
css2DLabel.name = "datalabel" + i;
css2DLabel.userData = { name: "datalable", id: "", url: "" }
// css2DLabelList.add(css2DLabel);
scene.add(css2DLabel);
// 使用requestAnimationFrame函数进行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
} }
function initLable() {
const labobjarr = [{ text: "测试标签1", x: -1, y: 1, z: 1 }, { text: "测试标签2", x: 10, y: 10, z: 10 }]
for (var i = 0, length = labobjarr.length; i < length; i++) {
addLabel(labobjarr[i], window.scene, i); // 渲染的场景
renderer.render(scene, camera);
}
} }
window.onload = init;
</script> function onResize() {
<!-- Code injected by live-server --> camera.aspect = window.innerWidth / window.innerHeight;
<script> camera.updateProjectionMatrix();
// <![CDATA[ <-- For SVG support renderer.setSize(window.innerWidth, window.innerHeight);
if ('WebSocket' in window) { }
(function () { // 监听调整大小事件
function refreshCSS() { window.addEventListener('resize', onResize, false);
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script> </script>
</body> </body>

84
js/app.js

@ -28,27 +28,10 @@ var APP = {
document.body.appendChild(cssRenderer.domElement); document.body.appendChild(cssRenderer.domElement);
document.body.appendChild(glRenderer.domElement); document.body.appendChild(glRenderer.domElement);
// glRenderer.domElement.appendChild(cssRenderer.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(); 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++) { // for (var i = 0; i < 20; i++) {
// create3dPage( // create3dPage(
@ -60,11 +43,7 @@ var APP = {
// initModel(); // initModel();
createLights(); createLights();
// window.addEventListener('resize', function () {
// this.setSize(window.innerWidth, window.innerHeight);
// });
window.camera = camera; window.camera = camera;
window.scene = glScene; window.scene = glScene;
@ -78,7 +57,7 @@ var APP = {
alpha: true alpha: true
}); });
glRenderer.setClearColor(0xECF8FF); glRenderer.setClearColor(0x34495E);
glRenderer.setPixelRatio(window.devicePixelRatio); glRenderer.setPixelRatio(window.devicePixelRatio);
glRenderer.setSize(window.innerWidth, window.innerHeight); glRenderer.setSize(window.innerWidth, window.innerHeight);
@ -138,6 +117,10 @@ var APP = {
} }
function createLights() { 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"); const light = new THREE.AmbientLight("#ffffff");
glScene.add(light); glScene.add(light);
@ -170,26 +153,17 @@ var APP = {
glScene.add(light7) glScene.add(light7)
} }
function initialize() { this.setClearColor = function (color) {
glRenderer.setClearColor(color);
} }
this.load = function (json) {
}
//position = { x: 0, y: 0, z: 0 }, rotation= { x: 0, y: 0, z: 0 } //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); glScene.add(value);
}; };
this.setCamera = function (value) { this.setCamera = function (value) {
camera = value; camera = value;
@ -202,11 +176,11 @@ var APP = {
this.setScene = function (value) { this.setScene = function (value) {
scene = value; glScene = value;
window.scene = scene window.scene = glScene
}; };
this.addWater=function(water){ this.addWater = function (water) {
waters.push(water); waters.push(water);
} }
this.setPixelRatio = function (pixelRatio) { this.setPixelRatio = function (pixelRatio) {
@ -254,7 +228,7 @@ var APP = {
} }
var objects=[] var objects = []
this.play = function () { this.play = function () {
@ -329,7 +303,7 @@ var APP = {
}; };
// //
this.create3dPage=function( w, h, position, rotation, url) { this.create3dPage = function (w, h, position, rotation, url) {
var plane = css3dlabel.createPlane( var plane = css3dlabel.createPlane(
w, h, w, h,
@ -344,7 +318,37 @@ var APP = {
url); url);
cssScene.add(cssObject); 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() { function createSpriteShape() {
/*1、创建一个画布,记得设置画布的宽高,否则将使用默认宽高,有可能会导致图像显示变形*/ /*1、创建一个画布,记得设置画布的宽高,否则将使用默认宽高,有可能会导致图像显示变形*/
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
@ -364,7 +368,7 @@ var APP = {
map: texture,//设置精灵纹理贴图 map: texture,//设置精灵纹理贴图
}); });
let mesh = new THREE.Sprite(material); let mesh = new THREE.Sprite(material);
mesh.position.x=2; mesh.position.x = 2;
mesh.position.y = 2; mesh.position.y = 2;
/*4、放大图片,每个精灵有自己的大小,默认情况下都是很小的,如果你不放大,基本是看不到的*/ /*4、放大图片,每个精灵有自己的大小,默认情况下都是很小的,如果你不放大,基本是看不到的*/
//mesh.scale.set(100,100,1); //mesh.scale.set(100,100,1);

24
js/units/css3dlabel.js

@ -35,6 +35,30 @@ export default {
css2DLabel.userData = { name: "datalable", id: "", url: "" } css2DLabel.userData = { name: "datalable", id: "", url: "" }
return css2DLabel; 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) { create3dPage: function (scene, w, h, position, rotation, url) {
var plane = this.createPlane( var plane = this.createPlane(

265
lndexUASB.html

@ -33,7 +33,7 @@
color: #ff000f; color: #ff000f;
font-family: sans-serif; font-family: sans-serif;
padding: 2px; padding: 2px;
/* background: rgba(0, 0, 0, .6); */ background: rgba(77, 0, 0, .6);
} }
.label1 { .label1 {
@ -113,7 +113,8 @@
player.setSize(window.innerWidth, window.innerHeight); player.setSize(window.innerWidth, window.innerHeight);
}); });
//设置背景颜色
player.setClearColor(0x34495E);
initModel() initModel()
@ -122,18 +123,33 @@
for (var i = 0; i < 1; i++) { for (var i = 0; i < 1; i++) {
player.create3dPage( player.create3dPage(
1020, 680, 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), new THREE.Vector3(0, Math.PI, 0),
'https://zuoben.blog.csdn.net/'); 'https://zuoben.blog.csdn.net/');
} }
} }
// document.body.appendChild(player.dom); // 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(); 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) { // gltf.scene.traverse(function (child) {
// switch (child.name) { // switch (child.name) {
// case 'walls': // case 'walls':
@ -153,120 +169,104 @@
// initDraws(child) // 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); player.addModels(tmpmodel);
setModel(window.scene, player); setModel(tmpmodel, player);
}); });
} }
var x = 0;
// 设置标签
function setModel(scene, player) {
//添加这个就可以用鼠标拖动 scene.castShadow = true; // 开启阴影
scene.receiveShadow = true; // 接受阴影
var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()
//点击模型
// window.addEventListener('click', onMouseClick);
window.addEventListener('dblclick', onDBMouseClick);
// 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);
// // 获取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) {
// // if (obj.object.name == "视频监控1") {
// // obj.object.material.color.set(0xff6666);
// // alert("视频");
// // } else {
// // obj.object.material.color.set(0xff0000);
// // }
// }
// }
// }
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 scene.children.forEach((item, index) => {
raycaster.setFromCamera(mouse, window.camera);
// 获取raycaster直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects(scene.children);
console.log(intersects);
//debugger // console.log("--------item ==", index);
//将所有的相交的模型的颜色设置为红色 // console.log("name=", item.name)
for (var i = 0; i < intersects.length; i++) { // console.log("type=", item.type)
let obj = intersects[i]; if (item.name.indexOf('OilTank00') > -1) {
if (obj.object) { addLabel(item, 0, 0.4, 0)
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; 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 setModel(scene, player) { function setModel1(scene, player) {
scene.castShadow = true; // 开启阴影 // scene.castShadow = true; // 开启阴影
scene.receiveShadow = true; // 接受阴影 // scene.receiveShadow = true; // 接受阴影
scene.children.forEach((item, index) => { scene.children.forEach((item, index) => {
// console.log("--------item ==", index); console.log("--------item ==", index, "name=", item.name, "type=", item.type);
// console.log("name=", item.name)
// console.log("type=", item.type)
if (item.name.indexOf('OilTank00') > -1) { if (item.name.indexOf('OilTank00') > -1) {
addLabel(item, 0, 0.4, 0) addLabel(item, 0, 0.4, 0)
} }
else if (item.name.indexOf('水泵M_') > -1) { // 水泵 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); pumpModelArr.push(item);
//debugger
if (item.name === '水泵001') { // 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.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 { } else {
item.material.color.set(0x006600); // 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) addStateLabel(item, 0, 3, 0)
@ -282,6 +282,81 @@
console.log('pumpModelArr=', pumpModelArr) console.log('pumpModelArr=', pumpModelArr)
} }
//添加这个就可以用鼠标拖动
var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()
//点击模型
// window.addEventListener('click', onMouseClick);
window.addEventListener('dblclick', onDBMouseClick);
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);
// 获取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) {
if (obj.object.name == "视频监控1") {
obj.object.material.color.set(0xff6666);
alert("视频");
} else {
obj.object.material.color.set(0xff0000);
}
}
}
}
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, true);
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('水泵') > -1) { // 水泵
openDialog(tmpobj)
//alert(tmpobj.name, "双击");
}
break;
}
}
}
//添加 模型标签 //添加 模型标签
function addRemarkLabels() { function addRemarkLabels() {
@ -350,6 +425,7 @@
//状态标签 //状态标签
async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') { async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
if (!parent.name) { if (!parent.name) {
return; return;
@ -357,15 +433,16 @@
console.log("parent.name2=", parent.name) console.log("parent.name2=", parent.name)
let item = await getlabel(parent.name); let item = await getlabel(parent.name);
if (item) { if (item) {
let css2DLabel = css2dlabel.createCSSLabel('●' + item.text, x, y, z, className); // let css2DLabel = player.create3dLabel('●' + item.text, x, y, z, className);
if (parent) { player.create3dLabel(parent, item.text,
parent.add(css2DLabel); 1020, 680,
new THREE.Vector3(x, y, z),
} else { new THREE.Vector3(0, Math.PI, 0),
window.scene.add(css2DLabel); );
} }
}
} }
@ -389,7 +466,7 @@
{ {
textureWidth: 255, textureWidth: 255,
textureHeight: 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; texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
@ -466,8 +543,8 @@
function openDialog(tmpobj) { function openDialog(tmpobj) {
layer.open({ layer.open({
type: 1 type: 1
, offset: type //具体配置参考:http://doc/modules/layer.html#offset , offset: 1 //具体配置参考:http://doc/modules/layer.html#offset
, id: 'layerDemo' + type //防止重复弹出 , id: 'layerDemo' + 1 //防止重复弹出
, content: '<div style="padding: 20px 100px;">' + tmpobj.name + '</div>' , content: '<div style="padding: 20px 100px;">' + tmpobj.name + '</div>'
, btn: '关闭' , btn: '关闭'
, btnAlign: 'c' //按钮居中 , btnAlign: 'c' //按钮居中

10
lndexZHSC.html

@ -48,13 +48,13 @@
} }
</style> </style>
<script async src="/app/lib/layui/layui.js"></script> <script async src="/libs/layui/layui.js"></script>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"three": "../build/three.module.js", "three": "/libs/build/three.module.js",
"jsm/": "../examples/jsm/" "jsm/": "/libs/three/jsm/"
} }
} }
</script> </script>
@ -91,14 +91,14 @@
player.setSize(window.innerWidth, window.innerHeight); player.setSize(window.innerWidth, window.innerHeight);
player.play(); player.play();
document.body.appendChild(player.dom); // document.body.appendChild(player.dom);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
player.setSize(window.innerWidth, window.innerHeight); player.setSize(window.innerWidth, window.innerHeight);
}); });
var orbitControls = new OrbitControls(window.camera, player.dom); // var orbitControls = new OrbitControls(window.camera, player.dom);
// initLable(); // initLable();
// setModel(window.scene, player); // setModel(window.scene, player);
// AddWaters(player); // AddWaters(player);

33
uasb3.json

@ -3119,38 +3119,7 @@
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1], "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
"background": 1847635, "background": 1847635,
"children": [ "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", "uuid": "63e6e186-be3a-4702-9071-d52c9d20bd61",
"type": "DirectionalLight", "type": "DirectionalLight",

Loading…
Cancel
Save