change select behavior. fix material double side. tweak platform color

src/main/mesh.js

@@ -28,12 +28,12 @@ function init() {
     platform.set({
         volume: false,
         round: false,
-        zOffset: 0.2,
-        opacity: 0.3,
-        color: 0xcccccc,
+        zOffset: 0.1,
+        opacity: 0.1,
+        color: 0xdddddd,
         zoom: { reverse: true, speed: 1 },
-        size: { width: 300, depth: 300, height: 2.5, maxz: 2.5 },
-        grid: { major: 25, minor: 5, majorColor: 0x999999, minorColor: 0xcccccc },
+        size: { width: 300, depth: 300, height: 1, maxz: 300 },
+        grid: { major: 25, minor: 5, majorColor: 0xcccccc, minorColor: 0xeeeeee },
     });
     space.view.setZoom(zoomrev, zoomspd);
 
@@ -72,7 +72,7 @@ function ui_build() {
                 // map groups to divs
                 .map(g => h.div([
                     h.button({
-                        _: g.id,
+                        _: `group (${g.id})`,
                         class: [
                             "group",
                             api.selection.contains(g) ? 'selected' : undefined
@@ -83,7 +83,7 @@ function ui_build() {
                     h.div({ class: "models"},
                         // map models to buttons
                         g.models.map(m => h.button({
-                            _: m.id,
+                            _: m.file || m.id,
                             class: api.selection.contains(m) ? [ 'selected' ] : [],
                             onclick() { api.selection.toggle(m); }
                         }))
@@ -225,7 +225,7 @@ function space_init(data) {
 
     // mouse hover/click handlers
     space.mouse.downSelect((int, event) => {
-        return api.objects();
+        return event && event.shiftKey ? api.objects() : undefined;
     });
 
     space.mouse.upSelect((int, event) => {
@@ -242,7 +242,7 @@ function space_init(data) {
                     group.qrotation(q);
                     group.floor();
                 } else {
-                    selection.toggle(shiftKey ? model.group : model);
+                    selection.toggle(shiftKey ? model : model.group);
                 }
             }
         } else {

src/mesh/api.js

@@ -25,7 +25,7 @@ let selected = [];
 let selection = {
     // @returns {MeshObject[]}
     list() {
-        return selected.slice();
+        return selected.length ? selected.slice() : groups.slice();
     },
 
     groups() {

src/mesh/model.js

@@ -22,6 +22,7 @@ let worker = moto.client.fn;
 /** default materials **/
 let materials = mesh.material = {
     unselected: new THREE.MeshPhongMaterial({
+        side: THREE.DoubleSide,
         transparent: true,
         shininess: 100,
         specular: 0x181818,
@@ -29,6 +30,7 @@ let materials = mesh.material = {
         opacity: 1
     }),
     selected: new THREE.MeshPhongMaterial({
+        side: THREE.DoubleSide,
         transparent: true,
         shininess: 100,
         specular: 0x181818,
@@ -79,7 +81,7 @@ mesh.model = class MeshModel extends mesh.object {
         geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
         let meh = new THREE.Mesh(geo, materials.unselected);
         geo.computeVertexNormals();
-        meh.material.side = THREE.DoubleSide;
+        // geo.computeFaceNormals();
         meh.receiveShadow = true;
         meh.castShadow = true;
         meh.renderOrder = 1;
@@ -100,6 +102,7 @@ mesh.model = class MeshModel extends mesh.object {
         }
         geo.attributes.position.needsUpdate = true;
         geo.computeVertexNormals();
+        // geo.computeFaceNormals();
         worker.model_load({id: this.id, name: this.name, vertices, indices});
     }
 

src/moto/space.js

@@ -748,7 +748,7 @@
             let selection = null,
                 trackTo = alignedTracking ? trackPlane : platform,
                 isVis = trackTo.visible;
-            if (mouseDownSelect) selection = mouseDownSelect();
+            if (mouseDownSelect) selection = mouseDownSelect(undefined, event);
             if (selection && selection.length > 0) {
                 trackTo.visible = true;
                 let int = intersect(selection.slice().append(trackTo), false);

web/mesh/index.css

@@ -156,15 +156,22 @@ body, div {
 #grouplist > div {
     border: 1px solid gray;
     border-radius: 3px;
+    margin: 0 0 2px 0;
+    padding: 3px;
+}
+
+#grouplist .group {
+    font-weight: bold;
     padding: 3px;
 }
 
 #grouplist .models button {
     margin-top: 1px;
+    text-align: left;
 }
 
 #grouplist .selected {
-    background-color: rgba(0,255,0,0.75)
+    background-color: rgba(0,255,0,0.5)
 }
 
 #grouplist .vsep {