Skip to content

Instantly share code, notes, and snippets.

@CLTanuki
Last active February 3, 2016 20:38
Show Gist options
  • Save CLTanuki/43e3044d98ba96b65392 to your computer and use it in GitHub Desktop.
Save CLTanuki/43e3044d98ba96b65392 to your computer and use it in GitHub Desktop.
// Create ThreeJS scene
var scene = new THREE.Scene();
var fog = new THREE.FogExp2(0xffffff, 0.03);
scene.fog = fog;
// Temp world map data
var worldData = {
numRows: 32,
numCols: 32,
tiles: []
};
var GAME_W = window.innerWidth,
GAME_H = window.innerHeight,
FOV = 30,
RENDER_NEAR_PLANE = 1,
RENDER_FAR_PLANE = 1000;
// Add camera
var camera = new THREE.PerspectiveCamera(FOV, GAME_W / GAME_H, RENDER_NEAR_PLANE, RENDER_FAR_PLANE);
camera.position.set(6, -6, 8);
camera.rotation.set(50 * Math.PI / 180, 0, 0);
// Create canvas and renderer
var gameCanvas = document.getElementById('game-canvas');
var renderer = new THREE.WebGLRenderer({ canvas: gameCanvas, antialias: false });
// Set the background color of the renderer to black, with full opacity
renderer.setClearColor(0x2A5263, 1);
renderer.setSize(GAME_W, GAME_H);
// Generate isometric world...
var TILE_W = 1, TILE_W_HALF = TILE_W / 2;
for(var y = 0; y < worldData.numRows; y++) {
var offsetX = 0;
// If row is odd
if(y % 2 !== 0) {
offsetX = TILE_W_HALF + TILE_W_HALF * 0.4;
}
for(var x = 0; x < worldData.numCols; x++) {
var geometry = new THREE.BufferGeometry();
var vertexPositions = [
[-TILE_W/2, -TILE_W/2, TILE_W/2],
[ TILE_W/2, -TILE_W/2, TILE_W/2],
[ TILE_W/2, TILE_W/2, TILE_W/2],
[ TILE_W/2, TILE_W/2, TILE_W/2],
[-TILE_W/2, TILE_W/2, TILE_W/2],
[-TILE_W/2, -TILE_W/2, TILE_W/2]
];
var vertices = new Float32Array(vertexPositions.length * 3); // three components per vertex
for (var i = 0; i < vertexPositions.length; i++) {
vertices[i*3 + 0] = vertexPositions[i][0];
vertices[i*3 + 1] = vertexPositions[i][1];
vertices[i*3 + 2] = vertexPositions[i][2];
}
geometry.addAttribute('position', new THREE.BufferAttribute( vertices, 3 ));
var tileXPos = x * TILE_W + offsetX + (TILE_W * 0.4 * x),
tileYPos = y * TILE_W - (TILE_W_HALF * 0.6 * y);
var texture = THREE.ImageUtils.loadTexture("img/square.png");
var material = new THREE.MeshBasicMaterial({map: texture, wireframe: true });
material.shading = THREE.FlatShading;
geometry.computeVertexNormals();
var tilePlane = new THREE.Mesh(geometry, material);
tilePlane.position.set(tileXPos, tileYPos, 0);
tilePlane.rotation.z = 45 * Math.PI / 180;
scene.add(tilePlane);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment