WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Fondo de cuadrícula de cilindros 3D
675
VietStrix
Abrir en el editor
Publica tu código
Recomendado
2 March 2025
HTML, Iniciar sesión Registrarse animado
3 March 2023
Animación de texto láser
11 June 2025
Un código de alejandrokundrah
HTML
Copy
Document
VietStrix
Grid
CSS
Copy
/* Copyright (c) 2025 by Kevin Levron (https://codepen.io/soju22/pen/QwLpBBa) */ body, html, #app { margin: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,0.5) 200%); } #app { height: 100%; font-family: "Montserrat", serif; } .hero { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1, h2 { margin: 0; padding: 0; color: white; text-transform: uppercase; text-shadow: 0 0 20px rgba(0, 0, 0, 1); line-height: 100%; user-select: none; } h1 { font-size: 80px; font-weight: 700; } h2 { font-size: 60px; font-weight: 500; } #webgl-canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } <!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
import Grid2Background from 'https://cdn.jsdelivr.net/npm/threejs-components@0.0.17/build/backgrounds/grid2.cdn.min.js' const bg = Grid2Background(document.getElementById('webgl-canvas')) document.body.addEventListener('click', () => { bg.grid.setColors([0xffffff * Math.random(), 0xffffff * Math.random(), 0xffffff * Math.random()]) bg.grid.light1.color.set(0xffffff * Math.random()) bg.grid.light1.intensity = 500 + Math.random() * 1000 bg.grid.light2.color.set(0xffffff * Math.random()) bg.grid.light2.intensity = 250 + Math.random() * 250 // bg.grid.plane.material.color.set(0xffffff * Math.random()) })