add middle-mouse color select to 3D canvas

src/ui/ChunkLoader3D.js

@@ -9,6 +9,10 @@ import {
   receiveBigChunk,
   receiveBigChunkFailure,
 } from '../actions';
+import {
+  getChunkOfPixel,
+  getOffsetOfPixel,
+} from '../core/utils';
 
 import Chunk from './ChunkRGB3D';
 
@@ -38,6 +42,22 @@ class ChunkLoader {
     this.chunks = new Map();
   }
 
+  getVoxel(x: number, y: number, z: number) {
+    const state = this.store.getState();
+    const {
+      canvasSize,
+    } = state.canvas;
+    const [xc, zc] = getChunkOfPixel(canvasSize, x, y, z);
+    const offset = getOffsetOfPixel(canvasSize, x, y, z);
+    const key = `${xc}:${zc}`;
+    const chunk = this.chunks.get(key);
+    if (chunk) {
+      const clr = chunk.getVoxelByOffset(offset);
+      return clr;
+    }
+    return 0;
+  }
+
   getVoxelUpdate(
     xc: number,
     zc: number,

src/ui/ChunkRGB3D.js

@@ -107,6 +107,12 @@ class Chunk {
     return this.buffer[offset];
   }
 
+  getVoxelByOffset(offset: number) {
+    const { buffer } = this;
+    if (!buffer) return 0;
+    return buffer[offset];
+  }
+
   /*
   // Test Sin encironment creation for load tests
   async generateSin() {

src/ui/Renderer3D.js

@@ -19,6 +19,7 @@ import {
 import {
   setHover,
   tryPlacePixel,
+  selectColor,
 } from '../actions';
 
 
@@ -439,8 +440,29 @@ class Renderer {
             const cell = target.toArray();
             store.dispatch(tryPlacePixel(cell));
           }
-        }
           break;
+        }
+        case 1: {
+          // middle mouse button
+          const target = intersect.point.clone()
+            .add(intersect.face.normal.multiplyScalar(-0.5))
+            .floor()
+            .addScalar(0.5)
+            .floor();
+          if (target.y < 0) {
+            return;
+          }
+          if (target.clone().sub(camera.position).length() < 120) {
+            const cell = target.toArray();
+            if (this.chunkLoader) {
+              const clr = this.chunkLoader.getVoxel(...cell);
+              if (clr) {
+                store.dispatch(selectColor(clr));
+              }
+            }
+          }
+          break;
+        }
         case 2: {
           // right mouse button
           const target = intersect.point.clone()
@@ -455,8 +477,8 @@ class Renderer {
             const cell = target.toArray();
             store.dispatch(tryPlacePixel(cell, 0));
           }
-        }
           break;
+        }
         default:
           break;
       }