Add function to duplicate objects

src/client/containers/EditorContainer.js

@@ -87,6 +87,7 @@ class EditorContainer extends Component {
         rotateTool: "e",
         scaleTool: "r",
         delete: "del",
+        duplicate: ["ctrl+d", "command+d"],
         save: ["ctrl+s", "command+s"],
         saveAs: ["ctrl+shift+s", "command+shift+s"],
         undo: ["ctrl+z", "command+z"],

src/client/containers/HierarchyPanelContainer.js

@@ -42,7 +42,8 @@ class HierarchyPanelContainer extends Component {
     this.state = {
       tree: createNodeHierarchy(props.editor.scene),
       hierarchyHotKeyHandlers: {
-        delete: this.onDeleteSelected
+        delete: this.onDeleteSelected,
+        duplicate: this.onDuplicateSelected
       }
     };
 
@@ -102,6 +103,15 @@ class HierarchyPanelContainer extends Component {
     this.props.editor.execute(new AddObjectCommand(object, node.object));
   };
 
+  onDuplicateSelected = () => {
+    this.props.editor.duplicateSelectedObject();
+    return false;
+  };
+
+  onDuplicateNode = (e, node) => {
+    this.props.editor.duplicateObject(node.object);
+  };
+
   onDeleteSelected = () => {
     this.props.editor.deleteSelectedObject();
   };
@@ -150,6 +160,7 @@ class HierarchyPanelContainer extends Component {
         />
         <ContextMenu id="hierarchy-node-menu">
           <MenuItem onClick={this.onAddNode}>Add Node</MenuItem>
+          <MenuItem onClick={this.onDuplicateNode}>Duplicate</MenuItem>
           <MenuItem onClick={this.onDeleteNode}>Delete</MenuItem>
         </ContextMenu>
       </HotKeys>

src/client/containers/ViewportPanelContainer.js

@@ -20,7 +20,8 @@ class ViewportPanelContainer extends Component {
         translateTool: this.onTranslateTool,
         rotateTool: this.onRotateTool,
         scaleTool: this.onScaleTool,
-        delete: this.onDelete
+        delete: this.onDelete,
+        duplicate: this.onDuplicate
       }
     };
 
@@ -49,6 +50,11 @@ class ViewportPanelContainer extends Component {
     this.props.editor.signals.transformModeChanged.dispatch("scale");
   };
 
+  onDuplicate = () => {
+    this.props.editor.duplicateSelectedObject();
+    return false;
+  };
+
   onDelete = () => {
     this.props.editor.deleteSelectedObject();
   };

src/client/editor/Editor.js

@@ -5,6 +5,7 @@ import Storage from "./Storage";
 import Viewport from "./Viewport";
 import getFileNameFromURI from "../utlis/getFileNameFromURI";
 import RemoveObjectCommand from "./commands/RemoveObjectCommand";
+import AddObjectCommand from "./commands/AddObjectCommand";
 
 /**
  * @author mrdoob / http://mrdoob.com/
@@ -337,7 +338,7 @@ export default class Editor {
 
   addHelper = (function() {
     const geometry = new THREE.SphereBufferGeometry(2, 4, 2);
-    const material = new THREE.MeshBasicMaterial({ color: 0xff0000, visible: false });
+    const material = new THREE.MeshBasicMaterial({ color: 0xff0000, visible: true, wireframe: true });
 
     return function(object) {
       let helper;
@@ -478,6 +479,18 @@ export default class Editor {
     this.deleteObject(this.selected);
   }
 
+  duplicateObject(object) {
+    const clone = object.clone();
+    clone.traverse(child => {
+      Object.defineProperty(child.userData, "selectionRoot", { value: clone, enumerable: false });
+    });
+    this.execute(new AddObjectCommand(clone, object.parent));
+  }
+
+  duplicateSelectedObject() {
+    this.duplicateObject(this.selected);
+  }
+
   clear() {
     this.history.clear();
     this.storage.clear();