add selected / unselected visual states

src/mesh/api.js

@@ -22,24 +22,41 @@ let groups = [];
 let selected = [];
 
 let selection = {
+    // @returns {MeshObject[]}
     list() {
         return selected.slice()
     },
 
+    // @param group {MeshObject[]}
     set(objects) {
         selected = objects;
+        this.update();
     },
 
+    // @param group {MeshObject}
     add(object) {
         selected.addOnce(object);
+        this.update();
     },
 
+    // @param group {MeshObject}
     remove(object) {
         selected.remove(object);
+        this.update();
     },
 
     clear() {
         selected = [];
+        this.update();
+    },
+
+    update() {
+        for (let group of groups) {
+            group.material(mesh.material.unselected);
+        }
+        for (let object of selected) {
+            object.material(mesh.material.selected);
+        }
     },
 
     move(dx = 0, dy = 0, dz = 0) {
@@ -129,7 +146,7 @@ let api = mesh.api = {
     // @param object {THREE.Object3D | THREE.Object3D[]}
     focus: (object) => {
         let { center } = util.bounds(object);
-        // when no objects supplied
+        // when no valid objects supplied
         if (isNaN(center.x * center.y * center.z)) {
             return;
         }
@@ -157,7 +174,7 @@ let api = mesh.api = {
 
 let util = mesh.util = {
 
-    // @param object {THREE.Object3D | THREE.Object3D[]}
+    // @param object {THREE.Object3D | THREE.Object3D[] | MeshObject | MeshObject[]}
     // @returns bounds modified for moto.Space
     bounds: (object) => {
         let box = new THREE.Box3();

src/mesh/group.js

@@ -74,6 +74,12 @@ mesh.group = class MeshGroup extends mesh.object {
             model.wireframe(...arguments);
         }
     }
+
+    material() {
+        for (let model of this.models) {
+            model.material(...arguments);
+        }
+    }
 };
 
 })();

src/mesh/model.js

@@ -16,13 +16,20 @@ let mesh = self.mesh = self.mesh || {};
 if (mesh.model) return;
 
 /** default materials **/
-mesh.material = {
+let materials = mesh.material = {
-    solid: new THREE.MeshPhongMaterial({
+    unselected: new THREE.MeshPhongMaterial({
         transparent: true,
         shininess: 100,
         specular: 0x181818,
         color: 0xffff00,
         opacity: 1
+    }),
+    selected: new THREE.MeshPhongMaterial({
+        transparent: true,
+        shininess: 100,
+        specular: 0x181818,
+        color: 0x00ff00,
+        opacity: 1
     })
 };
 
@@ -50,7 +57,7 @@ mesh.model = class MeshModel extends mesh.object {
         if (indices) geo.setIndex(new THREE.BufferAttribute(indices, 1));
         geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
         geo.setAttribute('normal', undefined);
-        let meh = new THREE.Mesh(geo, mesh.material.solid);
+        let meh = new THREE.Mesh(geo, materials.unselected);
         geo.computeFaceNormals();
         geo.computeVertexNormals();
         meh.material.side = THREE.DoubleSide;
@@ -114,6 +121,10 @@ mesh.model = class MeshModel extends mesh.object {
         moto.Space.update();
     }
 
+    material(mat) {
+        this.mesh.material = mat;
+    }
+
     remove() {
         mesh.api.model.remove(this);
     }