Add LiDAR's name on the scene

Author: Léna Voinchet

js/scene/SceneManager.js

@@ -135,7 +135,7 @@ class SceneManager{
         this.initScene = function(floor, wallX, wallY)
         {
             // Lighting
-            const ambient = new AmbientLight( 0xffffff, 1);
+            const ambient = new AmbientLight( 0xffffff, 1.8);
             this.scene.add(ambient);
 
             // Floor
@@ -265,7 +265,7 @@ class SceneManager{
 
         function buildGridHelper()
         {
-            const gridHelper = new GridHelper( 2000, 2000, 0x444444, 0x444444 );
+            const gridHelper = new GridHelper( 2000, 2000, 0x555555, 0x555555 );
             gridHelper.position.y = -0.001
 
             return gridHelper;

js/scene/objects/sensors/Lidar.js

@@ -5,12 +5,15 @@ import {
     MeshPhongMaterial,
     MeshBasicMaterial,
     Mesh,
+    Vector3,
     LineSegments,
     Color,
     Group
 } from 'three';
 
-import { getLidarsTypes, units } from '/js/data.js'
+import { TextGeometry } from 'three-text-geometry';
+import { getLidarsTypes, units } from '/js/data.js';
+import { SceneObjects } from '../SceneObjects.js';
 
 
 class Lidar{
@@ -19,6 +22,7 @@ class Lidar{
     static DEFAULT_LIDAR_SIZE = 0.1;
     static DEFAULT_MIN_ANGLE_TO_AVOID_OBSTRUCTION = Math.PI/180 * 60;
     static DEFAULT_RATIO_FAR_MINDIST = 2;
+    static SIZE_TEXT_LIDAR = 0.6;
 
     constructor(id, lidarTypeID = Lidar.DEFAULT_LIDAR_TYPE_ID, p_x = 0, p_z = Lidar.DEFAULT_LIDAR_HOOK_HEIGHT, r_y = 0)
     {
@@ -37,6 +41,8 @@ class Lidar{
         this.mesh = buildMesh(this.color, this.xPos, Lidar.DEFAULT_LIDAR_SIZE, this.zPos);
         this.rays = new Group();
 
+        this.nameText = buildTextMesh("LiDAR " + (this.id+1), Lidar.SIZE_TEXT_LIDAR, this.xPos - Lidar.SIZE_TEXT_LIDAR * 2, this.yPos + Lidar.SIZE_TEXT_LIDAR/2.0, this.zPos)
+
         this.raysAppear = true;
 
     /* BUILDERS */
@@ -53,6 +59,15 @@ class Lidar{
             return mesh;
         }
 
+        function buildTextMesh(text, size, initialXPos, initialYPos, initialZPos)
+        {
+            const textGeometry = new TextGeometry(text, { font: SceneObjects.font, size: size, height: 0.01 } );
+            const textMesh = new Mesh(textGeometry, new MeshPhongMaterial( { color: 0xffffff } ))
+            textMesh.position.set(initialXPos, initialZPos, initialYPos);
+
+            return textMesh;
+        }
+
         this.buildRays = function()
         {
             const material = new MeshBasicMaterial( {color: this.color, transparent: true, opacity: 0.4, alphaTest: 0.3 } );
@@ -89,12 +104,14 @@ class Lidar{
         {
             scene.add(this.mesh);
             scene.add(this.rays);
+            scene.add(this.nameText);
         }
 
         this.removeFromScene = function(scene)
         {
             scene.remove(this.mesh);
             scene.remove(this.rays);
+            scene.remove(this.nameText);
         }
 
     /* USER'S ACTION */
@@ -103,6 +120,7 @@ class Lidar{
             const value = display;
             this.raysAppear = value;
             this.rays.visible = value;
+            this.nameText.visible = value;
 
             if(this.uiElement) this.uiElement.changeVisibility(value);
         }
@@ -113,7 +131,14 @@ class Lidar{
             this.zPos = this.mesh.position.y;
             this.rays.position.set(this.xPos, this.zPos, this.yPos);
 
-            if(this.uiElement) this.uiElement.updatePosition(this.xPos, this.zPos, currentUnitValue)
+            if(this.uiElement) this.uiElement.updatePosition(this.xPos, this.zPos, currentUnitValue);
+
+            if (this.nameText) {
+                const offset = new Vector3(-1.5, -1.8, 0.1); // Change the offset's value to change the text's position
+                const basePosition = new Vector3(this.xPos, this.zPos, this.yPos);
+                this.nameText.position.copy(basePosition.add(offset));
+            }
+            
         }
 
         this.update = function()

js/scene/objects/sensors/Node.js

@@ -47,7 +47,7 @@ class Node{
         this.areaAppear = true;
         this.areaValue = 0;
 
-        this.nameText = buildTextMesh("Node " + (this.id+1), Node.SIZE_TEXT_NODE, this.xPos - Node.SIZE_TEXT_NODE * 2, this.yPos + Node.SIZE_TEXT_NODE/2.0, this.zPos - (this.cameraType.rangeFar - 1))
+        this.nameText = buildTextMesh("Cam " + (this.id+1), Node.SIZE_TEXT_NODE, this.xPos - Node.SIZE_TEXT_NODE * 2, this.yPos + Node.SIZE_TEXT_NODE/2.0, this.zPos - (this.cameraType.rangeFar - 1))
         this.areaValueText = buildTextMesh("AREA VALUE", Node.SIZE_TEXT_NODE * 2/3.0, this.xPos - Node.SIZE_TEXT_NODE * 4/3.0, this.yPos + 3*Node.SIZE_TEXT_NODE/2.0, this.zPos - (this.cameraType.rangeFar - 1));
 
     /* BUILDERS */