Merge pull request #10 from Perkovec/dev

Dev

.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

@@ -2,6 +2,7 @@ export class App {
   constructor(THREE, plugins) {
     this.THREE = THREE;
     this.objects = [];
+    this.sceneObjects = [];
     this.isShiftDown = false;
     this.editorContainer = document.getElementById('editor');
 
@@ -24,30 +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);
     });
   }
 
@@ -62,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);
@@ -88,73 +77,10 @@ export class App {
     this.camera.aspect = this.editorContainer.clientWidth / this.editorContainer.clientHeight;
 		this.camera.updateProjectionMatrix();
 
-		this.renderer.setSize(this.editorContainer.clientWidth, this.editorContainer.clientHeight);
-  }
-
-  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);
-    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.renderer.setSize(this.editorContainer.clientWidth, this.editorContainer.clientHeight);
     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);
-    if (intersects.length > 0) {
-      const intersect = intersects[0];
-
-      // delete cube
-      if (this.isShiftDown) {
-        if (intersect.object !== this.plane) {
-          this.scene.remove(intersect.object);
-          this.objects.splice(this.objects.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.objects.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);
   }