添加基站和人

src/uwb-sample.js

@@ -7,6 +7,7 @@ import { OBJLoader } from 'three/examples/js/loaders/OBJLoader.js';
 import { MTLLoader } from 'three/examples/js/loaders/MTLLoader.js';
 import { OrbitControls } from 'three/examples/js/controls/OrbitControls.js';
 import minerModel from './assets/models/miner.glb';
+import antennaModel from './assets/models/wifi_antenna.glb';
 
 
 
@@ -703,12 +704,15 @@ function LoadObjectLocation(dataArray, count){
 	for(let i = 0; i < count ; i++){
 		console.log("item "+i+" = "+ dataArray[i]);
 		createObject(dataArray[i]); // sample-dataset
+    return;
 		// createObject(dataArray[i].position); // websocket
 	}
 }
 
 let mixer3 = null;
 let mesh3 = null;
+let mixer4 = null;
+let mesh4 = null;
 
 // create object with coordinates
 function createObject(itemArray){
@@ -716,33 +720,7 @@ function createObject(itemArray){
 	console.log("y axis: "+itemArray[1]);
 	console.log("z axis: "+itemArray[2]);
 
-  var glbLoaderMiner = new THREE.GLTFLoader();
-  glbLoaderMiner.load(minerModel, function (glb) {
-        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
-        camera.position.set(0, 0, 10); 
-        scene.add(camera);
-
-        mesh3 = glb.scene
-        let scale = 10
-        mesh3.scale.set(scale, scale, scale)
-        mesh3.position.set(itemArray[0], itemArray[1], itemArray[2]);
-        scene.add(mesh3)
-        mixer3 = new THREE.AnimationMixer(mesh3); 
-        const clock = new THREE.Clock();
-        
-        function animateMiner() 
-        { 
-          window.requestAnimationFrame(animateMiner); 
-          var clips = glb.animations; 
-          clips.forEach(function(clip){ 
-            var clipAction = mixer3.clipAction(clip); 
-            clipAction.setLoop(THREE.LoopRepeat); // 设置循环模式 
-            clipAction.clampWhenFinished = false; 
-            clipAction.play(); 
-            mixer3.update(clock.getDelta())
-          }); 
-        }
-        animateMiner(); })
+  
 
 	const geometryItem = new THREE.SphereGeometry(2, 64, 32);
 	const materialItem = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
@@ -752,7 +730,7 @@ function createObject(itemArray){
 	scene.add(cubeItem);
 	setTimeout(() => {
 		scene.remove(cubeItem); // Remove the object from the scene
-    scene.remove(mesh3); // Remove the object from the scene
+    //scene.remove(mesh3); // Remove the object from the scene
 	}, 10000);
 }
 
@@ -763,12 +741,20 @@ function animate() {
 	renderer.setClearColor(0x000000, 1);
 	// display camera position
 	// document.getElementById('cameraPosition').innerText = `Camera Position: ${camera.position.x.toFixed(2)}, ${camera.position.y.toFixed(2)}, ${camera.position.z.toFixed(2)}`;
-	renderer.render( scene, camera );
+	//renderer.render( scene, camera );
+  //requestAnimationFrame(animate);
+  renderer.render(scene, cameras[currentCamera]);
 }
 const renderer = new THREE.WebGLRenderer();
 var mapDiv = null;
 var controls = null;
 var objInited = false;
+// 初始设置为第一相机
+var currentCamera = 0;
+
+// 创建四个标志点，并且设置位置
+var markers = [];
+var cameras = [];
 
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
@@ -788,18 +774,79 @@ camera.position.y = 130;
 
 renderer.setSize( window.innerWidth, window.innerHeight );
 //document.body.appendChild( renderer.domElement );
-//document.body.appendChild( renderer.domElement );
+document.body.appendChild( renderer.domElement );
 
 mapDiv = document.getElementById("mapMine");
 mapDiv.innerHTML = ""; // 清空之前的内容
 
 // 添加新内容
-mapDiv.appendChild(renderer.domElement);
+//mapDiv.appendChild(renderer.domElement);
+
+
 if(objInited)
 {
   return;
 }
 objInited = true;
+
+var geometry = new THREE.SphereGeometry(1, 32, 32);
+var material = new THREE.MeshBasicMaterial({color: 0xffff00}); // Yellow color for the sphere
+var sphere = new THREE.Mesh(geometry, material);
+
+sphere.position.set(10, 10, 10); // Set the position for the sphere
+
+scene.add(sphere);
+
+// Add identifier to the sphere
+sphere.name = "1";
+
+var geometry2 = new THREE.SphereGeometry(1, 32, 32);
+var material2 = new THREE.MeshBasicMaterial({color: 0xffff00}); // Yellow color for the sphere
+var sphere2 = new THREE.Mesh(geometry2, material2);
+
+sphere2.position.set(0, 10, 240); // Set the position for the sphere
+
+scene.add(sphere2);
+
+// Add identifier to the sphere
+sphere2.name = "2";
+
+
+
+// Add raycaster
+var raycaster = new THREE.Raycaster();
+var mouse = new THREE.Vector2();
+
+// Function to be called when mouse is clicked
+function onMouseClick(event) {
+    
+    // Normalized device coordinates
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+    raycaster.setFromCamera(mouse, camera);
+
+    // Calculate objects intersecting the picking ray
+    var intersects = raycaster.intersectObjects(scene.children);
+
+    console.log('intersects',intersects);
+    
+    for (var i = 0; i < intersects.length; i++) {
+        // Check the identifier
+        if (intersects[i].object.name === "1") {
+            camera.position.set(intersects[i].point.x, intersects[i].point.y, intersects[i].point.z); // Move the camera to the position
+            camera.lookAt(intersects[i].object.position); // Face the camera to the object
+        }
+        if (intersects[i].object.name === "2") {
+          camera.position.set(0, 10, 240); // Move the camera to the position
+          camera.lookAt(intersects[i].object.position); // Face the camera to the object
+      }
+    }
+}
+
+// Listen for mouse click event
+window.addEventListener('click', onMouseClick, false);
+
 //document.getElementById('mapMine').appendChild(renderer.domElement);
 // set ambient light: roof, window, floor color
 //const hlight = new THREE.AmbientLight(0xFFFFFF,1);
@@ -809,6 +856,91 @@ objInited = true;
 // set orbit control
 controls = new THREE.OrbitControls(camera,renderer.domElement);
 
+
+cameras.push(camera);
+cameras.push(new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000));
+cameras.push(new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000));
+cameras.push(new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000));
+cameras.push(new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000));
+
+// 设置每个相机的位置
+for(var i=0; i<cameras.length; i++) {
+  //cameras[i].position.z = 3*(i+1);
+  cameras[i].position.set(0, 0, 100);
+}
+
+
+
+
+// 检测键盘按下1、2、3或4切换相机
+//window.addEventListener('keydown', function(event) {
+//  switch (event.key) {
+//    case '1':
+//      currentCamera = 0;
+//      break;
+//    case '2':
+//currentCamera = 1;
+//      break;
+//    case '3':
+//currentCamera = 2;
+//      break;
+//    case '4':
+// currentCamera = 3;
+//      break;
+//      case '5':
+// currentCamera = 4;
+//      break;
+//    default:
+//      break;
+//  }
+//});
+
+
+
+
+//for(var i=0; i<4; i++){
+//    var markerGeometry = new THREE.SphereGeometry(0.1, 32, 32);
+//    var markerMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
+//    var marker = new THREE.Mesh(markerGeometry, markerMaterial);
+//    marker.position.set(-3 + (2 * i), 1, 0);
+//    scene.add(marker);
+//    markers.push(marker);
+//    //var geometry = new THREE.BoxGeometry(1, 1, 1);
+//    //var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+//    //var cube = new THREE.Mesh(geometry, material);
+//    //cube.position.set(-3 + (2 * i), 1, 0);
+//    //markers.push(cube);
+//    //scene.add(cube);
+//}
+//var mouse = new THREE.Vector2();
+//var raycaster = new THREE.Raycaster();
+//
+//window.addEventListener('click', onDocumentMouseDown, false);
+//
+//function onDocumentMouseDown(event) {
+//    event.preventDefault();
+//   
+//    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+//    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+//    
+//    raycaster.setFromCamera( mouse, cameras[currentCamera] );
+//	
+//    var intersects = raycaster.intersectObjects( markers );
+//    
+//    if ( intersects.length > 0 ) {
+//        console.log('Intersection:', intersects[0]);
+//    }
+//}
+
+//window.requestAnimationFrame(checkIntersect);
+
+//function animate() {
+//    requestAnimationFrame(animate);
+//    renderer.render(scene, cameras[currentCamera]);
+//}
+//animate();
+
+
 var fileNo = 0;
 // // load ply
 // const loader = new PLYLoader();
@@ -892,7 +1024,7 @@ mtlLoader.load('bansei_1_392k_20200425.mtl', function (materials) {
     //obj.scale.set(4,4,4);
     
     
-    obj.scale.set(12,12,12);
+    obj.scale.set(20,20,20);
     obj.rotation.set(-Math.PI / 2, 0, 0);
       scene.add(obj);
     
@@ -910,6 +1042,81 @@ mtlLoader.load('bansei_1_392k_20200425.mtl', function (materials) {
     //  fileNo += 1;
     //  if (fileNo == 1806) clearInterval(interval);
     //}, 100);
+
+    var glbLoaderAntenna = new THREE.GLTFLoader();
+  glbLoaderAntenna.load(antennaModel, function (glb) {
+        mesh4 = glb.scene
+        let scale = 1
+        mesh4.scale.set(scale, scale, scale)
+        mesh4.position.set(0, 5, 10);
+        scene.add(mesh4)
+        mixer4 = new THREE.AnimationMixer(mesh3); 
+        const clock = new THREE.Clock();
+
+        // create an ambient light
+var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+scene.add(ambientLight);
+
+// create a point light
+var pointLight = new THREE.PointLight(0xffffff, 1);
+pointLight.position.set(5, 5, 5);
+scene.add(pointLight);
+        
+        function animateAntenna() 
+        { 
+          window.requestAnimationFrame(animateAntenna); 
+          var clips = glb.animations; 
+          clips.forEach(function(clip){ 
+            var clipAction = mixer4.clipAction(clip); 
+            clipAction.setLoop(THREE.LoopRepeat); // 设置循环模式 
+            clipAction.clampWhenFinished = false; 
+            clipAction.play(); 
+            mixer4.update(clock.getDelta())
+          }); 
+        }
+        animateAntenna(); })
+
+    var glbLoaderMiner = new THREE.GLTFLoader();
+  glbLoaderMiner.load(minerModel, function (glb) {
+        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
+        camera.position.set(0, 0, 10); 
+        scene.add(camera);
+
+        
+        
+
+        mesh3 = glb.scene
+        let scale = 3
+        mesh3.scale.set(scale, scale, scale)
+        mesh3.position.set(0, 5, 0);
+        scene.add(mesh3)
+        mixer3 = new THREE.AnimationMixer(mesh3); 
+        const clock = new THREE.Clock();
+
+        // create an ambient light
+var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+scene.add(ambientLight);
+
+// create a point light
+var pointLight = new THREE.PointLight(0xffffff, 1);
+pointLight.position.set(5, 5, 5);
+scene.add(pointLight);
+        
+        function animateMiner() 
+        { 
+          window.requestAnimationFrame(animateMiner); 
+          var clips = glb.animations; 
+          clips.forEach(function(clip){ 
+            var clipAction = mixer3.clipAction(clip); 
+            clipAction.setLoop(THREE.LoopRepeat); // 设置循环模式 
+            clipAction.clampWhenFinished = false; 
+            clipAction.play(); 
+            mixer3.update(clock.getDelta())
+          }); 
+        }
+        animateMiner(); })
+
+        if(false)
     var interval = setInterval(function() {
       var formattedNumber = String(fileNo).padStart(6, '0');
       // call loadCoordinate function with parameters