Version v0.0.3

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

CHANGELOG.md

@@ -1,11 +1,19 @@
 # Changelog
 
+## [0.0.3] - 2020-02-08
+### Added
+- Added tools panel
+- Added save/open functionality
+### Changed
+- Changed plugin system
+
 ## [0.0.2] - 2020-02-02
 ### Added
 - Added orbit camera control
 
 ## [0.0.1] - 2020-02-01
 ### Initial release
 
+[0.0.3]: https://github.com/Perkovec/Vuxel/compare/v0.0.2...v0.0.3
 [0.0.2]: https://github.com/Perkovec/Vuxel/compare/v0.0.1...v0.0.2
 [0.0.1]: https://github.com/Perkovec/Vuxel/releases/tag/v0.0.1

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/Perkovec/Vuxel.svg?branch=master)](https://travis-ci.org/Perkovec/Vuxel) [![Greenkeeper badge](https://badges.greenkeeper.io/Perkovec/Vuxel.svg)](https://greenkeeper.io/)
 
-Version 0.0.2
+Version 0.0.3
 
 By Ilya Karpuk perkovec24@gmail.com
 
@@ -37,7 +37,7 @@ npm run build
 - [ ] Orientation indicator and controller
 - [ ] Painting tools
 - [ ] Advanced color picker
-- [ ] Export/import models
+- [x] Export/import models
 - [ ] Layers
 
 ## Licence

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuxel",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Open Source Voxel editor",
   "scripts": {
     "start": "parcel src/index.html",
@@ -10,10 +10,14 @@
   "author": "perkovec",
   "license": "MIT",
   "dependencies": {
+    "event-lite": "^0.1.2",
+    "micromodal": "^0.4.2",
     "purecss": "^1.0.1",
     "three": "^0.113.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
     "parcel": "^1.12.4",
     "posthtml-include": "^1.3.3"
   }

src/app.js

@@ -25,32 +25,30 @@ export class App {
 
     this.createLight();
     this.createGround();
-    this.createCubes();
 
     window.addEventListener('resize', () => this.onWindowResize(), false);
 
-    this.editorContainer.addEventListener('mousemove', event => this.onDocumentMouseMove(event), false);
-		this.editorContainer.addEventListener('mousedown', event => this.onDocumentMouseDown(event), false);
-		document.addEventListener('keydown', event => this.onDocumentKeyDown(event), false);
-    document.addEventListener('keyup', event => this.onDocumentKeyUp(event), false);
-
     this.renderer = new THREE.WebGLRenderer({ antialias: true });
 	  this.renderer.setSize(this.editorContainer.clientWidth, this.editorContainer.clientHeight);
     this.editorContainer.appendChild(this.renderer.domElement);
     this.rect = this.renderer.domElement.getBoundingClientRect();
+
+    this.pluginsInstances = {};
 
     const pluginsConfig = {
       THREE,
-      brushMaterial: this.cubeMaterial,
       renderer: this.renderer,
       camera: this.camera,
       render: this.render.bind(this),
       scene: this.scene,
       sceneObjects: this.sceneObjects,
+      objects: this.objects,
+      plugins: this.pluginsInstances,
+      rect: this.rect,
     }
 
     plugins.forEach(Plugin => {
-      new Plugin(pluginsConfig);
+      this.pluginsInstances[Plugin.meta.name] = new Plugin(pluginsConfig);
     });
   }
 
@@ -65,18 +63,6 @@ export class App {
 		this.scene.add(directionalLight);
   }
 
-  createCubes() {
-    const THREE = this.THREE;
-
-    const rollOverGeo = new THREE.BoxBufferGeometry(50, 50, 50);
-		const	rollOverMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true });
-		this.rollOverMesh = new THREE.Mesh(rollOverGeo, rollOverMaterial);
-		this.scene.add(this.rollOverMesh);
-
-		this.cubeGeo = new THREE.BoxBufferGeometry(50, 50, 50);
-		this.cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
-  }
-
   createGround() {
     const THREE = this.THREE;
     const geometry = new THREE.PlaneBufferGeometry(1000, 1000);
@@ -95,70 +81,6 @@ export class App {
     this.render();
   }
 
-  onDocumentMouseMove(event) {
-    event.preventDefault();
-
-    this.mouse.set(
-      ((event.clientX - this.rect.left) / this.editorContainer.clientWidth) * 2 - 1,
-      -((event.clientY - this.rect.top) / this.editorContainer.clientHeight) * 2 + 1
-    );
-    this.raycaster.setFromCamera(this.mouse, this.camera);
-
-    const intersects = this.raycaster.intersectObjects([...this.objects, ...this.sceneObjects]);
-    if (intersects.length > 0) {
-      const intersect = intersects[0];
-      this.rollOverMesh.position.copy(intersect.point).add(intersect.face.normal);
-      this.rollOverMesh.position.divideScalar(50).floor().multiplyScalar(50).addScalar(25);
-    }
-
-    this.render();
-  }
-
-  onDocumentMouseDown(event) {
-    event.preventDefault();
-    const THREE = this.THREE;
-
-    this.mouse.set(
-      ((event.clientX - this.rect.left) / this.editorContainer.clientWidth) * 2 - 1,
-      -((event.clientY - this.rect.top) / this.editorContainer.clientHeight) * 2 + 1
-    );
-    this.raycaster.setFromCamera(this.mouse, this.camera);
-
-    const intersects = this.raycaster.intersectObjects([...this.objects, ...this.sceneObjects]);
-    if (intersects.length > 0) {
-      const intersect = intersects[0];
-
-      // delete cube
-      if (this.isShiftDown) {
-        if (intersect.object !== this.plane) {
-          this.scene.remove(intersect.object);
-          this.sceneObjects.splice(this.sceneObjects.indexOf(intersect.object), 1);
-        }
-      } else {
-        // create cube
-        const voxel = new THREE.Mesh(this.cubeGeo, this.cubeMaterial.clone());
-        voxel.position.copy(intersect.point).add(intersect.face.normal);
-        voxel.position.divideScalar(50).floor().multiplyScalar(50).addScalar(25);
-        this.scene.add(voxel);
-
-        this.sceneObjects.push(voxel);
-      }
-      this.render();
-    }
-  }
-
-  onDocumentKeyDown(event) {
-    switch (event.keyCode) {
-      case 16: this.isShiftDown = true; break;
-    }
-  }
-
-  onDocumentKeyUp(event) {
-    switch (event.keyCode) {
-      case 16: this.isShiftDown = false; break;
-    }
-  }
-
   render() {
     this.renderer.render(this.scene, this.camera);
   }

src/index.html

@@ -13,6 +13,10 @@
         <div id="editor"></div>
       </div>
     </div>
+
+    <!-- MODALS -->
+    <include src="ui-parts/modals/about-modal.html"></include>
+
     <script src="index.js"></script>
   </body>
 </html>

src/index.js

@@ -1,5 +1,6 @@
 import 'purecss/build/pure-min.css';
-import './index.css';
+import './styles/flaticon.css';
+import './styles/index.css';
 
 const loader = document.getElementById('loader');
 const loaderContainer = document.getElementById('loader-container');
@@ -21,11 +22,16 @@ const progressPromise = (promises, tickCallback) => {
 }
 
 const assets = [
+	// CORE
 	import('./three.js'),
 	import('./app.js'),
 
+	// LIBS
+	import('micromodal/dist/micromodal.min.js'),
+
 	// PLUGINS
 	import('./plugins/file-manager/file-manager.js'),
+	import('./plugins/tools/index.js'),
 	import('./plugins/color-picker.js'),
 	import('./plugins/camera-control.js'),
 ];
@@ -37,16 +43,24 @@ const update = (completed, total) => {
 
 progressPromise(assets, update)
 	.then(([
+		// CORE
 		{ THREE },
 		{ App },
 
+		// LIBS
+		MicroModal,
+
 		// PLUGINS
 		{ FileManager },
+		{ Tools },
 		{ ColorPicker },
 		{ CameraControl },
 	]) => {
+		MicroModal.init();
+
 		const plugins = [
 			FileManager,
+			Tools,
 			ColorPicker,
 			CameraControl,
 		];

src/plugins/camera-control.js

@@ -1,6 +1,10 @@
 /* BASED ON https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js */
 
 export class CameraControl {
+	static meta = {
+    name: 'camera-control',
+	};
+
   constructor(configs) {
     const THREE = this.THREE = configs.THREE;
 
@@ -511,4 +515,4 @@ export class CameraControl {
 			this._panOffset.add( v );
 		};
 	}
-}
+}