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);
  }