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

344
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;
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
View File

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

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