<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bitcoin Block Waterfall</title>
  <style>
    body {
      margin: 0;
      overflow: hidden; /* Hide scrollbars */
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // Create the scene, camera, and renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create the bitcoin block material
    const blockMaterial = new THREE.MeshStandardMaterial({ color: 0xF7931A });

    // Create more bitcoin blocks
    const numBlocks = 500; // Increased the number of blocks to 500
    for (let i = 0; i < numBlocks; i++) {
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const block = new THREE.Mesh(geometry, blockMaterial);
      block.position.set(
        Math.random() * 20 - 10, // Random x position between -10 and 10
        Math.random() * 20,      // Random y position between 0 and 20 (height of the waterfall)
        Math.random() * 20 - 10, // Random z position between -10 and 10
      );
      scene.add(block);
    }

    // Create basic lighting
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(5, 10, 7);
    scene.add(directionalLight);

    // Position the camera in a bird's-eye view
    camera.position.set(0, 30, 0); // Camera above the blocks
    camera.rotation.x = -Math.PI / 2; // Rotate the camera to look straight down
    camera.lookAt(0, 0, 0);

    // Animation loop
    function animate() {
      requestAnimationFrame(animate);
      scene.children.forEach((block) => {
        block.position.y -= 0.05; // Move the block downwards (slower falling speed)
        if (block.position.y < -10) {
          block.position.y = 20; // Reset the block's position to the top when it reaches the bottom
        }
      });
      renderer.render(scene, camera);
    }

    // Handle window resize
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    window.addEventListener('resize', onWindowResize, false);

    // Start the animation
    animate();
  </script>
</body>
</html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bitcoin Block Waterfall</title> <style> body { margin: 0; overflow: hidden; /* Hide scrollbars */ } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // Create the scene, camera, and renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create the bitcoin block material const blockMaterial = new THREE.MeshStandardMaterial({ color: 0xF7931A }); // Create more bitcoin blocks const numBlocks = 500; // Increased the number of blocks to 500 for (let i = 0; i < numBlocks; i++) { const geometry = new THREE.BoxGeometry(1, 1, 1); const block = new THREE.Mesh(geometry, blockMaterial); block.position.set( Math.random() * 20 - 10, // Random x position between -10 and 10 Math.random() * 20, // Random y position between 0 and 20 (height of the waterfall) Math.random() * 20 - 10, // Random z position between -10 and 10 ); scene.add(block); } // Create basic lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(5, 10, 7); scene.add(directionalLight); // Position the camera in a bird's-eye view camera.position.set(0, 30, 0); // Camera above the blocks camera.rotation.x = -Math.PI / 2; // Rotate the camera to look straight down camera.lookAt(0, 0, 0); // Animation loop function animate() { requestAnimationFrame(animate); scene.children.forEach((block) => { block.position.y -= 0.05; // Move the block downwards (slower falling speed) if (block.position.y < -10) { block.position.y = 20; // Reset the block's position to the top when it reaches the bottom } }); renderer.render(scene, camera); } // Handle window resize function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', onWindowResize, false); // Start the animation animate(); </script> </body> </html>