Some zooming optimization
This commit is contained in:
parent
24dfb5ca1b
commit
f5f52a776d
3 changed files with 66 additions and 524 deletions
|
|
@ -1,507 +1,9 @@
|
||||||
/* CSS Document */
|
#canvas-wrap {
|
||||||
|
position:relative
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
content: " ";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.clearfix {
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
#overlay {
|
||||||
box-sizing: border-box;
|
position:absolute;
|
||||||
}
|
top:20px;
|
||||||
|
left:30px;
|
||||||
body {
|
|
||||||
font: normal normal 400 14px/145% "Roboto", Tahoma, Geneva, "Trebuchet MS", Helvetica, sans-serif;
|
|
||||||
padding: 0 0 5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font: normal normal 300 3em/140% "Roboto", Tahoma, Geneva, "Trebuchet MS", Helvetica, sans-serif;
|
|
||||||
margin: 1em 0 .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #6bc32d;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #3f7c14;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 1170px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.container section {
|
|
||||||
margin-top: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background-color: #333333;
|
|
||||||
background: linear-gradient(to bottom, #d0d0d0 0%,#f0f0f0 100%);
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
color: #333;
|
|
||||||
height: 80px;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header.fixed {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav a {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #666;
|
|
||||||
display: block;
|
|
||||||
height: 80px;
|
|
||||||
line-height: 100px;
|
|
||||||
padding: 0 1em;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: 250ms background-color linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav > ul > li:hover > a,
|
|
||||||
header > nav a:hover {
|
|
||||||
background-color: #ccc;
|
|
||||||
color: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav > ul > li.active > a,
|
|
||||||
header > nav > ul > li.active:hover > a,
|
|
||||||
header > nav .active a:hover {
|
|
||||||
background-color: #666;
|
|
||||||
color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav a > i {
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-right: .25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav > .logo {
|
|
||||||
background: transparent url("../img/world_data_logo.png") no-repeat 0 0%;
|
|
||||||
float: left;
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1000px;
|
|
||||||
margin-right: 2em;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav > .logo:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
background-position: 0 -80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav > ul {
|
|
||||||
float: left;
|
|
||||||
list-style: none none inside;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav > ul > li {
|
|
||||||
border-right: 1px solid #ccc;
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > nav > ul > li:first-child {
|
|
||||||
border-left: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a#pull {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rest-api-block {
|
|
||||||
background-color: #fcfcfc;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top-color: #6bc32d;
|
|
||||||
box-shadow: 0px 2px 6px #ddd;
|
|
||||||
padding: 1em;
|
|
||||||
width: 25%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rest-api-block h2 {
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rest-api-block p {
|
|
||||||
margin: 0.5em 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rest-api-block p.sep {
|
|
||||||
border-top: 1px dashed #ccc;
|
|
||||||
margin-top: 2em;
|
|
||||||
padding-top: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rest-api-block p > label {
|
|
||||||
color: #a1a1a1;
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rest-api-block p > input {
|
|
||||||
background-color: #fafafa;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: block;
|
|
||||||
font-size: 1.2em;
|
|
||||||
padding: .1em;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit > input {
|
|
||||||
background-color: #333333;
|
|
||||||
background: linear-gradient(to bottom, #66cc33 0%,#339900 100%);
|
|
||||||
border: 1px solid #339900;
|
|
||||||
border-radius: 2px;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.4em;
|
|
||||||
padding: .4em .9em;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green_btn {
|
|
||||||
width: 45%;
|
|
||||||
background-color: #333333;
|
|
||||||
background: linear-gradient(to bottom, #66cc33 0%,#339900 100%);
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
font: 99% sans-serif;
|
|
||||||
line-height: 1.4em;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: middle;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 1.2em;
|
|
||||||
padding: .1em;
|
|
||||||
margin: 0.5em 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info_box {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px 12px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: middle;
|
|
||||||
-ms-touch-action: manipulation;
|
|
||||||
touch-action: manipulation;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
background-image: none;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.failure {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #d9534f;
|
|
||||||
border-color: #d43f3a;
|
|
||||||
}
|
|
||||||
.success {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #5cb85c;
|
|
||||||
border-color: #4cae4c;
|
|
||||||
}
|
|
||||||
.warning {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #f0ad4e;
|
|
||||||
border-color: #eea236;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl {
|
|
||||||
color: #999;
|
|
||||||
margin: 1.5em 0 .5em;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div {
|
|
||||||
float: left;
|
|
||||||
margin-right: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div.right {
|
|
||||||
float: right;
|
|
||||||
margin-left: 2em;
|
|
||||||
margin-right: 0;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div > p {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div > ul {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div > ul > li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div > ul > li:before {
|
|
||||||
content: " | ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div > ul > li:first-child:before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-ctrl > div > ul > li > a.active {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > thead > tr > th,
|
|
||||||
table > tbody > tr > td {
|
|
||||||
padding: .75em .4em .75em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > thead > tr > th {
|
|
||||||
border-bottom: 3px solid #ccc;
|
|
||||||
font-size: 1.2em;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > thead > tr > th.actions {
|
|
||||||
width: 11em;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > tbody > tr > td {
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > tbody > tr > td.actions {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > tbody > tr > td > img {
|
|
||||||
float: left;
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > tbody > tr > td.actions > a {
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-left: .3em;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer > .container {
|
|
||||||
border-top: 1px solid #6bc32d;
|
|
||||||
color: #666;
|
|
||||||
font-size: .9em;
|
|
||||||
margin-top: 5em;
|
|
||||||
padding: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer > .container > div {
|
|
||||||
float: left;
|
|
||||||
width: 48%;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer > .container > div.right {
|
|
||||||
float: right;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Media Queries */
|
|
||||||
|
|
||||||
/********************************************************
|
|
||||||
**************** menu *********************************
|
|
||||||
*********************************************************/
|
|
||||||
|
|
||||||
/* only if you like to broke up the menu in two lines:
|
|
||||||
|
|
||||||
@media screen and (max-width: 815px) {
|
|
||||||
nav {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
nav ul {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
nav li {
|
|
||||||
width: 50%;
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
nav li a {
|
|
||||||
border-bottom: 1px solid #576979;
|
|
||||||
border-right: 1px solid #576979;
|
|
||||||
}
|
|
||||||
nav a {
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
text-indent: 25px;
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
@media only screen and (max-width : 815px) {
|
|
||||||
div.container section {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
height: auto;
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
header {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
header > nav > ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nav ul {
|
|
||||||
width: 100%;
|
|
||||||
display: none;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
nav a#pull {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
nav ul li {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
header > nav a {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
nav a {
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
nav > a.logo {
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : 816px) {
|
|
||||||
nav ul {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width : 320px) {
|
|
||||||
nav li {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
nav li a {
|
|
||||||
border-bottom: 1px solid #576979;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/********************************************************
|
|
||||||
**************** large devices ************************
|
|
||||||
*********************************************************/
|
|
||||||
@media (max-width:1280px) {
|
|
||||||
|
|
||||||
/* hi-res laptops and desktops */
|
|
||||||
|
|
||||||
}
|
|
||||||
@media (max-width:1024px) {
|
|
||||||
|
|
||||||
/* big landscape tablets, laptops, and desktops */
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 1024px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/********************************************************
|
|
||||||
**************** medium devices *********************
|
|
||||||
*********************************************************/
|
|
||||||
@media (max-width:960px) {
|
|
||||||
|
|
||||||
/* tablet, landscape iPad, lo-res laptops ands desktops */
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 960px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width:640px) {
|
|
||||||
|
|
||||||
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 640px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/********************************************************
|
|
||||||
**************** small devices ************************
|
|
||||||
*********************************************************/
|
|
||||||
@media (max-width:480px) {
|
|
||||||
|
|
||||||
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 480px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width:319px) {
|
|
||||||
|
|
||||||
/* smartphones, iPhone, portrait 480x320 phones */
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 319px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -39,21 +39,49 @@ let camera;
|
||||||
let renderer;
|
let renderer;
|
||||||
var light;
|
var light;
|
||||||
|
|
||||||
function setup_enables() {
|
function setup_flags() {
|
||||||
flags = [
|
flags = [
|
||||||
{ id: "birth_rate_per_1000", enabled: true, color: 0xff0000 },
|
{ id: "birth_rate_per_1000", name: "Birth Rate / 100", enabled: true, color: 0xff0000 },
|
||||||
{ id: "cell_phones_per_100", enabled: true, color: 0x0ff000 },
|
{ id: "cell_phones_per_100", name: "Cell Phones / 100", enabled: false, color: 0x0ff000 },
|
||||||
{ id: "children_per_woman", enabled: true, color: 0x00ff00 },
|
{ id: "children_per_woman", name: "Children / Woman", enabled: false, color: 0x00ff00 },
|
||||||
{ id: "electricity_consumption_per_capita", enabled: true, color: 0x000ff0 },
|
{ id: "electricity_consumption_per_capita", name: "Electricity Consumption / Capita", enabled: false, color: 0x000ff0 },
|
||||||
{ id: "gdp_per_capita", enabled: true, color: 0x0000ff },
|
{ id: "gdp_per_capita", name: "GDP / Capita", enabled: false, color: 0x0000ff },
|
||||||
{ id: "gdp_per_capita_growth", enabled: true, color: 0xf0000f },
|
{ id: "gdp_per_capita_growth", name: "GDP / Capita Growth", enabled: false, color: 0xf0000f },
|
||||||
{ id: "inflation_annual", enabled: true, color: 0xf000f0 },
|
{ id: "inflation_annual", name: "Inflation Annual", enabled: false, color: 0xf000f0 },
|
||||||
{ id: "internet_user_per_100", enabled: true, color: 0x00f00f },
|
{ id: "internet_user_per_100", name: "Internet User / 100", enabled: false, color: 0x00f00f },
|
||||||
{ id: "life_expectancy", enabled: true, color: 0xf00f00 },
|
{ id: "life_expectancy", name: "Life Expectancy", enabled: false, color: 0xf00f00 },
|
||||||
{ id: "military_expenditure_percent_of_gdp", enabled: true, color: 0x0f00f0 },
|
{ id: "military_expenditure_percent_of_gdp", name: "Military Expenditure % of GDP", enabled: false, color: 0x0f00f0 },
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setup_checkboxes() {
|
||||||
|
let checkboxes = "<table>";
|
||||||
|
|
||||||
|
for (let i = 0; i < flags.length; i++) {
|
||||||
|
let flag = flags[i];
|
||||||
|
|
||||||
|
checkboxes += "<tr><td>";
|
||||||
|
checkboxes += "<input type=\"checkbox\"";
|
||||||
|
|
||||||
|
if (flag.enabled) {
|
||||||
|
checkboxes += " checked";
|
||||||
|
}
|
||||||
|
|
||||||
|
checkboxes += ">" + flag.name + "</input>";
|
||||||
|
|
||||||
|
checkboxes += "</td></tr>";
|
||||||
|
checkboxes += "\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
checkboxes = "</table>";
|
||||||
|
|
||||||
|
let overlay = document.getElementById("overlay");
|
||||||
|
|
||||||
|
if (overlay != null) {
|
||||||
|
overlay.innerHTML = checkboxes;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function setup() {
|
function setup() {
|
||||||
mappa = new Mappa('MapboxGL', key);
|
mappa = new Mappa('MapboxGL', key);
|
||||||
myMap = mappa.tileMap(options);
|
myMap = mappa.tileMap(options);
|
||||||
|
|
@ -66,7 +94,6 @@ function setup() {
|
||||||
|
|
||||||
camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
|
camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
|
||||||
camera.up = new THREE.Vector3(0, 0, 1);
|
camera.up = new THREE.Vector3(0, 0, 1);
|
||||||
//camera.position.z = 300;
|
|
||||||
|
|
||||||
scene = new THREE.Scene();
|
scene = new THREE.Scene();
|
||||||
renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas });
|
renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas });
|
||||||
|
|
@ -85,7 +112,8 @@ function setup() {
|
||||||
myMap.overlay(canvas);
|
myMap.overlay(canvas);
|
||||||
myMap.onChange(update);
|
myMap.onChange(update);
|
||||||
|
|
||||||
setup_enables();
|
setup_flags();
|
||||||
|
setup_checkboxes();
|
||||||
|
|
||||||
update();
|
update();
|
||||||
}
|
}
|
||||||
|
|
@ -105,8 +133,7 @@ function setup_objects() {
|
||||||
if (flag.enabled) {
|
if (flag.enabled) {
|
||||||
let value = tableData_global[i][flag.id];
|
let value = tableData_global[i][flag.id];
|
||||||
|
|
||||||
// TODO: value
|
let height = value / 20.0;
|
||||||
let height = value / 10.0;
|
|
||||||
let geometry = new THREE.BoxGeometry(1, 1, height);
|
let geometry = new THREE.BoxGeometry(1, 1, height);
|
||||||
let material = new THREE.MeshBasicMaterial({ color: flag.color });
|
let material = new THREE.MeshBasicMaterial({ color: flag.color });
|
||||||
let cube = new THREE.Mesh(geometry, material);
|
let cube = new THREE.Mesh(geometry, material);
|
||||||
|
|
@ -137,11 +164,20 @@ function draw() { }
|
||||||
function update() {
|
function update() {
|
||||||
setup_objects();
|
setup_objects();
|
||||||
|
|
||||||
let position = myMap.pixelToLatLng(window.innerWidth / 2, window.innerHeight / 2);
|
let pos = myMap.pixelToLatLng(window.innerWidth / 2, window.innerHeight / 2);
|
||||||
|
|
||||||
let look_at = new THREE.Vector3(position.x, position.y, 0);
|
let zoom = myMap.zoom();
|
||||||
camera.position.set(look_at.x, look_at.y - 10, look_at.z + 30);
|
let view;
|
||||||
camera.lookAt(look_at);
|
|
||||||
|
if (zoom == 0) {
|
||||||
|
view = new THREE.Vector3(0, -10.0, 30.0);
|
||||||
|
} else {
|
||||||
|
view = new THREE.Vector3(0, -10 + (2.5 * (4 - zoom)), 30 + (7.5 * (4 - zoom)));
|
||||||
|
}
|
||||||
|
|
||||||
|
let center = new THREE.Vector3(pos.x, pos.y, 0);
|
||||||
|
camera.position.set(view.x + center.x, view.y + center.y, view.z + center.z);
|
||||||
|
camera.lookAt(center);
|
||||||
|
|
||||||
renderer.render(scene, camera);
|
renderer.render(scene, camera);
|
||||||
}
|
}
|
||||||
|
|
@ -25,7 +25,11 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<canvas id="mapa"></canvas>
|
<div id="canvas-wrap">
|
||||||
|
<canvas id="mapa" width="800" height="600"></canvas>
|
||||||
|
<div id="overlay"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript" src="assets/js/webgl.js"></script>
|
<script type="text/javascript" src="assets/js/webgl.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue