<html><head><base href="https://543x.com/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalable Crypto Cube Explorer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Arial', sans-serif;
background-color: #000;
}
#crypto-canvas {
width: 100%;
height: 100%;
display: block;
}
#controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid #fff;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 20px;
}
button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
#info {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#scale-controls {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
</style>
</head>
<body>
<canvas id="crypto-canvas"></canvas>
<div id="controls">
<button id="rotate">Rotate</button>
<button id="shuffle">Shuffle</button>
<button id="explode">Explode</button>
</div>
<div id="scale-controls">
<button id="scale-up">Scale Up</button>
<button id="scale-down">Scale Down</button>
</div>
<div id="info">Use your mouse to explore the crypto cube. Click and drag to rotate. Use the buttons to scale.</div>
<script>
let scene, camera, renderer, cube;
let mouseX = 0, mouseY = 0;
let targetRotationX = 0;
let targetRotationY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let cubeSize = 3;
const cryptoSymbols = [
'BTC', 'ETH', 'ADA', 'SOL', 'DOGE', 'QQ', 'NO', 'PEPE', 'GF', 'PANDA',
'YAYA', 'SATOSHI', 'CAT', 'ORD', 'CLOWN', 'YY', 'JUMP', 'DONALD', 'A',
'MIMI', 'MIQI', 'RABBIT', 'SHEEP', 'SNAKE', 'PEACE', 'RAT', 'MONKEY',
'DRAGON', 'X', 'SEAL', 'COW', 'OTTER', 'ORD(', 'ORD{', 'ORD%', 'ORD<'
];
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('crypto-canvas'), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
createCube();
camera.position.z = 5;
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
window.addEventListener('resize', onWindowResize, false);
window.addEventListener('wheel', onMouseWheel, false);
animate();
}
function createCube() {
const geometry = new THREE.BoxGeometry(1, 1, 1, cubeSize - 1, cubeSize - 1, cubeSize - 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const fontLoader = new THREE.FontLoader();
fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
let symbolIndex = 0;
for (let x = 0; x < cubeSize; x++) {
for (let y = 0; y < cubeSize; y++) {
for (let z = 0; z < cubeSize; z++) {
if (x === 0 || x === cubeSize - 1 || y === 0 || y === cubeSize - 1 || z === 0 || z === cubeSize - 1) {
const symbol = cryptoSymbols[symbolIndex % cryptoSymbols.length];
const textGeometry = new THREE.TextGeometry(symbol, {
font: font,
size: 0.1,
height: 0.02
});
const textMaterial = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.position.set(x / (cubeSize - 1) - 0.5, y / (cubeSize - 1) - 0.5, z / (cubeSize - 1) - 0.5);
cube.add(textMesh);
symbolIndex++;
}
}
}
}
});
}
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += (targetRotationY - cube.rotation.x) * 0.1;
cube.rotation.y += (targetRotationX - cube.rotation.y) * 0.1;
renderer.render(scene, camera);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseDown(event) {
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 100;
mouseY = (event.clientY - windowHalfY) / 100;
targetRotationY = mouseY * 0.5;
targetRotationX = mouseX * 0.5;
}
function onDocumentMouseUp(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onMouseWheel(event) {
const delta = Math.sign(event.deltaY);
const scaleFactor = 1 - delta * 0.1;
scaleCube(scaleFactor);
}
function scaleCube(factor) {
cube.scale.multiplyScalar(factor);
}
document.getElementById('rotate').addEventListener('click', function() {
gsap.to(cube.rotation, { x: Math.PI * 2, y: Math.PI * 2, duration: 2, ease: "power2.inOut" });
});
document.getElementById('shuffle').addEventListener('click', function() {
const duration = 1;
cube.children.forEach(child => {
gsap.to(child.position, {
x: Math.random() - 0.5,
y: Math.random() - 0.5,
z: Math.random() - 0.5,
duration: duration,
ease: "power2.inOut"
});
gsap.to(child.rotation, {
x: Math.random() * Math.PI * 2,
y: Math.random() * Math.PI * 2,
z: Math.random() * Math.PI * 2,
duration: duration,
ease: "power2.inOut"
});
});
});
document.getElementById('explode').addEventListener('click', function() {
const duration = 1;
cube.children.forEach(child => {
const direction = new THREE.Vector3().subVectors(child.position, cube.position).normalize();
gsap.to(child.position, {
x: child.position.x + direction.x * 2,
y: child.position.y + direction.y * 2,
z: child.position.z + direction.z * 2,
duration: duration,
ease: "power2.out",
yoyo: true,
repeat: 1
});
});
});
document.getElementById('scale-up').addEventListener('click', function() {
scaleCube(1.1);
});
document.getElementById('scale-down').addEventListener('click', function() {
scaleCube(0.9);
});
init();
</script>
</body></html>
