-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8 from Perkovec/file-manager
Added loading screen and file manager
- Loading branch information
Showing
10 changed files
with
250 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,58 @@ | ||
| import 'purecss/build/pure-min.css'; | ||
| import './index.css'; | ||
|
|
||
| Promise.all([ | ||
| const loader = document.getElementById('loader'); | ||
| const loaderContainer = document.getElementById('loader-container'); | ||
| const loaderProgress = document.getElementById('loader-progress'); | ||
|
|
||
| const progressPromise = (promises, tickCallback) => { | ||
| const len = promises.length; | ||
| let progress = 0; | ||
|
|
||
| const tick = (promise) => { | ||
| promise.then(() => { | ||
| progress++; | ||
| tickCallback(progress, len); | ||
| }); | ||
| return promise; | ||
| } | ||
|
|
||
| return Promise.all(promises.map(tick)); | ||
| } | ||
|
|
||
| const assets = [ | ||
| import('./three.js'), | ||
| import('./app.js'), | ||
|
|
||
| // PLUGINS | ||
| import('./plugins/file-manager/file-manager.js'), | ||
| import('./plugins/color-picker.js'), | ||
| import('./plugins/camera-control.js'), | ||
| ]).then(([ | ||
| { THREE }, | ||
| { App }, | ||
| ]; | ||
|
|
||
| // PLUGINS | ||
| { ColorPicker }, | ||
| { CameraControl }, | ||
| ]) => { | ||
| const plugins = [ | ||
| ColorPicker, | ||
| CameraControl, | ||
| ]; | ||
|
|
||
| const app = new App(THREE, plugins); | ||
| // app.init(); | ||
| app.render(); | ||
| // app.animate(); | ||
| }); | ||
|
|
||
| // window.addEventListener( 'resize', onWindowResize, false ); | ||
| // | ||
| // function onWindowResize(){ | ||
| // | ||
| // camera.aspect = window.innerWidth / window.innerHeight; | ||
| // camera.updateProjectionMatrix(); | ||
| // | ||
| // renderer.setSize( window.innerWidth, window.innerHeight ); | ||
| // | ||
| // } | ||
| const update = (completed, total) => { | ||
| const progressWidth = loaderContainer.clientWidth / total * completed; | ||
| loaderProgress.style.width = `${progressWidth}px`; | ||
| } | ||
|
|
||
| progressPromise(assets, update) | ||
| .then(([ | ||
| { THREE }, | ||
| { App }, | ||
|
|
||
| // PLUGINS | ||
| { FileManager }, | ||
| { ColorPicker }, | ||
| { CameraControl }, | ||
| ]) => { | ||
| const plugins = [ | ||
| FileManager, | ||
| ColorPicker, | ||
| CameraControl, | ||
| ]; | ||
|
|
||
| const app = new App(THREE, plugins); | ||
| app.render(); | ||
|
|
||
| loader.style.display = 'none'; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export const exporter = (voxels) => { | ||
| const data = { | ||
| version: '1', | ||
| voxels: [], | ||
| } | ||
|
|
||
| let minorVoxel; | ||
| voxels.forEach(voxel => { | ||
| minorVoxel = { | ||
| position: voxel.position.toArray(), | ||
| material: { | ||
| color: voxel.material.color.toArray(), | ||
| } | ||
| }; | ||
| data.voxels.push(minorVoxel); | ||
| }); | ||
|
|
||
| return data; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { exporter } from './exporter'; | ||
| import { loader } from './loader'; | ||
|
|
||
| export class FileManager { | ||
| constructor(configs) { | ||
| this.configs = configs; | ||
|
|
||
| const menuItems = document.querySelectorAll('.plugin-file-manager'); | ||
| menuItems.forEach(item => { | ||
| item.addEventListener('click', (event) => this.dispatchEvent(event, item.dataset.event)); | ||
| }) | ||
|
|
||
| this.fakeLink = document.createElement('a'); | ||
| this.fakeLink.style.display = 'none'; | ||
| document.body.appendChild(this.fakeLink); | ||
|
|
||
| this.fakeInput = document.createElement('input'); | ||
| this.fakeInput.type = 'file'; | ||
| this.fakeInput.accept = '.vxl'; | ||
| this.fakeInput.style.display = 'none'; | ||
| document.body.appendChild(this.fakeInput); | ||
|
|
||
| this.fakeInput.addEventListener('change', (event) => this.fileSelected(event)); | ||
| } | ||
|
|
||
| dispatchEvent(event, eventName) { | ||
| switch(eventName) { | ||
| case 'new': | ||
| this.handleNew(); | ||
| break; | ||
| case 'save': | ||
| this.handleSave(); | ||
| break; | ||
| case 'open': | ||
| this.handleOpen(); | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| clearScene() { | ||
| const scene = this.configs.scene; | ||
| const sceneObjects = this.configs.sceneObjects; | ||
|
|
||
| scene.remove(...sceneObjects); | ||
| sceneObjects.splice(0, sceneObjects.length); | ||
| } | ||
|
|
||
| handleNew() { | ||
| if (confirm('Are you sure you want to create a new file?')) { | ||
| this.clearScene(); | ||
| this.configs.render(); | ||
| } | ||
| } | ||
|
|
||
| handleSave() { | ||
| const data = exporter(this.configs.sceneObjects); | ||
|
|
||
| const output = JSON.stringify(data, null, 2); | ||
| this.fakeLink.href = URL.createObjectURL(new Blob([output], { type: 'text/plain' })); | ||
| this.fakeLink.download = 'scene.vxl'; | ||
| this.fakeLink.click(); | ||
| } | ||
|
|
||
| handleOpen() { | ||
| this.fakeInput.click(); | ||
| } | ||
|
|
||
| fileSelected(event) { | ||
| const files = event.target.files; | ||
| const THREE = this.configs.THREE; | ||
| const scene = this.configs.scene; | ||
| const sceneObjects = this.configs.sceneObjects; | ||
|
|
||
| if (files && files.length) { | ||
| const reader = new FileReader(); | ||
| reader.readAsText(files[0]); | ||
|
|
||
| reader.onload = () => { | ||
| this.clearScene(); | ||
|
|
||
| const data = loader(THREE, reader.result); | ||
| data.forEach(voxel => { | ||
| scene.add(voxel); | ||
| sceneObjects.push(voxel); | ||
| }) | ||
|
|
||
| this.configs.render(); | ||
| }; | ||
| } | ||
|
|
||
| event.target.value = null; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| export const loader = (THREE, plainText) => { | ||
| const voxels = []; | ||
|
|
||
| const parsedData = JSON.parse(plainText); | ||
| parsedData.voxels.forEach(voxel => { | ||
| const mesh = new THREE.Mesh( | ||
| new THREE.BoxBufferGeometry(50, 50, 50), | ||
| new THREE.MeshLambertMaterial({ color: new THREE.Color(...voxel.material.color) }), | ||
| ); | ||
| mesh.position.fromArray(voxel.position); | ||
|
|
||
| voxels.push(mesh); | ||
| }); | ||
|
|
||
| return voxels; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| <div class="ui-loader"> | ||
| <div class="ui-loader" id="loader"> | ||
| <h2>Loading...</h2> | ||
| <div class="loader-container" id="loader-container"> | ||
| <div class="loader-progress" id="loader-progress"></div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.