lxc
/
3dapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

lable

master
lxc 2 years ago
parent
1dce65fbf1
commit
586ae2a20f
11 changed files with 511 additions and 372 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 354
      index2.html
  7. 122
      js/app.js
  8. 24
      js/units/css3dlabel.js
  9. 269
      lndexUASB.html
  10. 10
      lndexZHSC.html
  11. 33
      uasb3.json

BIN
assets/models/.DS_Store
View File

Binary file not shown.

BIN
assets/models/uasb1.glb
View File

Binary file not shown.

BIN
assets/models/uasb2.glb
View File

Binary file not shown.

69
htmlbard.html
View File

@ -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
View File

@ -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) {

354
index2.html
View File

@ -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;
var orbitControls = new OrbitControls(window.camera, player.dom); camera.position.y = 35;
initLable(); camera.position.z = 60;
camera.lookAt(scene.position);
}); var orbit = new THREE.OrbitControls(camera);
//添加这个就可以用鼠标拖动 // 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
// initialize basic renderer
var raycaster = new THREE.Raycaster() renderer = new THREE.WebGLRenderer();
var mouse = new THREE.Vector2() renderer.setSize(window.innerWidth, window.innerHeight);
//点击模型
window.addEventListener('click', onMouseClick); // 将平面添加到场景中
var plane = createPlaneGeometryBasicMaterial();
function onMouseClick(event) { scene.add(plane);
//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标 // 在屏幕上显示坐标轴
mouse.x = (event.clientX / window.innerWidth) * 2 - 1 var axes = new THREE.AxesHelper(100);
mouse.y = -((event.clientY / window.innerHeight) * 2 - 1) scene.add(axes);
//console.log("mouse:"+mouse.x+","+mouse.y) scene.add(new THREE.AmbientLight(0x666666));
scene.add(new THREE.AmbientLight("#ffffff", 1));
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster document.getElementById("dom").appendChild(renderer.domElement);
raycaster.setFromCamera(mouse, window.camera);
initGround();
initGrid();
// 启动动画
renderScene();
// 创建一个地面
function createPlaneGeometryBasicMaterial() {
var textureLoader = new THREE.TextureLoader();
var cubeMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("assets/textures/cd.jpg"),
});
cubeMaterial.map.wrapS = THREE.RepeatWrapping;
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;
}
// 获取raycaster直线和所有模型相交的数组集合 // 初始化线路
var intersects = raycaster.intersectObjects(scene.children); function initLine(pArr) {
console.log(intersects); var points = [];
// debugger var geometry = new THREE.Geometry();
//将所有的相交的模型的颜色设置为红色 for (var i = 0; i < pArr.length; i++) {
for (var i = 0; i < intersects.length; i++) { var randomX = pArr[i].x;
let obj = intersects[i]; var randomY = pArr[i].y;
if (obj.object) { 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;
}
if (obj.object.name == "视频监控1") { // 绘制路网
function initGround() {
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(length, 0, 0));
for (var i = 0; i <= length / ws; i++) {
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);
}
}
obj.object.material[0].color.set(0xff6666); // 初始化障碍物
alert("视频"); function initGrid() {
} else { for (var i = 0; i < length / ws; i++) {
obj.object.material[0].color.set(0xff0000); var nodeRow = [];
for (var j = 0; j < length / ws; j++) {
var salt = Math.random() * 7;
if (salt > 2) {
nodeRow.push(1);
} else {
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) {
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;
}
const css2DLabelList = []
function addLabel(obj, scene, i) {
const labelDiv = document.createElement('div'); document.addEventListener('click', onDocumentMouseDown, false);
labelDiv.className = 'label';
labelDiv.name = "label" + i; function onDocumentMouseDown(event) {
labelDiv.textContent = obj.text; // 点击屏幕创建一个向量
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1, 0.5);
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标
const css2DLabel = new CSS2DObject(labelDiv); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
css2DLabel.position.set(obj.x, obj.y, obj.z); var intersects = raycaster.intersectObjects(mesh, true);
css2DLabel.name = "datalabel" + i; if (intersects.length > 0) {
css2DLabel.userData = { name: "datalable", id: "", url: "" } intersects[0].object.material.color.set("#ff0000");
// css2DLabelList.add(css2DLabel); alert(JSON.stringify(intersects[0]))
scene.add(css2DLabel); }
}
} // 动画渲染
function initLable() { var step = 5;
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); function renderScene() {
orbit.update();
// 使用requestAnimationFrame函数进行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
} }
}
</script> // 渲染的场景
<!-- Code injected by live-server --> renderer.render(scene, camera);
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
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 { window.onload = init;
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
} }
// ]]> // 监听调整大小事件
window.addEventListener('resize', onResize, false);
</script> </script>
</body> </body>

122
js/app.js
View File

@ -1,16 +1,16 @@
import { OrbitControls } from 'jsm/controls/OrbitControls.js'; import { OrbitControls } from 'jsm/controls/OrbitControls.js';
import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'jsm/renderers/CSS3DRenderer.js'; import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'jsm/renderers/CSS3DRenderer.js';
import css3dlabel from './units/css3dlabel.js' import css3dlabel from './units/css3dlabel.js'
var APP = { var APP = {
Player: function () { Player: function () {
var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
camera = new THREE.PerspectiveCamera( camera = new THREE.PerspectiveCamera(
45, 45,
@ -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,14 +43,10 @@ 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;
var waters = []; var waters = [];
@ -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);
@ -90,7 +69,7 @@ var APP = {
} }
function createCssRenderer() { function createCssRenderer() {
var cssRenderer = new CSS3DRenderer(); var cssRenderer = new CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight); cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute'; cssRenderer.domElement.style.position = 'absolute';
glRenderer.domElement.style.zIndex = 0; glRenderer.domElement.style.zIndex = 0;
@ -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) {
@ -231,16 +205,16 @@ var APP = {
cssRenderer.setSize(this.width, this.height); cssRenderer.setSize(this.width, this.height);
}; };
var time, startTime, prevTime; var time, startTime, prevTime;
function animate() { function animate() {
// controls.update(); // controls.update();
glRenderer.render(glScene, camera); glRenderer.render(glScene, camera);
@ -250,13 +224,13 @@ var APP = {
// // 播放特效 // // 播放特效
// water.material.uniforms['time'].value += 1.0 / 60.0; // water.material.uniforms['time'].value += 1.0 / 60.0;
// }); // });
} }
var objects=[] var objects = []
this.play = function () { this.play = function () {
// if (renderer.xr.enabled) dom.append(vrButton); // if (renderer.xr.enabled) dom.append(vrButton);
@ -281,7 +255,7 @@ var APP = {
object.position.x = Math.random() * 4 - 2, object.position.x = Math.random() * 4 - 2,
object.position.y = Math.random() * 4 - 2, object.position.y = Math.random() * 4 - 2,
object.position.z = 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); glScene.add(object);
objects.push(object); objects.push(object);
@ -295,7 +269,7 @@ var APP = {
cssScene.add(createSpriteShape()); cssScene.add(createSpriteShape());
cssScene.add(createBox13DLabel()); cssScene.add(createBox13DLabel());
}; };
@ -312,7 +286,7 @@ var APP = {
dispatch(events.stop, arguments); dispatch(events.stop, arguments);
glRenderer.setAnimationLoop(null); 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( var plane = css3dlabel.createPlane(
w, h, w, h,
position, position,
@ -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
View File

@ -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(

269
lndexUASB.html
View File

@ -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 {
@ -57,8 +57,8 @@
} }
} }
</script> </script>
<script async src="./libs/layui/layui.js"></script> <script async src="./libs/layui/layui.js"></script>
<script async src="./libs/mqtt/mqtt.min.js"></script> <script async src="./libs/mqtt/mqtt.min.js"></script>
</head> </head>
<body ontouchstart=""> <body ontouchstart="">
@ -78,9 +78,9 @@
import { Water } from 'jsm/objects/Water.js'; import { Water } from 'jsm/objects/Water.js';
import modellabel from './js/units/modellabel.js' import modellabel from './js/units/modellabel.js'
import css2dlabel from './js/units/css3dlabel.js' import css2dlabel from './js/units/css3dlabel.js'
import config from './js/config.js' import config from './js/config.js'
window.THREE = THREE; // Used by APP Scripts. window.THREE = THREE; // Used by APP Scripts.
var client = null; var client = null;
@ -113,27 +113,43 @@
player.setSize(window.innerWidth, window.innerHeight); player.setSize(window.innerWidth, window.innerHeight);
}); });
//设置背景颜色
player.setClearColor(0x34495E);
initModel() initModel()
addRemarkLabels(); addRemarkLabels();
mqttInit(); mqttInit();
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,15 +169,118 @@
// 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; // 接受阴影
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('click', onMouseClick);
window.addEventListener('dblclick', onDBMouseClick); window.addEventListener('dblclick', onDBMouseClick);
// function onMouseClick(event) { function onMouseClick(event) {
// //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标 //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
// mouse.x = (event.clientX / window.innerWidth) * 2 - 1 mouse.x = (event.clientX / window.innerWidth) * 2 - 1
// mouse.y = -((event.clientY / window.innerHeight) * 2 - 1) mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
// //console.log("mouse:"+mouse.x+","+mouse.y) //console.log("mouse:"+mouse.x+","+mouse.y)
// // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
// raycaster.setFromCamera(mouse, window.camera);
// // 获取raycaster直线和所有模型相交的数组集合 // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
// var intersects = raycaster.intersectObjects(scene.children); raycaster.setFromCamera(mouse, window.camera);
// console.log(intersects);
// //debugger
// //将所有的相交的模型的颜色设置为红色
// for (var i = 0; i < intersects.length; i++) {
// let obj = intersects[i];
// if (obj.object) {
// // 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); if (obj.object.name == "视频监控1") {
// // alert("视频");
// // } else {
// // obj.object.material.color.set(0xff0000);
// // }
// }
// }
// }
obj.object.material.color.set(0xff6666);
alert("视频");
} else {
obj.object.material.color.set(0xff0000);
}
}
}
}
function onDBMouseClick(event) { function onDBMouseClick(event) {
@ -213,8 +331,9 @@
raycaster.setFromCamera(mouse, window.camera); raycaster.setFromCamera(mouse, window.camera);
// 获取raycaster直线和所有模型相交的数组集合 // 获取raycaster直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects(scene.children); // debugger
console.log(intersects); var intersects = raycaster.intersectObjects(scene.children, true);
console.log("onclick ", intersects);
//debugger //debugger
//将所有的相交的模型的颜色设置为红色 //将所有的相交的模型的颜色设置为红色
@ -225,7 +344,7 @@
console.log(tmpobj) 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}'); 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) openDialog(tmpobj)
//alert(tmpobj.name, "双击"); //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() { function addRemarkLabels() {
remarkLabArr.forEach((item, index) => { remarkLabArr.forEach((item, index) => {
@ -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),
new THREE.Vector3(0, Math.PI, 0),
);
}
} else {
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
View File

@ -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
View File

@ -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",

Write Preview
Loading…
Cancel
Save