Humanoides 3D con Poderes de Fuego y Rayo

samuel gaitan
5 jun
7 Min. de lectura

<!DOCTYPE html>

<head>

<title>Humanoides 3D con Poderes Elementales</title>

<style>

body {

margin: 0;

padding: 0;

background: radial-gradient(circle, #0a0a2e 0%, #16213e 50%, #0f3460 100%);

overflow: hidden;

cursor: grab;

font-family: 'Arial', sans-serif;

}

body:active {

cursor: grabbing;

}

#ui {

position: absolute;

top: 20px;

left: 20px;

color: white;

background: rgba(0,0,0,0.7);

padding: 15px;

border-radius: 10px;

font-size: 14px;

z-index: 100;

backdrop-filter: blur(10px);

}

#controls {

position: absolute;

bottom: 20px;

left: 20px;

color: white;

background: rgba(0,0,0,0.7);

padding: 15px;

border-radius: 10px;

font-size: 12px;

z-index: 100;

backdrop-filter: blur(10px);

}

#powerButtons {

position: absolute;

bottom: 20px;

right: 20px;

display: flex;

gap: 10px;

z-index: 100;

}

.power-btn {

padding: 15px 25px;

border: none;

border-radius: 10px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

font-size: 14px;

text-transform: uppercase;

}

.fire-btn {

background: linear-gradient(45deg, #ff6b35, #f7931e);

color: white;

box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);

}

.lightning-btn {

background: linear-gradient(45deg, #4fc3f7, #29b6f6);

color: white;

box-shadow: 0 0 20px rgba(79, 195, 247, 0.5);

}

.power-btn:hover {

transform: scale(1.1);

box-shadow: 0 0 30px currentColor;

}

.power-btn:active {

transform: scale(0.95);

}

#loading {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: white;

font-size: 24px;

text-align: center;

z-index: 200;

}

</style>

</head>

<body>

<div id="loading">Cargando experiencia 3D...</div>

<h3>🔥 HUMANOIDES ELEMENTALES 3D ⚡</h3>

<div>Humanoides: <span id="count">0</span></div>

<div>Poderes Activos: <span id="powers">0</span></div>

</div>

<strong>CONTROLES:</strong><br>

🖱️ Clic + Arrastrar: Rotar cámara<br>

🖱️ Rueda: Zoom<br>

🔥 Botón Fuego: Crear poder de fuego<br>

⚡ Botón Rayo: Crear poder de rayo

</div>

<button class="power-btn fire-btn" id="fireBtn">🔥 FUEGO</button>

</div>

class ElementalHumanoids3D {

constructor() {

this.scene = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

this.humanoids = [];

this.powers = [];

this.particles = [];

this.mouse = new THREE.Vector2();

this.raycaster = new THREE.Raycaster();

this.isMouseDown = false;

this.mouseStart = new THREE.Vector2();

this.init();

}

init() {

// Configurar renderer

this.renderer.setSize(window.innerWidth, window.innerHeight);

this.renderer.shadowMap.enabled = true;

this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

this.renderer.setClearColor(0x000000, 0);

document.body.appendChild(this.renderer.domElement);

// Configurar cámara

this.camera.position.set(0, 5, 15);

this.camera.lookAt(0, 0, 0);

// Iluminación

this.setupLighting();

// Crear entorno

this.createEnvironment();

// Crear humanoides

this.createHumanoids();

// Event listeners

this.setupEventListeners();

// Iniciar animación

this.animate();

// Ocultar loading

document.getElementById('loading').style.display = 'none';

}

setupLighting() {

// Luz ambiental

const ambientLight = new THREE.AmbientLight(0x404040, 0.3);

this.scene.add(ambientLight);

// Luz direccional principal

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

directionalLight.position.set(10, 10, 5);

directionalLight.castShadow = true;

directionalLight.shadow.mapSize.width = 2048;

directionalLight.shadow.mapSize.height = 2048;

this.scene.add(directionalLight);

// Luces de colores para ambiente

const redLight = new THREE.PointLight(0xff4444, 1, 20);

redLight.position.set(-8, 3, -8);

this.scene.add(redLight);

const blueLight = new THREE.PointLight(0x4444ff, 1, 20);

blueLight.position.set(8, 3, 8);

this.scene.add(blueLight);

}

createEnvironment() {

// Suelo con patrón

const floorGeometry = new THREE.PlaneGeometry(50, 50);

const floorMaterial = new THREE.MeshLambertMaterial({

color: 0x333333,

transparent: true,

opacity: 0.8

});

const floor = new THREE.Mesh(floorGeometry, floorMaterial);

floor.rotation.x = -Math.PI / 2;

floor.receiveShadow = true;

this.scene.add(floor);

// Cristales flotantes

for (let i = 0; i < 15; i++) {

const crystalGeometry = new THREE.OctahedronGeometry(0.5 + Math.random() * 0.5);

const crystalMaterial = new THREE.MeshPhongMaterial({

color: new THREE.Color().setHSL(Math.random(), 0.7, 0.6),

transparent: true,

opacity: 0.7,

shininess: 100

});

const crystal = new THREE.Mesh(crystalGeometry, crystalMaterial);

crystal.position.set(

(Math.random() - 0.5) * 40,

Math.random() * 15 + 5,

(Math.random() - 0.5) * 40

);

crystal.rotation.set(

Math.random() * Math.PI,

Math.random() * Math.PI

);

this.scene.add(crystal);

}

// Partículas de fondo

this.createBackgroundParticles();

}

createBackgroundParticles() {

const particleGeometry = new THREE.BufferGeometry();

const particleCount = 500;

const positions = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount * 3; i += 3) {

positions[i] = (Math.random() - 0.5) * 100;

positions[i + 1] = Math.random() * 50;

positions[i + 2] = (Math.random() - 0.5) * 100;

}

particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const particleMaterial = new THREE.PointsMaterial({

color: 0xffffff,

size: 0.5,

transparent: true,

opacity: 0.6

});

const particles = new THREE.Points(particleGeometry, particleMaterial);

this.scene.add(particles);

}

createHumanoids() {

const positions = [

{ x: -8, z: -5 },

{ x: 8, z: 5 },

{ x: 0, z: -8 },

{ x: -5, z: 8 },

{ x: 10, z: -3 },

{ x: -10, z: 2 }

];

positions.forEach((pos, index) => {

const humanoid = this.createHumanoid(pos.x, 0, pos.z, index);

this.humanoids.push(humanoid);

this.scene.add(humanoid.group);

});

this.updateUI();

}

createHumanoid(x, y, z, index) {

const group = new THREE.Group();

// Colores únicos para cada humanoide

const colors = [0xff4444, 0x44ff44, 0x4444ff, 0xffff44, 0xff44ff, 0x44ffff];

const baseColor = colors[index % colors.length];

// Torso

const torsoGeometry = new THREE.BoxGeometry(1.5, 2.5, 0.8);

const torsoMaterial = new THREE.MeshPhongMaterial({ color: baseColor });

const torso = new THREE.Mesh(torsoGeometry, torsoMaterial);

torso.position.y = 2;

torso.castShadow = true;

group.add(torso);

// Cabeza

const headGeometry = new THREE.SphereGeometry(0.6);

const headMaterial = new THREE.MeshPhongMaterial({ color: 0xffdbac });

const head = new THREE.Mesh(headGeometry, headMaterial);

head.position.y = 4;

head.castShadow = true;

group.add(head);

// Ojos brillantes

const eyeGeometry = new THREE.SphereGeometry(0.1);

const eyeMaterial = new THREE.MeshBasicMaterial({

color: 0xffffff,

emissive: 0x444444

});

const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);

leftEye.position.set(-0.2, 4.1, 0.5);

group.add(leftEye);

const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);

rightEye.position.set(0.2, 4.1, 0.5);

group.add(rightEye);

// Brazos

const armGeometry = new THREE.CylinderGeometry(0.2, 0.3, 2);

const armMaterial = new THREE.MeshPhongMaterial({ color: 0xffdbac });

const leftArm = new THREE.Mesh(armGeometry, armMaterial);

leftArm.position.set(-1.2, 1.5, 0);

leftArm.rotation.z = 0.3;

leftArm.castShadow = true;

group.add(leftArm);

const rightArm = new THREE.Mesh(armGeometry, armMaterial);

rightArm.position.set(1.2, 1.5, 0);

rightArm.rotation.z = -0.3;

rightArm.castShadow = true;

group.add(rightArm);

// Piernas

const legGeometry = new THREE.CylinderGeometry(0.3, 0.4, 2.5);

const legMaterial = new THREE.MeshPhongMaterial({ color: baseColor });

const leftLeg = new THREE.Mesh(legGeometry, legMaterial);

leftLeg.position.set(-0.5, -0.5, 0);

leftLeg.castShadow = true;

group.add(leftLeg);

const rightLeg = new THREE.Mesh(legGeometry, legMaterial);

rightLeg.position.set(0.5, -0.5, 0);

rightLeg.castShadow = true;

group.add(rightLeg);

// Aura de poder

const auraGeometry = new THREE.SphereGeometry(3);

const auraMaterial = new THREE.MeshBasicMaterial({

color: baseColor,

transparent: true,

opacity: 0.1,

side: THREE.DoubleSide

});

const aura = new THREE.Mesh(auraGeometry, auraMaterial);

group.add(aura);

// Posición y animación

group.position.set(x, y, z);

return {

group: group,

baseColor: baseColor,

animationOffset: Math.random() * Math.PI * 2,

aura: aura,

leftArm: leftArm,

rightArm: rightArm,

head: head

};

}

createFirePower(humanoid) {

const fireGroup = new THREE.Group();

// Bola de fuego principal

const fireGeometry = new THREE.SphereGeometry(0.8);

const fireMaterial = new THREE.MeshBasicMaterial({

color: 0xff4400,

transparent: true,

opacity: 0.8

});

const fireBall = new THREE.Mesh(fireGeometry, fireMaterial);

fireGroup.add(fireBall);

// Partículas de fuego

for (let i = 0; i < 20; i++) {

const particleGeometry = new THREE.SphereGeometry(0.1 + Math.random() * 0.2);

const particleMaterial = new THREE.MeshBasicMaterial({

color: new THREE.Color().setHSL(0.1 * Math.random(), 1, 0.5 + Math.random() * 0.5),

transparent: true,

opacity: 0.7

});

const particle = new THREE.Mesh(particleGeometry, particleMaterial);

const angle = Math.random() * Math.PI * 2;

const radius = 1 + Math.random() * 2;

particle.position.set(

Math.cos(angle) * radius,

Math.random() * 2 - 1,

Math.sin(angle) * radius

);

fireGroup.add(particle);

}

// Posicionar cerca del humanoide

fireGroup.position.copy(humanoid.group.position);

fireGroup.position.y += 3;

fireGroup.position.x += (Math.random() - 0.5) * 4;

fireGroup.position.z += (Math.random() - 0.5) * 4;

this.scene.add(fireGroup);

const power = {

group: fireGroup,

type: 'fire',

life: 300,

velocity: new THREE.Vector3(

(Math.random() - 0.5) * 0.1,

0.02,

(Math.random() - 0.5) * 0.1

)

};

this.powers.push(power);

this.updateUI();

}

createLightningPower(humanoid) {

const lightningGroup = new THREE.Group();

// Núcleo eléctrico

const coreGeometry = new THREE.SphereGeometry(0.5);

const coreMaterial = new THREE.MeshBasicMaterial({

color: 0x00aaff,

emissive: 0x0066aa

});

const core = new THREE.Mesh(coreGeometry, coreMaterial);

lightningGroup.add(core);

// Rayos eléctricos

for (let i = 0; i < 8; i++) {

const boltGeometry = new THREE.CylinderGeometry(0.05, 0.05, 3 + Math.random() * 2);

const boltMaterial = new THREE.MeshBasicMaterial({

color: 0x44aaff,

emissive: 0x2288cc

});

const bolt = new THREE.Mesh(boltGeometry, boltMaterial);

bolt.rotation.set(

Math.random() * Math.PI,

Math.random() * Math.PI

);

bolt.position.set(

(Math.random() - 0.5) * 2,

(Math.random() - 0.5) * 2

);

lightningGroup.add(bolt);

}

// Chispas

for (let i = 0; i < 15; i++) {

const sparkGeometry = new THREE.SphereGeometry(0.05);

const sparkMaterial = new THREE.MeshBasicMaterial({

color: 0xffffff,

emissive: 0xaaaaff

});

const spark = new THREE.Mesh(sparkGeometry, sparkMaterial);

const angle = Math.random() * Math.PI * 2;

const radius = 1 + Math.random() * 3;

spark.position.set(

Math.cos(angle) * radius,

(Math.random() - 0.5) * 3,

Math.sin(angle) * radius

);

lightningGroup.add(spark);

}

// Posicionar cerca del humanoide

lightningGroup.position.copy(humanoid.group.position);

lightningGroup.position.y += 4;

lightningGroup.position.x += (Math.random() - 0.5) * 3;

lightningGroup.position.z += (Math.random() - 0.5) * 3;

this.scene.add(lightningGroup);

const power = {

group: lightningGroup,

type: 'lightning',

life: 200,

velocity: new THREE.Vector3(

(Math.random() - 0.5) * 0.15,

0.03,

(Math.random() - 0.5) * 0.15

)

};

this.powers.push(power);

this.updateUI();

}

setupEventListeners() {

// Mouse events para controlar cámara

this.renderer.domElement.addEventListener('mousedown', (event) => {

this.isMouseDown = true;

this.mouseStart.set(event.clientX, event.clientY);

});

this.renderer.domElement.addEventListener('mousemove', (event) => {

if (this.isMouseDown) {

const deltaX = event.clientX - this.mouseStart.x;

const deltaY = event.clientY - this.mouseStart.y;

this.camera.position.x = Math.cos(deltaX * 0.01) * 15;

this.camera.position.z = Math.sin(deltaX * 0.01) * 15;

this.camera.position.y = Math.max(2, 15 + deltaY * 0.05);

this.camera.lookAt(0, 0, 0);

}

});

this.renderer.domElement.addEventListener('mouseup', () => {

this.isMouseDown = false;

});

// Wheel para zoom

this.renderer.domElement.addEventListener('wheel', (event) => {

const zoom = event.deltaY > 0 ? 1.1 : 0.9;

this.camera.position.multiplyScalar(zoom);

this.camera.position.y = Math.max(2, this.camera.position.y);

});

// Botones de poder

document.getElementById('fireBtn').addEventListener('click', () => {

const randomHumanoid = this.humanoids[Math.floor(Math.random() * this.humanoids.length)];

this.createFirePower(randomHumanoid);

});

document.getElementById('lightningBtn').addEventListener('click', () => {

const randomHumanoid = this.humanoids[Math.floor(Math.random() * this.humanoids.length)];

this.createLightningPower(randomHumanoid);

});

// Resize

window.addEventListener('resize', () => {

this.camera.aspect = window.innerWidth / window.innerHeight;

this.camera.updateProjectionMatrix();

this.renderer.setSize(window.innerWidth, window.innerHeight);

});

}

updateUI() {

document.getElementById('count').textContent = this.humanoids.length;

document.getElementById('powers').textContent = this.powers.length;

}

animate() {

requestAnimationFrame(() => this.animate());

const time = Date.now() * 0.001;

// Animar humanoides

this.humanoids.forEach((humanoid, index) => {

const offset = humanoid.animationOffset;

// Flotación suave

humanoid.group.position.y = Math.sin(time + offset) * 0.5;

// Rotación del aura

humanoid.aura.rotation.y = time * 0.5;

// Movimiento de brazos

humanoid.leftArm.rotation.z = 0.3 + Math.sin(time * 2 + offset) * 0.2;

humanoid.rightArm.rotation.z = -0.3 - Math.sin(time * 2 + offset) * 0.2;

// Rotación sutil de la cabeza

humanoid.head.rotation.y = Math.sin(time * 0.8 + offset) * 0.3;

});

// Animar poderes

this.powers.forEach((power, index) => {

power.group.position.add(power.velocity);

power.group.rotation.x += 0.02;

power.group.rotation.y += 0.03;

power.group.rotation.z += 0.01;

power.life--;

if (power.type === 'fire') {

power.group.scale.setScalar(1 + Math.sin(time * 5) * 0.1);

} else if (power.type === 'lightning') {

power.group.children.forEach(child => {

if (child.material && child.material.emissive) {

child.material.emissive.setScalar(0.3 + Math.random() * 0.7);

}

});

}

if (power.life <= 0) {

this.scene.remove(power.group);

this.powers.splice(index, 1);

this.updateUI();

}

});

this.renderer.render(this.scene, this.camera);

}

// Inicializar la aplicación

const app = new ElementalHumanoids3D();

</script>

</body>

</html>

REVISTA DE INFORMATICA GIRALISMO

Explora la Tecnología

https://wa.me/57

Humanoides 3D con Poderes de Fuego y Rayo

Entradas recientes

Comentarios

REVISTA DE INFORMATICA GIRALISMO