Last active
February 3, 2016 20:38
-
-
Save CLTanuki/43e3044d98ba96b65392 to your computer and use it in GitHub Desktop.
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
// 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