3d城市html网页代码,HTML5 随机生成的3D城市建筑群

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

function whichAnimationEvent() {

var t,

el = document.createElement("sun");

var animations = {

"animation": "animationend",

"OAnimation": "oAnimationEnd",

"MozAnimation": "animationend",

"WebkitAnimation": "webkitAnimationEnd"

}

for (t in animations) {

if (el.style[t] !== undefined) {

return animations[t];

}

}

}

var animationEvent = whichAnimationEvent();

var num = 2;

var hasHospital = false;

$(document).ready(function() {

var start = new Date().getTime();

$('html').addClass('day');

$('html').append('

$('html').append('

$('html').append('

$('#sun').one(animationEvent,

function(event) {

$('#sun').css({

'animation': 'daySun 60s linear'

});

});

$('head').append('');

var d = new Date();

var currentHour = d.getHours();

incrementDay(currentHour);

hour = currentHour;

time = setInterval(function() {

if (hour < 23) {

hour++;

} else {

hour = 0;

}

//console.log(hour);

incrementDay(hour);

}, 12500);

while (!isSquare(num)) {

num = Math.floor(Math.random() * 144);

}

if (num <= 1) {

num = 4;

}

var squirt = Math.sqrt(num);

var zoom = Math.min(squirt - 4, 4);

//console.log(zoom);

if (squirt == 2) {

$('#outside').css({

'padding-top': '500px',

'margin-top': '-400px'

});

$('.outer').css({

'left': '250px'

});

} else {

$('html').css({

'zoom': '1'

});

$('.outer').css({

'left': ((squirt * 75)) + 'px'

});

}

for (var i = 0; i < num; i++) {

randomBuilding(i, num);

}

$('.outer, #earth').dblclick(function() {

var animate = $('.outer').attr('animate');

if (animate === undefined) {

$('.outer').css({

'animation': 'cube-spin 25s infinite linear'

});

$('.outer').attr('animate', 0);

} else if (animate == 0) {

$('.outer').css({

'animation-play-state': 'paused'

});

$('.outer').attr('animate', 1);

} else {

$('.outer').css({

'animation-play-state': ''

});

$('.outer').attr('animate', 0);

}

});

//$('.outside').draggable({

//});

var rows = Math.sqrt(num);

var dimension = (rows * 350) + 200;

var tX = rows > 4 ? (0 - (dimension - 1200)) : (rows == 4 ? -400 : (rows == 3) ? -100 : 250);

$('#earth .top').css({

'height': dimension + 'px',

'width': dimension + 'px',

'transform': 'rotateX(-90deg) translateY(-700px) translateX(' + tX + 'px) translateZ(1px)'

});

$('#earth .bottom').css({

'height': dimension + 'px',

'width': dimension + 'px'

});

$('#earth .right').css({

'width': dimension + 'px',

'transform': ' rotateY(-270deg) translateX(' + (dimension - 700) + 'px) translateY(50px) translateZ(' + tX + 'px)'

});

$('#earth .left').css({

'width': dimension + 'px',

'transform': ' rotateY(270deg) translateX(-' + (dimension - 700) + 'px) translateY(50px) translateZ(' + (0 - tX) + 'px)'

});

$('#earth .front').css({

'width': dimension + 'px',

'transform': 'translateZ(700px) translateY(50px) translateX(' + tX + 'px)'

});

$('#earth .back').css({

'width': dimension + 'px',

'transform': 'translateZ(-' + (dimension - 700) + 'px) translateY(50px) translateX(' + tX + 'px)'

});

//console.log($('.outer').innerWidth() + ' ' + $('.outer').outerWidth());

var end = new Date().getTime();

var time = end - start;

console.log(num + ' buildings took ' + (time / 1000).toFixed(2) + ' seconds to generate (' + $('.outer > .front div').length + ' elements)');

});

var time;

var hour;

var zi = 0;

var iz = 350;

var row = 1;

var col = 0;

function incrementDay(currentHour) {

var day = 8;

var night = 19;

var dusk = 17;

var dawn = 5;

if (currentHour >= day && currentHour < dusk) {

$('.day').animate({

opacity: 1

}, 5000, 'swing');

$('.dawn').animate({

opacity: 0

}, 5000, 'swing');

} else if (currentHour >= dusk && currentHour < night) {

$('.dusk').animate({

opacity: 1

}, 5000, 'swing');

$('.day').animate({

opacity: 1

}, 5000, 'swing');

} else if (currentHour >= night || (currentHour >= 0 && currentHour < dawn)) {

$('.night').animate({

opacity: 1

}, 5000);

$('.dusk').animate({

opacity: 0

}, 5000, 'swing');

} else if (currentHour >= dawn && currentHour < day) {

$('.dawn').animate({

opacity: 1

}, 5000);

$('.night').animate({

opacity: 0

}, 5000, 'swing');

}

}

function randomBuilding(interval, ceiling) {

var seedH = parseInt(Math.random() * 10);

var seedW = parseInt(Math.random() * 10);

var seedD = parseInt(Math.random() * 10);

var height = Math.max(Math.min(seedH * 50, 1000), 60);

var width = Math.max(Math.min(seedW * 50, 250), 60);

var depth = Math.max(Math.min(seedD * 50, 250), 60);

var color1 = Math.floor(Math.max(Math.min(Math.random() * 10, 9), 2)).toString();

var color2 = Math.floor(Math.max(Math.min(Math.random() * 10, 9), 2)).toString();

var color = '#' + color1 + color2 + color1 + color2 + color1 + color2;

generateBuilding(height, width, depth, interval, ceiling, color);

}

function generateBuilding(height, width, depth, interval, ceiling, faceColor) {

var bld = $('

var id = $(bld).attr('id');

var newSide = $('

').find('.newside').first();

var rows = Math.sqrt(ceiling);

var isFirstInRow = false;

if (interval === (row * rows)) {

row++;

isFirstInRow = true;

}

if (isFirstInRow) {

col = 1;

} else {

col++;

}

$(bld).attr('row', row).attr('col', col);

//$('#buildme').text($('#buildme').text() + '#' + id + ' .sideFace{background-color : ' + faceColor + ';}\r\n');

$(bld).find('.front').css({

'height': height + 'px',

'width': width + 'px',

'transform': 'translateZ(' + (depth - depth) + 'px)'

});

$(bld).find('.front').append($(newSide).clone());

$(bld).find('.front').find('.newside').attr('height', height).attr('width', width)

if (num < 16) {

$(bld).find('.back').css({

'height': height + 'px',

'width': width + 'px',

'transform': 'translateZ(-' + depth + 'px) rotateY(180deg)'

});

$(bld).find('.back').append($(newSide).clone());

$(bld).find('.back').find('.newside').attr('height', height).attr('width', width)

$(bld).find('.left').css({

'height': height + 'px',

'width': depth + 'px',

'transform': 'rotateY(270deg) translateX(-' + depth + 'px)'

});

$(bld).find('.left').append($(newSide).clone());

$(bld).find('.left').find('.newside').attr('height', height).attr('width', depth)

} else {

$(bld).find('.back').remove();

$(bld).find('.left').remove();

}

$(bld).find('.right').css({

'height': height + 'px',

'width': depth + 'px',

'transform': 'rotateY(-270deg) translateX(' + depth + 'px) translateZ(' + -(depth - width) + 'px)'

});

$(bld).find('.right').append($(newSide).clone());

$(bld).find('.right').find('.newside').attr('height', height).attr('width', depth)

$(bld).find('.top').css({

'height': depth + 'px',

'width': width + 'px',

'transform': ' rotateX(90deg) translateX(0px) translateY(-' + depth + 'px) translateZ(' + height + 'px)'

});

$(bld).find('.bottom').css({

'height': (depth + 100) + 'px',

'width': (width + 100) + 'px',

'transform': 'translateZ(-50px) rotateX(-90deg) translateY(' + depth + 'px)'

});

$('.wrapper.front').prepend(bld);

var z = $('.wrapper.front').find('#building' + (interval - 1));

var zid = $(z).attr('id');

if (zid !== undefined) {

var odd = isOdd(interval);

var more = 0;

if ((interval - 1) === 1) {

more = 0;

}

var x = $('#' + id).find('.bottom').outerWidth();

iz -= x;

var rowZ = 0;

var last = $('.building').filter('[col="' + col + '"]').filter('[row="' + (row - 1) + '"]').find('.bottom');

var lastW = $(last).outerWidth();

var lastH = $(last).outerHeight();

if (row > 1) {

rowZ -= ((row - 1) * 350);

}

if (isFirstInRow) {

iz = 350;

}

if ((width <= lastW && row > 1 && lastH <= 350) || col === 1) {

rowZ = rowZ + (350 - lastH);

}

$('#' + id).css({

'transform': ' translateY(1000px) translateX(' + iz + 'px) translateZ(' + rowZ + 'px)'

});

if (Math.random() >= .99 && !hasHospital) {

hasHospital = true;

$('#' + id).addClass('hospital');

$('#' + id).find('.top').append('

var crossDim = (depth > width ? width : depth) - 50;

$('#' + id).find('.cross').css({

'height': crossDim + 'px',

'width': crossDim + 'px',

'margin': (height - crossDim) / 10 + 'px auto'

});

}

}

//console.log(id);

var isAnt = Math.random();

if (isAnt < .7 && isAnt > .5) {

var numAnt = Math.max(Math.min(Math.random() * 10, 3), 0);

for (var i = 0; i < numAnt; i++) {

$('#' + id).append(antenna(Math.floor(height), Math.floor(width), height, depth));

}

}

var winH = randomIntFromInterval(10, 30) - 2;

var winW = randomIntFromInterval(10, 30) - 2;

var across = Math.max(Math.floor(width / winW), 1);

var down = Math.max(Math.floor(height / winH), 1);

var sDif = (width) - ((across - 1) * winW);

var dDif = (height) - ((down - 1) * winH);

var sideMargin = Math.max(Math.floor(sDif / across), .5);

var topMargin = Math.max(Math.floor(dDif / down), .5);

//console.log(width + ' ' + winW + ' ' + across + ' ' + sDif + ' ' + sideMargin);

//console.log(height + ' ' + winH + ' ' + down + ' ' + dDif + ' ' + topMargin);

//console.log($('#' + id));

populatewindows($('#' + id).find('.front').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.front');

if (num < 16) {

populatewindows($('#' + id).find('.back').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.back');

populatewindows($('#' + id).find('.left').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.left');

}

populatewindows($('#' + id).find('.right').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.right');

var doorway = $('

$(doorway).addClass('doorWay');

var door1 = $('#' + id).find('.bottom').find('.door').first().clone();

var door2 = $('#' + id).find('.bottom').find('.door').first().clone();

$(doorway).append(door1);

$(doorway).append(door2);

$('#' + id).find('.front').append(doorway);

dooradjuster = 40;

//populateWindows($('#' + id).find('.front').find('.newside')[0].getContext("2d"), '#' + id, windowH, windowW);

//if (num < 16) {

// populateWindows('.back', '#' + id, windowH, windowW);

// populateWindows('.left', '#' + id, windowH, windowW);

//}

//populateWindows('.right', '#' + id, windowH, windowW);

$('#' + id).find('.bottom').find('.w').remove();

$('#' + id).find('.bottom').find('.door').remove();

//html2canvas(element, {

// onrendered: function (canvas) {

// $("#").append(canvas);

// getCanvas = canvas;

// }

//});

//$('#' + id).find('.w').each(function (i, elem) {

// if ($(elem).hasClass('lighted') || $(elem).hasClass('ledLighted')) {

// console.log($(elem).position().top);

// }

//});

}

function isOdd(num) {

return num % 2;

}

function randomIntFromInterval(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

var isSquare = function(n) {

return Math.sqrt(n) % 1 === 0;;

}

function antenna(y, x, h, d) {

var height = Math.max(Math.min(Math.random() * 100, 500), 30);

var rotate = Math.max(Math.min(Math.random() * 100, 360), 0);

var theX = Math.max(Math.min(Math.random() * 100, (x - 10)), (x / 2));

var theY = Math.max(Math.min(Math.random() * 100, (d - 10)), (d / 2));

//console.log(theX + ' ' + theY);

var ant = $('

'width': height + 'px', //rotateY(' + rotate + 'deg) translateY(-' + theY + 'px)

'transform': 'rotateZ(-90deg) translateX(' + theY / 2 + 'px)',

'top': '-' + (h + (height / 2)) + 'px',

'left': '-' + theY / 2 + 'px'

});

if (Math.random() < .09) {

$(ant).addClass('a2');

}

var delay = Math.max(Math.min((Math.random() * 10), 9), 0);

if (delay < 7) {

$(ant).css({

'animation-delay': delay + 's'

});

}

return ant;

}

var coords = new Array();

var main = new Array();

class xy {

constructor(x, y, type, height, width) {

this.x = x;

this.y = y;

this.type = type;

this.height = height;

this.width = width;

}

};

var win = new xy(0, 0, '');

function placeWindows(bld, face) {

for (var i = 0; i < coords.length; i++) {

var place = coords[i];

var win = $('

$(win).css({

'top': place.y + 'px',

'left': place.x + 'px',

'height': place.height + 'px',

'width': place.width + 'px'

}).addClass(place.type);

var delay = Math.max(Math.min((Math.random() * 10), 9), 0);

if (delay < 7) {

$(win).css({

'animation-delay': delay + 's'

});

}

$(bld).find(face).append(win);

}

coords = null;

coords = new Array();

}

function populatewindows(ctx, winH, winW, topMargin, sideMargin, bld, face) {

var dooradjuster = 0;

var faceH = ctx.canvas.clientHeight;

var faceW = ctx.canvas.clientWidth;

ctx.fillStyle = 'transparent';

ctx.shadowColor = 'rgba(0,0,0,0.2)';

ctx.shadowBlur = 30;

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.fillRect(0, 0, faceW, faceH);

var across = Math.floor(faceW / winW);

var down = (Math.floor((faceH - dooradjuster) / winH));

var pad = ((faceW - (across * winW)) / 2) - 1;

win.x = winW;

win.y = winH;

var winCount = 0;

for (var y = 0; y < down - 1; y++) {

for (var x = 0; x < across - 1; x++) {

var firstW = (faceW - ((across - 1) * (sideMargin + winW))) / 2;

var firstH = (faceH - ((down - 1) * (topMargin + winH))) / 2;

var sidePad = x > 0 ? (x * sideMargin) + (x * winW) + firstW : firstW;

var topPad = y > 0 ? (y * topMargin) + (y * winH) + firstH : firstH;

ctx.beginPath();

ctx.fillStyle = 'slategrey';

ctx.strokeStyle = 'grey';

ctx.shadowBlur = 0;

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.lineWidth = 2;

ctx.fillRect(sidePad, topPad, winW, winH);

var iswin = Math.random();

if (iswin > .55 && iswin < .6 && winCount < 8) {

winCount++;

var place = new xy(sidePad, topPad, 'lighted', winH, winW);

ctx.fillRect(sidePad, topPad, winW, winH);

var isLED = Math.random();

if (isLED > .5 && isLED < .6) {

place.type = 'ledLighted';

ctx.fillRect(sidePad, topPad, winW, winH);

}

ctx.stroke();

coords.push(place);

} else {

ctx.stroke();

ctx.shadowColor = 'black';

ctx.shadowBlur = 5;

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.fillRect(sidePad + 2, topPad + 2, winW - 4, winH - 4);

ctx.stroke();

}

}

}

placeWindows(bld, face);

}