Skip to content

Commit

Permalink
#10 got it to display textured tree from set of arrays
Browse files Browse the repository at this point in the history
  • Loading branch information
@Idrian
Idrian committed Aug 10, 2017
1 parent f950bd6 commit 62e99c2
Show file tree
Hide file tree
Showing 22 changed files with 44,884 additions and 183 deletions.
33 changes: 18 additions & 15 deletions build/ArrayToMesh.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,39 @@
import * as THREE from 'three';
export class ArrayToMesh {
constructor(scene, inputArray) {
constructor(inputArray) {
this.theArray = inputArray;
var mergedGeometry = new THREE.Geometry();
var mergedMaterialArray = new Array();
var materialCounter = 0;
this.theMesh = new THREE.Group();
/**
* These Length variables are used to re-centre the group object as each object
* will be placed at the index values of the arrays so we need to push them back
* in order to have the centre object be at (or relatively be at) postion 0,0,0
*/
var xLength = Math.floor(inputArray.length / 2);
var yLength = Math.floor(inputArray[0].length / 2);
var zLength = Math.floor(inputArray[0][0].length / 2);
for (var x = 0; x < this.theArray.length; x++) {
for (var y = 0; y < this.theArray[x].length; y++) {
for (var z = 0; z < this.theArray[x][y].length; z++) {
let geometry = new THREE.BoxGeometry(1, 1, 1);
for (let face in geometry.faces) {
geometry.faces[face].materialIndex = materialCounter;
}
/* for ( let face in geometry.faces )
{
geometry.faces[ face ].materialIndex = materialCounter;
}*/
let material = new THREE.MeshBasicMaterial({ color: this.theArray[x][y][z] });
material.wireframe = true;
if (this.theArray[x][y][z] == null) {
}
else {
let singleCube = new THREE.Mesh(geometry, material);
singleCube.position.set(-x, y, z);
mergedMaterialArray.push(material);
// mergedGeometry.merge(geometry, singleCube.matrix ,materialCounter);
mergedGeometry.mergeMesh(singleCube);
materialCounter++;
singleCube.position.set(-x + xLength, y - yLength, z - zLength);
this.theMesh.add(singleCube);
}
// scene.add(singleCube);
}
}
}
var meshFaceMaterial = new THREE.MeshFaceMaterial(mergedMaterialArray);
this.theMesh = new THREE.Mesh(mergedGeometry, meshFaceMaterial);
this.theMesh.geometry.center();
// console.log((inputArray.length/2),(inputArray[0].length/2),(inputArray[0][0].length/2));
// this.theMesh.position.set(-(inputArray.length/2),-(inputArray[0].length/2),-(inputArray[0][0].length/2));
}
output() {
return this.theMesh;
Expand Down
40 changes: 19 additions & 21 deletions build/ArrayToMesh.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,33 @@ import * as THREE from 'three';
export class ArrayToMesh
{
private theArray : number[][][];
private theMesh : THREE.Mesh;
private theMesh : THREE.Group;

constructor(scene : THREE.Scene,inputArray : number[][][])
constructor(inputArray : number[][][])
{
this.theArray = inputArray;
var mergedGeometry = new THREE.Geometry();
var mergedMaterialArray : THREE.MeshBasicMaterial[] = new Array<THREE.MeshBasicMaterial>();
var materialCounter : number = 0;

this.theMesh = new THREE.Group();

/**
* These Length variables are used to re-centre the group object as each object
* will be placed at the index values of the arrays so we need to push them back
* in order to have the centre object be at (or relatively be at) postion 0,0,0
*/
var xLength = Math.floor(inputArray.length/2);
var yLength = Math.floor(inputArray[0].length/2);
var zLength = Math.floor(inputArray[0][0].length/2);


for(var x=0;x<this.theArray.length;x++)
{
for(var y=0;y<this.theArray[x].length;y++)
{
for(var z=0;z<this.theArray[x][y].length;z++)
{
let geometry = new THREE.BoxGeometry( 1, 1, 1 );
for ( let face in geometry.faces )
/* for ( let face in geometry.faces )
{
geometry.faces[ face ].materialIndex = materialCounter;
}
}*/

let material = new THREE.MeshBasicMaterial( { color: this.theArray[x][y][z] } );
material.wireframe = true;
Expand All @@ -36,13 +40,9 @@ export class ArrayToMesh
else{
let singleCube = new THREE.Mesh( geometry, material );

singleCube.position.set(-x,y,z);
singleCube.position.set(-x+xLength,y-yLength,z-zLength);

mergedMaterialArray.push(material);
// mergedGeometry.merge(geometry, singleCube.matrix ,materialCounter);
mergedGeometry.mergeMesh(singleCube);

materialCounter++;
this.theMesh.add(singleCube);
}


Expand All @@ -51,14 +51,12 @@ export class ArrayToMesh
}
}


var meshFaceMaterial = new THREE.MeshFaceMaterial( mergedMaterialArray );
this.theMesh = new THREE.Mesh( mergedGeometry, meshFaceMaterial );
this.theMesh.geometry.center();
// console.log((inputArray.length/2),(inputArray[0].length/2),(inputArray[0][0].length/2));
// this.theMesh.position.set(-(inputArray.length/2),-(inputArray[0].length/2),-(inputArray[0][0].length/2));
}

output() : THREE.Mesh
output() : THREE.Group
{
return this.theMesh;
}
}
}
50 changes: 50 additions & 0 deletions build/RuleApplyer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import * as THREE from 'three';
export class RuleApplyer {
constructor(inputArray) {
this.theArray = inputArray;
this.theMesh = new THREE.Group();
this.textureLoader = new THREE.TextureLoader();
this.textureLoader.crossOrigin = "";
this.texturesArray = new Array();
this.geometryArray = new Array();
this.materialsArray = new Array();
this.colorArray = new Array();
var texture = this.textureLoader.load("./resources/textures/oak.png");
this.materialsArray.push(new THREE.MeshPhongMaterial({ map: texture }));
texture = this.textureLoader.load("./resources/textures/leaves.jpg");
this.materialsArray.push(new THREE.MeshPhongMaterial({ map: texture }));
this.geometryArray.push(new THREE.CylinderGeometry(0.5, 0.5, 1, 16));
this.geometryArray.push(new THREE.BoxGeometry(1, 1, 1));
this.colorArray.push(0x664611);
this.colorArray.push(0x00ff00);
/**
* These Length variables are used to re-centre the group object as each object
* will be placed at the index values of the arrays so we need to push them back
* in order to have the centre object be at (or relatively be at) postion 0,0,0
*/
var xLength = Math.floor(inputArray.length / 2);
var yLength = Math.floor(inputArray[0].length / 2);
var zLength = Math.floor(inputArray[0][0].length / 2);
for (var x = 0; x < this.theArray.length; x++) {
for (var y = 0; y < this.theArray[x].length; y++) {
for (var z = 0; z < this.theArray[x][y].length; z++) {
if (this.theArray[x][y][z] == null) {
//do nothing
}
else {
for (var i = 0; i < this.colorArray.length; i++) {
if (this.theArray[x][y][z] == this.colorArray[i]) {
let newObject = new THREE.Mesh(this.geometryArray[i], this.materialsArray[i]);
newObject.position.set(-x + xLength, y - yLength, z - zLength);
this.theMesh.add(newObject);
}
}
}
}
}
}
}
output() {
return this.theMesh;
}
}
79 changes: 79 additions & 0 deletions build/RuleApplyer.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import * as THREE from 'three';

export class RuleApplyer
{
private theArray : number[][][];
private theMesh : THREE.Group;
private textureLoader : THREE.TextureLoader;
private texturesArray : THREE.Texture[];
private geometryArray : THREE.Geometry[];
private materialsArray : THREE.MeshPhongMaterial[];
private colorArray : number[];

constructor(inputArray : number[][][])
{
this.theArray = inputArray;
this.theMesh = new THREE.Group();


this.textureLoader = new THREE.TextureLoader();
this.textureLoader.crossOrigin = "";
this.texturesArray = new Array<THREE.Texture>();
this.geometryArray = new Array<THREE.Geometry>();
this.materialsArray = new Array<THREE.MeshPhongMaterial>();
this.colorArray = new Array<number>();

var texture = this.textureLoader.load("./resources/textures/oak.png");
this.materialsArray.push(new THREE.MeshPhongMaterial({map : texture}));
texture = this.textureLoader.load("./resources/textures/leaves.jpg");
this.materialsArray.push(new THREE.MeshPhongMaterial({map : texture}));

this.geometryArray.push(new THREE.CylinderGeometry(0.5, 0.5, 1, 16));
this.geometryArray.push(new THREE.BoxGeometry(1, 1, 1));

this.colorArray.push(0x664611);
this.colorArray.push(0x00ff00);

/**
* These Length variables are used to re-centre the group object as each object
* will be placed at the index values of the arrays so we need to push them back
* in order to have the centre object be at (or relatively be at) postion 0,0,0
*/
var xLength = Math.floor(inputArray.length/2);
var yLength = Math.floor(inputArray[0].length/2);
var zLength = Math.floor(inputArray[0][0].length/2);

for(var x=0;x<this.theArray.length;x++)
{
for(var y=0;y<this.theArray[x].length;y++)
{
for(var z=0;z<this.theArray[x][y].length;z++)
{
if(this.theArray[x][y][z] == null)
{
//do nothing
}
else
{
for(var i=0;i<this.colorArray.length;i++)
{
if(this.theArray[x][y][z] == this.colorArray[i])
{

let newObject = new THREE.Mesh(this.geometryArray[i], this.materialsArray[i] );
newObject.position.set(-x+xLength,y-yLength,z-zLength);

this.theMesh.add(newObject);
}
}
}
}
}
}
}

output() : THREE.Group
{
return this.theMesh;
}
}
Loading

0 comments on commit 62e99c2

Please sign in to comment.