Add face culling toggle

Author: Pwootage

app/mainForm.js

@@ -47,6 +47,30 @@ function setupMenu() {
     {
       label: 'View',
       submenu: [
+        {
+          label: "Front faces",
+          type: 'radio',
+          click(item, focusedwindow) {
+            mapWindow.webContents.send('setCulling', 'back');
+          }
+        },
+        {
+          label: "Back faces",
+          type: 'radio',
+          click(item, focusedwindow) {
+            mapWindow.webContents.send('setCulling', 'front');
+          }
+        },
+        {
+          label: "All faces",
+          type: 'radio',
+          click(item, focusedwindow) {
+            mapWindow.webContents.send('setCulling', 'none');
+          }
+        },
+        {
+          type: 'separator'
+        } ,
         {
           label: 'Reload',
           accelerator: 'CmdOrCtrl+R',

web/js/map.js

@@ -166,6 +166,10 @@ $(() => {
   pointLight.shadowDarkness = 1;
   scene.add(pointLight);
 
+  const geometryMaterial = new THREE.MeshPhongMaterial({
+    vertexColors: THREE.FaceColors
+  });
+
   let worlds = {};
   let currentWorld = null;
 
@@ -210,6 +214,16 @@ $(() => {
       });
   });
 
+  electron.ipcRenderer.on('setCulling', (event, data) => {
+    if (data == 'front') {
+      geometryMaterial.side = THREE.BackSide;
+    } else if (data == 'back') {
+      geometryMaterial.side = THREE.FrontSide;
+    } else {
+      geometryMaterial.side = THREE.DoubleSide;
+    }
+  });
+
   electron.ipcRenderer.on('depRead', (event, data) => {
     let world = worlds[currentWorld];
     if (world) {
@@ -499,10 +513,7 @@ ${renderVec(player.transform.slice(8, 12))}
       //   vertexShader: vertShader,
       //   fragmentShader: fragShader,
       // });
-      const mat = new THREE.MeshPhongMaterial({
-        vertexColors: THREE.FaceColors
-      });
-      const mesh = new THREE.Mesh(geom, mat);
+      const mesh = new THREE.Mesh(geom, geometryMaterial);
       mesh.receiveShadow = true;
 
       const bbMat = new THREE.LineBasicMaterial({