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
Split 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(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;
}
}
}
</script>
</body>

2
index.html
View File

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

354
index2.html
View File

@ -1,203 +1,205 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="generator" content="Three.js Editor">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Threejs鼠标点击场景对象获取对象信息，Threejs使用Raycaster拾取对象信息</title>
<meta charset="UTF-8">
<script type="text/javascript" src="libs/statistics.js"></script>
<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>
body {
font-family: sans-serif;
font-size: 11px;
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;
margin: 0;
overflow: hidden;
}
</style>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"jsm/": "../examples/jsm/"
}
}
</script>
</head>
<body ontouchstart="">
<div class="table">2d 数据显示位置</div>
<script type="module">
import * as THREE from 'three';
import { APP } from './js/app.js';
import { VRButton } from './js/VRButton.js';
import { OrbitControls } from 'jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from '/examples/jsm/renderers/CSS2DRenderer.js';
window.THREE = THREE; // Used by APP Scripts.
window.VRButton = VRButton; // Used by APP Scripts.
var loader = new THREE.FileLoader();
loader.load('app.json', function (text) {
var player = new APP.Player();
player.load(JSON.parse(text));
player.setSize(window.innerWidth, window.innerHeight);
player.play();
document.body.appendChild(player.dom);
window.addEventListener('resize', function () {
player.setSize(window.innerWidth, window.innerHeight);
});
var orbitControls = new OrbitControls(window.camera, player.dom);
initLable();
});
//添加这个就可以用鼠标拖动
var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()
//点击模型
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);
<body>
<div id="dom"></div>
<script type="text/javascript">
var camera;
var renderer;
var length = 36;
var ws = 2;
var graph = [];
var mesh = [];
function init() {
// 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。
var scene = new THREE.Scene();
var urls = [
'assets/bgImage/skyBox4/posx.jpg',
'assets/bgImage/skyBox4/negx.jpg',
'assets/bgImage/skyBox4/posy.jpg',
'assets/bgImage/skyBox4/negy.jpg',
'assets/bgImage/skyBox4/posz.jpg',
'assets/bgImage/skyBox4/negz.jpg'
];
var cubeLoader = new THREE.CubeTextureLoader();
scene.background = cubeLoader.load(urls);
// 创建一个摄像机，它定义了我们正在看的地方
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"),
});
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);
console.log(intersects);
// debugger
//将所有的相交的模型的颜色设置为红色
for (var i = 0; i < intersects.length; i++) {
let obj = intersects[i];
if (obj.object) {
// 初始化线路
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;
}
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("视频");
} else {
obj.object.material[0].color.set(0xff0000);
// 初始化障碍物
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 {
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');
labelDiv.className = 'label';
labelDiv.name = "label" + i;
labelDiv.textContent = obj.text;
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
const css2DLabel = new CSS2DObject(labelDiv);
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);
document.addEventListener('click', onDocumentMouseDown, false);
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]))
}
}
}
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++) {
// 动画渲染
var step = 5;
addLabel(labobjarr[i], window.scene, i);
function renderScene() {
orbit.update();
// 使用requestAnimationFrame函数进行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
}
</script>
<!-- Code injected by live-server -->
<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);
}
})();
// 渲染的场景
renderer.render(scene, camera);
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
window.onload = init;
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// ]]>
// 监听调整大小事件
window.addEventListener('resize', onResize, false);
</script>
</body>

122
js/app.js
View File

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

24
js/units/css3dlabel.js
View File

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

269
lndexUASB.html
View File

@ -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 @@
}
}
</script>
<script async src="./libs/layui/layui.js"></script>
<script async src="./libs/mqtt/mqtt.min.js"></script>
<script async src="./libs/layui/layui.js"></script>
<script async src="./libs/mqtt/mqtt.min.js"></script>
</head>
<body ontouchstart="">
@ -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: '<div style="padding: 20px 100px;">' + tmpobj.name + '</div>'
, btn: '关闭'
, btnAlign: 'c' //按钮居中

10
lndexZHSC.html
View File

@ -48,13 +48,13 @@
}
</style>
<script async src="/app/lib/layui/layui.js"></script>
<script async src="/libs/layui/layui.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"jsm/": "../examples/jsm/"
"three": "/libs/build/three.module.js",
"jsm/": "/libs/three/jsm/"
}
}
</script>
@ -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);

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

Write Preview
Loading…
Cancel
Save