Threejs - Landscape Pattern Concept

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin:0;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();

var width = window.innerWidth;
var height = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var grid = new THREE.GridHelper(fti(12), 12);
scene.add(grid);

// ---- playground here

// contains all the pattern sets, but for example purpose, it only has one pattern set
var patterns = getPatternMap();

// build pattern at index 0
buildPattern(patterns[0]);

// ---- end of playground


// ------------ all functions goes down here

function buildPattern(pattern){

	// pattern.build(); // really all this code will be moved to live in the pattern.build();

	// a emptry container to hold only the blocks that make up the pattern
	var patternBlockMesh = new THREE.Mesh();
  
  // create each block from the pattern
 	pattern.blocks.forEach((block) => {
  	var geo = new THREE.BoxGeometry(block.w, block.h);
    // due to using boxGeometry, offset the mesh x and y value so their lower left corner becomes their origin
    geo.applyMatrix(new THREE.Matrix4().makeTranslation(block.w/2, block.h/2, 0));
    // create the mesh
    var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color: block.c}));
    //var edge = new THREE.EdgesHelper(mesh);
    //mesh.add(edge);
    // set the block into position within the pattern
    mesh.position.set(block.x, block.y, 0);
    // put the block into the partn empty container
    patternBlockMesh.add(mesh);
  });
  
  //scene.add(patternBlockMesh);
  
 ...