Untitled
unknown
javascript
4 years ago
47 kB
7
Indexable
// En[Cryptómapa]s
let url =
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false";
let div;
let backColor;
let title;
let caller;
let container;
let camera;
let renderer;
let scene;
let mesh;
let controls;
let raycaster;
let mouse;
let canvas;
let coins = [];
let grid = [];
let font;
let displayFunctions = [];
let hideFunctions = [];
function Coin(data) {
this.data = data;
this.position;
this.geometries = [];
this.meshes = [];
this.materials = [];
this.speed;
this.rank;
this.price;
this.low24;
this.high24;
this.supply;
this.symbol;
this.display = function (x, y) {
this.rank = createElement("p", "Market Rank: " + this.data.market_cap_rank);
this.rank.position(x, y);
this.rank.style("color", "#FAEBD7");
this.rank.style("font-family", font);
this.price = createElement(
"p",
"Current Price: " + this.data.current_price
);
this.price.position(x, y + 30);
this.price.style("color", "#FAEBD7");
this.price.style("font-family", font);
this.low24 = createElement("p", "Low 24hs: " + this.data.low_24h);
this.low24.position(x, y + 60);
this.low24.style("color", "#FAEBD7");
this.low24.style("font-family", font);
this.high24 = createElement("p", "High 24hs: " + this.data.high_24h);
this.high24.position(x, y + 90);
this.high24.style("color", "#FAEBD7");
this.high24.style("font-family", font);
this.supply = createElement(
"p",
"Price Change % 24hs: " + this.data.price_change_percentage_24h
);
this.supply.position(x, y + 120);
this.supply.style("color", "#FAEBD7");
this.supply.style("font-family", font);
};
}
function preload() {
load();
for (var i = 0; i < 100; i++) {
coins[i] = new Coin("data");
}
font = loadFont("fonts/Roboto-Regular.ttf");
}
function setup() {
rectMode(CENTER);
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
canvas.style("z-index", "1");
div = createElement("div");
div.style("color", "white");
div.style("font-size", "30px");
title = select("#title");
title.style("color", "grey");
title.style("font-family", font);
title.style("font-size", "77px");
createGrid();
for (var i = 0; i < 8; i++) {
coins[i].symbol = createElement("p", coins[i].data.symbol);
if (coins[i].data.market_cap_rank == 1) {
coins[i].position = createVector(-8, 5.1, 0);
coins[i].symbol.position(
grid[0][1].x + windowWidth / 9.5,
grid[0][1].y + windowHeight / 4
);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
} else if (coins[i].data.market_cap_rank == 2) {
coins[i].position = createVector(-6, 5.1, 0);
coins[i].symbol.position(
grid[1][1].x + windowWidth / 9.5,
grid[1][1].y + windowHeight / 4
);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
} else if (coins[i].data.market_cap_rank == 3) {
coins[i].position = createVector(-4.05, 5.1, 0);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
coins[i].symbol.position(
grid[2][1].x + windowWidth / 9.5,
grid[2][1].y + windowHeight / 4
);
} else if (coins[i].data.market_cap_rank == 4) {
coins[i].position = createVector(-2.1, 5.1, 0);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
coins[i].symbol.position(
grid[3][1].x + windowWidth / 9.5,
grid[3][1].y + windowHeight / 4
);
} else if (coins[i].data.market_cap_rank == 5) {
coins[i].position = createVector(-8, 3.6, 0);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
coins[i].symbol.position(
grid[0][2].x + windowWidth / 9.5,
grid[0][2].y + windowHeight / 4
);
} else if (coins[i].data.market_cap_rank == 6) {
coins[i].position = createVector(-6, 3.6, 0);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
coins[i].symbol.position(
grid[1][2].x + windowWidth / 9.5,
grid[1][2].y + windowHeight / 4
);
} else if (coins[i].data.market_cap_rank == 7) {
coins[i].position = createVector(-4, 3.6, 0);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
coins[i].symbol.position(
grid[2][2].x + windowWidth / 9.5,
grid[2][2].y + windowHeight / 4
);
} else if (coins[i].data.market_cap_rank == 8) {
coins[i].position = createVector(-2, 3.6, 0);
coins[i].symbol.style("font-size", "40px");
coins[i].symbol.style("z-index", "1");
coins[i].symbol.style("color", "grey");
coins[i].symbol.position(
grid[3][2].x + windowWidth / 9.5,
grid[3][2].y + windowHeight / 4
);
}
coins[i].display(-1000, -1000);
}
for (var i = 0; i < 8; i++) {
if (coins[i].data.symbol == "btc") {
coins[i].symbol.mouseOver(displayFunctions[0]);
coins[i].symbol.mouseOut(hideFunctions[0]);
} else if (coins[i].data.symbol == "eth") {
coins[i].symbol.mouseOver(displayFunctions[1]);
coins[i].symbol.mouseOut(hideFunctions[1]);
} else if (coins[i].data.symbol == "ada") {
coins[i].symbol.mouseOver(displayFunctions[2]);
coins[i].symbol.mouseOut(hideFunctions[2]);
} else if (coins[i].data.symbol == "usdt") {
coins[i].symbol.mouseOver(displayFunctions[3]);
coins[i].symbol.mouseOut(hideFunctions[3]);
} else if (coins[i].data.symbol == "bnb") {
coins[i].symbol.mouseOver(displayFunctions[4]);
coins[i].symbol.mouseOut(hideFunctions[4]);
} else if (coins[i].data.symbol == "xrp") {
coins[i].symbol.mouseOver(displayFunctions[5]);
coins[i].symbol.mouseOut(hideFunctions[5]);
} else if (coins[i].data.symbol == "doge") {
coins[i].symbol.mouseOver(displayFunctions[6]);
coins[i].symbol.mouseOut(hideFunctions[6]);
} else if (coins[i].data.symbol == "dot") {
coins[i].symbol.mouseOver(displayFunctions[7]);
coins[i].symbol.mouseOut(hideFunctions[7]);
}
}
caller = setInterval(load, 33000);
init();
}
displayFunctions[0] = function displayData0() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "btc") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
displayFunctions[1] = function displayData1() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "eth") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
displayFunctions[2] = function displayData2() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "ada") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
displayFunctions[3] = function displayData3() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "usdt") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
displayFunctions[4] = function displayData4() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "bnb") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
displayFunctions[5] = function displayData5() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "xrp") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
displayFunctions[6] = function displayData6() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "doge") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
displayFunctions[7] = function displayData7() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "dot") {
coins[i].rank.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6
);
coins[i].rank.style("color", "grey");
coins[i].price.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 30
);
coins[i].price.style("color", "grey");
coins[i].low24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 60
);
coins[i].low24.style("color", "grey");
coins[i].high24.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 90
);
coins[i].high24.style("color", "grey");
coins[i].supply.position(
coins[i].symbol.x + windowWidth / 12,
coins[i].symbol.y - windowHeight / 6.6 + 120
);
coins[i].supply.style("color", "grey");
}
}
};
hideFunctions[0] = function hideData0() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "btc") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
hideFunctions[1] = function hideData1() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "eth") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
hideFunctions[2] = function hideData2() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "ada") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
hideFunctions[3] = function hideData3() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "usdt") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
hideFunctions[4] = function hideData4() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "bnb") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
hideFunctions[5] = function hideData5() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "xrp") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
hideFunctions[6] = function hideData6() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "doge") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
hideFunctions[7] = function hideData7() {
for (var i = 0; i < coins.length; i++) {
if (coins[i].data.symbol == "dot") {
coins[i].rank.style("color", "#FAEBD7");
coins[i].rank.position(-1000, 1000);
coins[i].price.style("color", "#FAEBD7");
coins[i].price.position(-1000, 1000);
coins[i].low24.style("color", "#FAEBD7");
coins[i].low24.position(-1000, 1000);
coins[i].high24.style("color", "#FAEBD7");
coins[i].high24.position(-1000, 1000);
coins[i].supply.style("color", "#FAEBD7");
coins[i].supply.position(-1000, 1000);
}
}
};
function load() {
loadJSON(url, search);
}
function search(data) {
for (var i = 0; i < data.length; i++) {
coins[i].data = data[i];
coins[i].speed = random(
coins[i].data.market_cap_change_percentage_24h / 100
);
}
return coins;
}
function createGrid() {
for (var i = 0; i < 4; i++) {
grid[i] = [];
for (var j = 0; j < 300; j++) {
grid[i][j] = createVector((i * windowWidth) / 4, (j * windowHeight) / 3);
noFill();
stroke(0);
//rect(grid[i][j].x+windowWidth/8,grid[i][j].y-windowHeight/6,windowWidth/4,windowHeight/3);
}
}
}
function mousePressed() {
print(coins);
}
function draw() {
createGrid();
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
function init() {
container = document.querySelector("#scene-container");
scene = new THREE.Scene();
scene.background = new THREE.Color(0xfaebd7);
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
createCamera1();
createLights();
createMeshes();
createRenderer();
createGrid();
renderer.setAnimationLoop(() => {
update();
render();
});
}
function createCamera1() {
camera = new THREE.PerspectiveCamera(
35, // FOV
container.clientWidth / container.clientHeight, // aspect
0.1, // near clipping plane
100 // far clipping plane
);
camera.position.set(-5, 5, 7);
}
function createLights() {
// Create a directional light
const mainLight = new THREE.DirectionalLight(0xff0000, 5.0);
mainLight.position.set(0, 4, 0);
const ambientLight = new THREE.HemisphereLight(
0xffffff, // bright sky color
0xffffff, // dim ground color
1 // intensity
);
scene.add(mainLight, ambientLight);
}
function createGeometries() {
for (var i = 0; i < 8; i++) {
if (coins[i].data.symbol == "btc") {
coins[i].geometries[0] = new THREE.TetrahedronBufferGeometry(0.16, 0);
coins[i].geometries[1] = new THREE.TetrahedronBufferGeometry(
0.3,
int(coins[i].data.current_price / 45000)
);
coins[i].geometries[2] = new THREE.TorusKnotGeometry(
0.06,
0.3,
16,
16,
int(coins[i].data.price_change_percentage_24h),
int(coins[0].data.price_change_percentage_24h)
);
coins[i].geometries[3] = new THREE.SphereGeometry(
0.44,
22,
22,
0,
coins[i].data.price_change_percentage_24h,
0,
6.3
);
} else if (coins[i].data.symbol == "eth") {
coins[i].geometries[0] = new THREE.OctahedronBufferGeometry(0.16, 0);
coins[i].geometries[1] = new THREE.OctahedronBufferGeometry(
0.28,
int(coins[i].data.current_price / 2000)
);
coins[i].geometries[2] = new THREE.OctahedronBufferGeometry(
0.39,
int(coins[i].data.current_price / 1000)
);
coins[i].geometries[3] = new THREE.OctahedronBufferGeometry(
0.6,
int(coins[i].data.current_price / 4000)
);
} else if (coins[i].data.symbol == "usdt") {
coins[i].geometries[0] = new THREE.ConeBufferGeometry(
0.16,
coins[i].data.atl,
3,
7
);
coins[i].geometries[1] = new THREE.CylinderBufferGeometry(
0.2,
0.2,
0.6,
coins[i].data.atl.market_cap_change_percentage / 2,
7
);
coins[i].geometries[2] = new THREE.DodecahedronBufferGeometry(
0.4,
coins[i].data.market_cap_rank
);
coins[i].geometries[3] = new THREE.IcosahedronBufferGeometry(0.5, 1);
} else if (coins[i].data.symbol == "ada") {
coins[i].geometries[0] = new THREE.CylinderBufferGeometry(
0.16,
0.16,
0.05,
33,
33
);
coins[i].geometries[1] = new THREE.SphereBufferGeometry(0.28, 16, 4);
coins[i].geometries[2] = new THREE.TorusKnotGeometry(
0.2,
0.2,
175,
15,
2,
3
);
coins[i].geometries[3] = new THREE.SphereGeometry(
0.5,
64,
6,
0,
6.3,
coins[i].data.price_change_percentage_24h,
0.9
);
} else if (coins[i].data.symbol == "bnb") {
coins[i].geometries[0] = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1);
coins[i].geometries[1] = new THREE.DodecahedronBufferGeometry(0.3, 0);
coins[i].geometries[2] = new THREE.DodecahedronBufferGeometry(0.4, 1);
coins[i].geometries[3] = new THREE.CircleBufferGeometry(0.7, 0);
} else if (coins[i].data.symbol == "xrp") {
coins[i].geometries[0] = new THREE.SphereBufferGeometry(
0.1,
13,
4,
6,
6.3,
1,
6.3
);
coins[i].geometries[1] = new THREE.SphereBufferGeometry(0.3, 16, 16);
coins[i].geometries[2] = new THREE.SphereBufferGeometry(
0.45,
3,
6,
6,
6.3,
0,
6.3
);
coins[i].geometries[3] = new THREE.SphereBufferGeometry(
0.55,
3,
6,
0,
coins[i].data.current_price,
6,
6.3
);
} else if (coins[i].data.symbol == "doge") {
coins[i].geometries[0] = new THREE.CylinderBufferGeometry(
0.1,
0.1,
0.05,
33,
33
);
coins[i].geometries[1] = new THREE.IcosahedronBufferGeometry(0.2, 2);
coins[i].geometries[2] = new THREE.TorusKnotGeometry(
0.2,
0.09,
90,
11,
1,
3
);
coins[i].geometries[3] = new THREE.TorusBufferGeometry(
0.66,
0.1,
3,
3,
6.3
);
} else if (coins[i].data.symbol == "dot") {
coins[i].geometries[0] = new THREE.OctahedronBufferGeometry(0.1, 1);
coins[i].geometries[1] = new THREE.OctahedronBufferGeometry(0.1, 1);
coins[i].geometries[2] = new THREE.TorusKnotGeometry(
0.3,
0.05,
64,
8,
6,
3
);
coins[i].geometries[3] = new THREE.SphereBufferGeometry(
0.65,
5,
19,
0,
6.3,
6.3,
6.3
);
coins[i].geometries[4] = new THREE.SphereBufferGeometry(
0.65,
5,
19,
0,
6.3,
6.3,
6.3
);
}
}
return {
coins,
};
}
function createMaterials() {
for (var i = 0; i < 8; i++) {
if (coins[i].data.symbol == "btc") {
coins[i].materials[0] = new THREE.MeshBasicMaterial({
color: 0xf2a900,
});
coins[i].materials[0].color.convertSRGBToLinear();
coins[i].materials[0].wireframe = false;
coins[i].materials[0].transparent = true;
coins[i].materials[0].opacity = coins[i].data.ath / 10000;
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x4d4d4e,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0x000000,
});
coins[i].materials[2].color.convertSRGBToLinear();
coins[i].materials[2].wireframe = true;
coins[i].materials[2].transparent = true;
coins[i].materials[2].opacity = 0.05;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0xdaa520,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = true;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = 0.3;
} else if (coins[i].data.symbol == "eth") {
coins[i].materials[0] = new THREE.MeshBasicMaterial({
color: 0x716b94,
});
coins[i].materials[0].color.convertSRGBToLinear();
coins[i].materials[0].wireframe = false;
coins[i].materials[0].transparent = true;
coins[i].materials[0].opacity = coins[i].data.ath / 10000;
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x14044d,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[1].transparent = true;
coins[i].materials[1].opacity = 0.5;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0xc6c5d4,
});
coins[i].materials[2].color.convertSRGBToLinear();
coins[i].materials[2].wireframe = true;
coins[i].materials[2].transparent = true;
coins[i].materials[2].opacity = 0.3;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0x48cbd9,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = true;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = coins[i].data.ath / 1000;
} else if (coins[i].data.symbol == "usdt") {
const texture2 = new THREE.TextureLoader().load("assets/dollar.jpg");
coins[i].materials[0] = new THREE.MeshBasicMaterial({
color: 0x50af95,
map: texture2,
});
coins[i].materials[0].color.convertSRGBToLinear();
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x5c5b5e,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
coins[i].materials[2].color.convertSRGBToLinear();
coins[i].materials[2].wireframe = true;
coins[i].materials[2].transparent = true;
coins[i].materials[2].opacity = 0.3;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0x85bb65,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = true;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = coins[i].data.low_24h;
} else if (coins[i].data.symbol == "ada") {
const texture1 = new THREE.TextureLoader().load("assets/ada.png");
coins[i].materials[0] = new THREE.MeshBasicMaterial({
map: texture1,
});
coins[i].materials[0].wireframe = false;
coins[i].materials[0].transparent = true;
coins[i].materials[0].opacity = coins[i].data.ath / 3;
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x001975,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[1].transparent = true;
coins[i].materials[1].opacity = coins[i].data.ath / 3;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0x00879b,
});
coins[i].materials[2].color.convertSRGBToLinear();
coins[i].materials[2].wireframe = true;
coins[i].materials[2].transparent = true;
coins[i].materials[2].opacity = coins[i].data.ath / 20;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0x00abad,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = false;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = coins[i].data.ath / 4;
} else if (coins[i].data.symbol == "bnb") {
coins[i].materials[0] = new THREE.MeshBasicMaterial({
color: 0xf3ba2f,
});
coins[i].materials[0].color.convertSRGBToLinear();
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x000000,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[1].transparent = true;
coins[i].materials[1].opacity = coins[i].data.atl * 6;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
coins[i].materials[2].wireframe = true;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0xf3ba2f,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = false;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = coins[i].data.atl * 6;
} else if (coins[i].data.symbol == "xrp") {
coins[i].materials[0] = new THREE.MeshBasicMaterial({
color: 0x00aae4,
});
coins[i].materials[0].color.convertSRGBToLinear();
coins[i].materials[0].wireframe = false;
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x006097,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[1].transparent = true;
coins[i].materials[1].opacity = 0.5;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0x434c54,
});
coins[i].materials[2].color.convertSRGBToLinear();
coins[i].materials[2].wireframe = true;
coins[i].materials[2].transparent = true;
coins[i].materials[2].opacity = 0.5;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0x00aae4,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = true;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = 0.5;
} else if (coins[i].data.symbol == "doge") {
const texture2 = new THREE.TextureLoader().load("assets/doge.png");
coins[i].materials[0] = new THREE.MeshBasicMaterial({
map: texture2,
});
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x000000,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[1].transparent = true;
coins[i].materials[1].opacity = coins[i].data.low_24h;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0xe1b303,
});
coins[i].materials[2].color.convertSRGBToLinear();
coins[i].materials[2].wireframe = true;
coins[i].materials[2].transparent = true;
coins[i].materials[2].opacity = coins[i].data.low_24h;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0xcb9800,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = false;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = coins[i].data.low_24h;
} else if (coins[i].data.symbol == "dot") {
coins[i].materials[0] = new THREE.MeshBasicMaterial({
color: 0x000000,
});
coins[i].materials[0].color.convertSRGBToLinear();
coins[i].materials[0].wireframe = false;
coins[i].materials[0].transparent = true;
coins[i].materials[0].opacity = 0.5;
coins[i].materials[1] = new THREE.MeshBasicMaterial({
color: 0x000000,
});
coins[i].materials[1].color.convertSRGBToLinear();
coins[i].materials[1].wireframe = true;
coins[i].materials[1].transparent = false;
coins[i].materials[2] = new THREE.MeshBasicMaterial({
color: 0xe6007a,
});
coins[i].materials[2].color.convertSRGBToLinear();
coins[i].materials[2].wireframe = true;
coins[i].materials[2].transparent = false;
//coins[i].materials[2].opacity = 0.5;
coins[i].materials[3] = new THREE.MeshBasicMaterial({
color: 0xf0f0f0,
});
coins[i].materials[3].color.convertSRGBToLinear();
coins[i].materials[3].wireframe = false;
coins[i].materials[3].transparent = true;
coins[i].materials[3].opacity = 0.5;
coins[i].materials[4] = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
coins[i].materials[4].color.convertSRGBToLinear();
coins[i].materials[4].wireframe = true;
coins[i].materials[4].transparent = false;
//coins[i].materials[4].opacity = 0.5;
}
}
return {
coins,
};
}
function createMeshes() {
const map = new THREE.Group();
scene.add(map);
const materials = createMaterials();
const geometries = createGeometries();
for (var i = 0; i < 8; i++) {
if (coins[i].data.symbol == "btc") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
} else if (coins[i].data.symbol == "eth") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
} else if (coins[i].data.symbol == "ada") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
} else if (coins[i].data.symbol == "usdt") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
} else if (coins[i].data.symbol == "bnb") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
} else if (coins[i].data.symbol == "xrp") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
} else if (coins[i].data.symbol == "doge") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
} else if (coins[i].data.symbol == "dot") {
coins[i].meshes[0] = new THREE.Mesh(
geometries.coins[i].geometries[0],
coins[i].materials[0]
);
coins[i].meshes[0].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[1] = new THREE.Mesh(
geometries.coins[i].geometries[1],
coins[i].materials[1]
);
coins[i].meshes[1].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[2] = new THREE.Mesh(
geometries.coins[i].geometries[2],
coins[i].materials[2]
);
coins[i].meshes[2].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[3] = new THREE.Mesh(
geometries.coins[i].geometries[3],
coins[i].materials[3]
);
coins[i].meshes[3].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
coins[i].meshes[4] = new THREE.Mesh(
geometries.coins[i].geometries[4],
coins[i].materials[4]
);
coins[i].meshes[4].position.set(
coins[i].position.x,
coins[i].position.y,
coins[i].position.z
);
}
}
map.add(
coins[0].meshes[0],
coins[0].meshes[1],
coins[0].meshes[2],
coins[0].meshes[3],
coins[1].meshes[0],
coins[1].meshes[1],
coins[1].meshes[2],
coins[1].meshes[3],
coins[2].meshes[0],
coins[2].meshes[1],
coins[2].meshes[2],
coins[2].meshes[3],
coins[3].meshes[0],
coins[3].meshes[1],
coins[3].meshes[2],
coins[3].meshes[3],
coins[4].meshes[0],
coins[4].meshes[1],
coins[4].meshes[2],
coins[4].meshes[3],
coins[5].meshes[0],
coins[5].meshes[1],
coins[5].meshes[2],
coins[5].meshes[3],
coins[6].meshes[0],
coins[6].meshes[1],
coins[6].meshes[2],
coins[6].meshes[3],
coins[7].meshes[0],
coins[7].meshes[1],
coins[7].meshes[2],
coins[7].meshes[3],
coins[7].meshes[4]
);
}
function createRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
container.appendChild(renderer.domElement);
}
function update() {
for (var i = 0; i < coins.length; i++) {
for (var j = 0; j < coins[i].meshes.length; j++) {
coins[i].meshes[j].rotation.x += coins[i].speed;
coins[i].meshes[j].rotation.y += coins[i].speed;
coins[i].meshes[j].rotation.z += coins[i].speed;
}
}
}
function render() {
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
//window.addEventListener( 'resize', onWindowResize );
//window.addEventListener( 'mousemove', onMouseMove, false );
Editor is loading...