From 9ed0e7a1f5b82e641e97e8bd1190817db89fe8c1 Mon Sep 17 00:00:00 2001 From: Idrian Date: Wed, 23 Aug 2017 12:46:43 +0200 Subject: [PATCH] #9 #7 #10 #19 Just everything --- build/ArrayToMesh.ts | 2 +- build/ObjToArray.ts | 6 +- build/main.ts | 38 ++- build/voxc.js | 31 ++- css/style.css | 75 +++++- index.html | 282 +++++++++++++++++++--- package.json | 1 + resources/shapes/circle.png | Bin 0 -> 21310 bytes resources/shapes/cone.png | Bin 0 -> 14812 bytes resources/shapes/cube.png | Bin 0 -> 3719 bytes resources/shapes/cylinder.png | Bin 0 -> 3801 bytes resources/shapes/dodecahedron.jpeg | Bin 0 -> 5451 bytes resources/shapes/icosahedron.png | Bin 0 -> 7374 bytes resources/shapes/octahedron.png | Bin 0 -> 8643 bytes resources/shapes/plane.jpg | Bin 0 -> 15770 bytes resources/shapes/pyramid.png | Bin 0 -> 4730 bytes resources/shapes/ring.png | Bin 0 -> 21310 bytes resources/shapes/sphere.png | Bin 0 -> 50008 bytes resources/shapes/torus.jpeg | Bin 0 -> 8160 bytes resources/shapes/torusknot.png | Bin 0 -> 7598 bytes resources/textures/brick-texture.jpg | Bin 0 -> 872647 bytes resources/textures/flowerbed-texture.jpg | Bin 0 -> 744344 bytes resources/textures/grass-texture.jpg | Bin 0 -> 938101 bytes resources/textures/slate-roof-texture.jpg | Bin 0 -> 1015308 bytes 24 files changed, 373 insertions(+), 62 deletions(-) create mode 100644 resources/shapes/circle.png create mode 100644 resources/shapes/cone.png create mode 100644 resources/shapes/cube.png create mode 100644 resources/shapes/cylinder.png create mode 100644 resources/shapes/dodecahedron.jpeg create mode 100644 resources/shapes/icosahedron.png create mode 100644 resources/shapes/octahedron.png create mode 100644 resources/shapes/plane.jpg create mode 100644 resources/shapes/pyramid.png create mode 100644 resources/shapes/ring.png create mode 100644 resources/shapes/sphere.png create mode 100644 resources/shapes/torus.jpeg create mode 100644 resources/shapes/torusknot.png create mode 100644 resources/textures/brick-texture.jpg create mode 100644 resources/textures/flowerbed-texture.jpg create mode 100644 resources/textures/grass-texture.jpg create mode 100644 resources/textures/slate-roof-texture.jpg diff --git a/build/ArrayToMesh.ts b/build/ArrayToMesh.ts index dbe7d92..104295b 100644 --- a/build/ArrayToMesh.ts +++ b/build/ArrayToMesh.ts @@ -46,7 +46,7 @@ export class ArrayToMesh let singleCube = new THREE.Mesh( geometry, material ); singleCube.position.set(-x+xLength,y-yLength,z-zLength); - + singleCube.name = x.toString()+y.toString()+z.toString(); this.theMesh.add(singleCube); } diff --git a/build/ObjToArray.ts b/build/ObjToArray.ts index 8c849e3..86ca469 100644 --- a/build/ObjToArray.ts +++ b/build/ObjToArray.ts @@ -118,8 +118,12 @@ export class fileReader { me.setVertex(lines[line], false); } } + + console.log("Vertexes" , me.GvArray); + console.log("Normals" , me.GvnArray); + console.log("Faces" , me.GfArray); //console.log("Cameron is wrong test 1",this.element.name); - me.buildMatrix(); + me.buildMatrix(); me.fillColors(callback,other); me.ready = true; diff --git a/build/main.ts b/build/main.ts index 96d01ee..61b80ba 100644 --- a/build/main.ts +++ b/build/main.ts @@ -261,10 +261,14 @@ let arrayToMesh = new ArrayToMesh(model); converterTwo_canvasTwo.setBackgroundColor(0xffffff); converterTwo_canvasTwo.start(); - var editor = document.getElementById("editor"); - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); - console.log("editor",jsonString) + var editor = ace.edit("editor"); + //editor.container = document.getElementById("editor"); + + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); + console.log("Full editor",editor.getValue()); + var jsonString = editor.getValue(); + console.log("editor",jsonString) // console.log("editor",jsonString); var ruleFile = JSON.parse(jsonString); @@ -283,7 +287,7 @@ let arrayToMesh = new ArrayToMesh(model); demo_canvas.setMesh(converterOne_model); demo_canvas.start(); - var uplouder = document.getElementsByClassName("rules-file-button"); + var uplouder = document.getElementsByClassName("rules-file-upload-button"); var objUpload = document.getElementById("file"); @@ -304,8 +308,11 @@ let arrayToMesh = new ArrayToMesh(model); { uplouder[0].addEventListener("click", function() { - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); - console.log("editor",jsonString) + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); + + console.log("Full editor",editor.getValue()); + var jsonString = editor.getValue(); + console.log("editor",jsonString) //console.log("Input File array 5",array); ruleFile = JSON.parse(jsonString); ruleApplyer.convert(ruleFile, model); @@ -332,12 +339,15 @@ function doRest(model : string[][][],other : any) var arrayToMesh = new ArrayToMesh(model); other[1].setMesh(arrayToMesh.output()); - - var editor = document.getElementById("editor"); - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); + var editor = ace.edit("editor"); + // var editor = document.getElementById("editor"); + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); // console.log("editor",jsonString) //console.log("Input File array 5",array); - var ruleFile = JSON.parse(jsonString); + + console.log("Full editor",editor.getValue()); + var jsonString = editor.getValue(); + var ruleFile = JSON.parse(jsonString); other[2].convert(ruleFile, model); var converterOne_model = new THREE.Group(); // console.log("Before Group",converterOne_model); @@ -348,11 +358,13 @@ function doRest(model : string[][][],other : any) other[0].setMesh(converterOne_model); - var uplouder = document.getElementsByClassName("rules-file-button"); + var uplouder = document.getElementsByClassName("rules-file-upload-button"); uplouder[0].addEventListener("click", function() { - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); - console.log("editor",jsonString) + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); + + var jsonString = editor.getValue(); + console.log("editor",jsonString) //console.log("Input File array 5",array); ruleFile = JSON.parse(jsonString); other[2].convert(ruleFile, model); diff --git a/build/voxc.js b/build/voxc.js index 5bd64ab..01542bd 100644 --- a/build/voxc.js +++ b/build/voxc.js @@ -32,6 +32,7 @@ class ArrayToMesh { else { let singleCube = new THREE.Mesh(geometry, material); singleCube.position.set(-x + xLength, y - yLength, z - zLength); + singleCube.name = x.toString() + y.toString() + z.toString(); this.theMesh.add(singleCube); } // scene.add(singleCube); @@ -149,6 +150,9 @@ class fileReader { me.setVertex(lines[line], false); } } + console.log("Vertexes", me.GvArray); + console.log("Normals", me.GvnArray); + console.log("Faces", me.GfArray); //console.log("Cameron is wrong test 1",this.element.name); me.buildMatrix(); me.fillColors(callback, other); @@ -181,8 +185,6 @@ class fileReader { }; this.reader.readAsText(file); } - loadOBJ() { - } getArray() { return this.finalMatrix; } @@ -1929,8 +1931,11 @@ window.onload = () => { converterTwo_canvasTwo.setMesh(arrayToMesh.output()); converterTwo_canvasTwo.setBackgroundColor(0xffffff); converterTwo_canvasTwo.start(); - var editor = document.getElementById("editor"); - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""), editor.textContent.indexOf("}X") + 1); + var editor = ace.edit("editor"); + //editor.container = document.getElementById("editor"); + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); + console.log("Full editor", editor.getValue()); + var jsonString = editor.getValue(); console.log("editor", jsonString); // console.log("editor",jsonString); var ruleFile = JSON.parse(jsonString); @@ -1944,7 +1949,7 @@ window.onload = () => { demo_canvas.setGridHelper(model.length, model[0].length, model[0][0].length); demo_canvas.setMesh(converterOne_model); demo_canvas.start(); - var uplouder = document.getElementsByClassName("rules-file-button"); + var uplouder = document.getElementsByClassName("rules-file-upload-button"); var objUpload = document.getElementById("file"); var converterOne; var useME = true; @@ -1956,7 +1961,9 @@ window.onload = () => { }); if (useME == true) { uplouder[0].addEventListener("click", function () { - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""), editor.textContent.indexOf("}X") + 1); + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); + console.log("Full editor", editor.getValue()); + var jsonString = editor.getValue(); console.log("editor", jsonString); //console.log("Input File array 5",array); ruleFile = JSON.parse(jsonString); @@ -1976,10 +1983,13 @@ function doRest(model, other) { other[1].CameraPosition(0, 0, 10); var arrayToMesh = new ArrayToMesh_1.ArrayToMesh(model); other[1].setMesh(arrayToMesh.output()); - var editor = document.getElementById("editor"); - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""), editor.textContent.indexOf("}X") + 1); + var editor = ace.edit("editor"); + // var editor = document.getElementById("editor"); + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); // console.log("editor",jsonString) //console.log("Input File array 5",array); + console.log("Full editor", editor.getValue()); + var jsonString = editor.getValue(); var ruleFile = JSON.parse(jsonString); other[2].convert(ruleFile, model); var converterOne_model = new THREE.Group(); @@ -1987,9 +1997,10 @@ function doRest(model, other) { // console.log("After Group",converterOne_model); other[0].setGridHelper(model.length, model[0].length, model[0][0].length); other[0].setMesh(converterOne_model); - var uplouder = document.getElementsByClassName("rules-file-button"); + var uplouder = document.getElementsByClassName("rules-file-upload-button"); uplouder[0].addEventListener("click", function () { - var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""), editor.textContent.indexOf("}X") + 1); + // var jsonString = editor.textContent.slice(editor.textContent.indexOf("{\"Rules\""),editor.textContent.indexOf("}X")+1); + var jsonString = editor.getValue(); console.log("editor", jsonString); //console.log("Input File array 5",array); ruleFile = JSON.parse(jsonString); diff --git a/css/style.css b/css/style.css index 0fb1626..6b29bdd 100644 --- a/css/style.css +++ b/css/style.css @@ -137,7 +137,6 @@ a{ #editor { width: 100%; height: 400px; - margin-bottom: 100px; } .navbar{ @@ -382,7 +381,6 @@ a{ #editor{ margin-top: 30px; - margin-bottom: 30px; } #converter1Canvas{ @@ -425,3 +423,76 @@ input[type=range][orient=vertical] margin-top: 40px; } +.rules-file-upload-button{ + border: none; + outline: none; + width: 100%; + background-color: #86DCEF; + color: #222; + height: 30px; + margin-bottom: 40px; +} + +.rules-file-upload-button:hover{ + background-color: #29badb; +} + +.texture-list{ + margin-top: 40px; + height: 250px; + overflow-y: scroll; + overflow-x: hidden; +} + +.texture-example-container{ + height: 60px; + margin-bottom: 40px; +} + +.texture-example-image-container{ + text-align: center; +} + +.texture-example-image{ + width: 60%; +} + +.texture-example-name{ + margin-top: 15px; + font-size: 15px; +} + +.texture-example-value-{ + color: #a6e22e; +} + +.available-shapes-list{ + height: 250px; + overflow-y: scroll; +} + +.available-shapes-list{ + margin-top: 40px; + height: 250px; + overflow-y: scroll; + overflow-x: hidden; +} + +.shape-example-container{ + height: 60px; + margin-bottom: 40px; +} + +.shape-example-image-container{ + text-align: center; +} + +.shape-example-image{ + width: 60%; +} + +.shape-example-name{ + margin-top: 15px; + font-size: 15px; +} + diff --git a/index.html b/index.html index 0feb4c9..a79eff6 100644 --- a/index.html +++ b/index.html @@ -52,19 +52,19 @@

Documentation

-
-
- -
+
+ + +
+ Upload own .obj file
@@ -105,7 +106,7 @@

Demo

-
{"Rules" : +
{"Rules" : [{ "Color" : "0x664611" , "Shape" : "Cylinder", @@ -116,8 +117,33 @@

Demo

"Shape" : "Cube", "Texture" : "./resources/textures/texture_leaves_by_kuschelirmel_stock.jpg", "Bmap" : "./resources/textures/texture_leaves_by_kuschelirmel_stockBump.jpg" - }] + },{ + "Color" : "0x00ff01", + "Shape" : "Cube", + "Texture" : "./resources/textures/texture_leaves_by_kuschelirmel_stock.jpg", + "Bmap" : "./resources/textures/texture_leaves_by_kuschelirmel_stockBump.jpg" + }], + "cellularRules" : [{ + "Color" : "0x664611", + "Top" : "0x664611", + "Bottom" : "0x664611", + "Left" : "0x664611", + "Right" : "0x664611", + "Front" : "0x664611", + "Back" : "0x664611", + "newColor" : "0x664610" + },{ + "Color" : "0x664611", + "Top" : "0x664611", + "Bottom" : "empty", + "Left" : "0x664611", + "Right" : "0x664611", + "Front" : "0x664611", + "Back" : "0x664611", + "newColor" : "0x664610" + }] }
+
@@ -252,9 +278,9 @@

Converter 2

 ·  Usage  ·  - Converter 1 + Converter 1  ·  - Converter 2 + Converter 2  ·  Converter 3
@@ -283,20 +309,148 @@

Converter 2