Scribd
Upload
7 views2 pages

Solitario 3D en WebGL

This document is an HTML file that creates a 3D solitaire card game using the Three.js library. It sets up a scene with ambient and directional lighting, generates floating 3D cards in red and black, and includes an animation loop to rotate the cards. The canvas adjusts to window resizing for a responsive design.

Uploaded by

elattarahmed144
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views2 pages

Solitario 3D en WebGL

This document is an HTML file that creates a 3D solitaire card game using the Three.js library. It sets up a scene with ambient and directional lighting, generates floating 3D cards in red and black, and includes an animation loop to rotate the cards. The canvas adjusts to window resizing for a responsive design.

Uploaded by

elattarahmed144
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cartel Solitario 3D</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { display: block; }
#titulo { position: absolute; top: 20px; left: 20px; color: white; font-
size: 48px; font-family: Arial, sans-serif; text-shadow: 2px 2px 4px
rgba(0,0,0,0.5); z-index: 10; }
</style>
<script
src="[Link]
</head>
<body>
<div id="titulo">Solitario 3D</div>
<script>
// Crear escena, cámara y renderizador
const scene = new [Link]();
const camera = new [Link](75, [Link] /
[Link], 0.1, 1000);
const renderer = new [Link]();
[Link]([Link], [Link]);
[Link]([Link]);

// Luz ambiental y direccional para efectos 3D


const ambientLight = new [Link](0x404040, 0.6);
[Link](ambientLight);
const directionalLight = new [Link](0xffffff, 0.8);
[Link](1, 1, 1);
[Link](directionalLight);

// Crear cartas 3D (rectángulos con textura simple)


function createCard(x, y, z, color) {
const geometry = new [Link](1, 1.4, 0.1);
const material = new [Link]({ color: color });
const card = new [Link](geometry, material);
[Link](x, y, z);
[Link](card);
return card;
}

// Crear varias cartas flotantes


const cards = [];
for (let i = 0; i < 10; i++) {
const color = [Link]() > 0.5 ? 0xff0000 : 0x000000; // Rojo o
negro
const card = createCard(
([Link]() - 0.5) * 10,
([Link]() - 0.5) * 10,
([Link]() - 0.5) * 10,
color
);
[Link](card);
}

// Posicionar cámara
[Link].z = 5;

// Función de animación
function animate() {
requestAnimationFrame(animate);

// Rotar cartas para efecto 3D dinámico


[Link]((card, index) => {
[Link].x += 0.01 * (index % 2 === 0 ? 1 : -1);
[Link].y += 0.01;
});

[Link](scene, camera);
}
animate();

// Ajustar tamaño al redimensionar ventana


[Link]('resize', () => {
[Link] = [Link] / [Link];
[Link]();
[Link]([Link], [Link]);
});
</script>
</body>
</html>

You might also like