feat: Add 'Gesto Solidario' donation option and remove the InteractiveSeed component.
This commit is contained in:
@@ -1,5 +1,12 @@
|
||||
---
|
||||
const donationLinks = [
|
||||
{
|
||||
name: 'Gesto Solidario',
|
||||
amount: 'CLP 1.000 a CLP 4.000',
|
||||
description: 'Un pequeño gesto que también ayuda a sembrar esperanza.',
|
||||
emoji: '🤍',
|
||||
href: 'https://app.reveniu.com/checkout-custom-link/tDRHQvX1T0JL1gdx8A7S0mM4RFqV25AR',
|
||||
},
|
||||
{
|
||||
name: 'Semilla Solidaria',
|
||||
amount: '$5.000',
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
<div id="seed-container" class="w-full h-[400px] md:h-[500px] flex items-center justify-center cursor-pointer">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import * as THREE from 'three';
|
||||
|
||||
// Solo ejecutamos en el cliente
|
||||
const container = document.getElementById('seed-container');
|
||||
|
||||
if (container) {
|
||||
// 1. Escena y Cámara
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 1000);
|
||||
camera.position.z = 5;
|
||||
|
||||
// 2. Renderizador (con fondo transparente)
|
||||
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// 3. Objeto: La "Semilla" (Icosaedro)
|
||||
const geometry = new THREE.IcosahedronGeometry(1.6, 0);
|
||||
// Usamos un material que reacciona a la luz y muestra la estructura (wireframe)
|
||||
const material = new THREE.MeshNormalMaterial({
|
||||
wireframe: true,
|
||||
});
|
||||
|
||||
const seed = new THREE.Mesh(geometry, material);
|
||||
scene.add(seed);
|
||||
|
||||
// 4. Animación e Interacción
|
||||
let speedX = 0.002;
|
||||
let speedY = 0.003;
|
||||
let targetScale = 1;
|
||||
|
||||
// Función de animación (loop infinito)
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Rotación constante
|
||||
seed.rotation.x += speedX;
|
||||
seed.rotation.y += speedY;
|
||||
|
||||
// Efecto elástico suave (Lerp)
|
||||
seed.scale.setScalar(THREE.MathUtils.lerp(seed.scale.x, targetScale, 0.1));
|
||||
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
animate();
|
||||
|
||||
// 5. Evento Click: ¡Interacción!
|
||||
container.addEventListener('mousedown', () => {
|
||||
// Al presionar: gira rápido y se agranda
|
||||
speedX = 0.05;
|
||||
speedY = 0.05;
|
||||
targetScale = 1.4;
|
||||
});
|
||||
|
||||
container.addEventListener('mouseup', () => {
|
||||
// Al soltar: vuelve a la normalidad
|
||||
speedX = 0.002;
|
||||
speedY = 0.003;
|
||||
targetScale = 1;
|
||||
});
|
||||
|
||||
// 6. Responsividad
|
||||
window.addEventListener('resize', () => {
|
||||
camera.aspect = container.clientWidth / container.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user