实时轨迹接入、网格鼠标选中

src/units/threejs/threeCubeDetail.js

@@ -8,7 +8,7 @@ export const ThreeCubeDetailClass = {
         this.mesh = null;
         this.edgesReferences  = [];
         this._camera = null;
-
+        this.lastSelectedIndex = null;
         this.selectedIndex = null;
         this.raycaster = new THREE.Raycaster(); // 射线投射器
         this.mouse = new THREE.Vector2(); // 鼠标位置
@@ -185,7 +185,9 @@ export const ThreeCubeDetailClass = {
         //this.visualizeRay()
         // 检测射线与网格的相交
         const intersects = this.raycaster.intersectObject(this.mesh);
-
+        if (this.lastSelectedIndex !== null && this.lastSelectedIndex !== undefined) {
+            this.unHighlightCube(this.lastSelectedIndex);
+        }
         if (intersects.length > 0) {
             const instanceIndex = intersects[0].instanceId;
             const selectedCube = this.points[instanceIndex];
@@ -232,7 +234,18 @@ export const ThreeCubeDetailClass = {
 
     highlightCube(instanceIndex) {
         const color = new THREE.Color(0xffff); // 红色高亮
+        this.setCubeStatus(instanceIndex,color);
+        this.lastSelectedIndex = instanceIndex;
+    },
+    unHighlightCube(instanceIndex){
+        const color = new THREE.Color(); // 红色高亮
+        color.r = this.points[instanceIndex].color[0];
+        color.g = this.points[instanceIndex].color[1];
+        color.b = this.points[instanceIndex].color[2];
+        this.setCubeStatus(instanceIndex,color);
+    },
 
+    setCubeStatus(instanceIndex,color){
         const instanceColors = this.mesh.geometry.attributes.instanceColor.array;
         instanceColors[instanceIndex * 3] = color.r;
         instanceColors[instanceIndex * 3 + 1] = color.g;
@@ -248,6 +261,7 @@ export const ThreeCubeDetailClass = {
         }
     },
 
+
     render() {
         let cam = this.camera;
         this._camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);