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
1471
VietStrix
Abrir en el editor
Video
Publica tu código
0
Recomendado
18 August 2024
Lazo de neón
16 March 2024
Código de menú lateral HTML
16 December 2024
Una página de inicio con color León
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()) })