Okay, aquí tienes una estructura básica para un portafolio web con Three.js. Mi Portfolio Web

Mi Portfolio

Sobre mí

Aquí va tu descripción...

Proyectos

Aquí mostrarás tus proyectos...

Contacto

Información de contacto...

body { margin: 0; font-family: sans-serif; color: #fff; /* Color de texto principal, ajustar según el fondo 3D */ background-color: #111; /* Color de fondo si el canvas no cubre todo */ overflow-x: hidden; /* Evitar scroll horizontal */ } #bg { position: fixed; /* Fija el canvas */ top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Lo pone detrás del contenido */ display: block; } header, main, footer { position: relative; /* Para que esté sobre el canvas */ z-index: 1; padding: 20px; max-width: 800px; margin: 0 auto; /* Centrar contenido */ } header { text-align: center; padding-top: 40px; padding-bottom: 40px; } header h1 { margin: 0; font-size: 2.5em; } nav a { color: #aaa; text-decoration: none; margin: 0 15px; font-size: 1.1em; transition: color 0.3s ease; } nav a:hover { color: #fff; } section { background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para secciones */ padding: 30px; margin-bottom: 40px; border-radius: 8px; } h2 { border-bottom: 2px solid #555; padding-bottom: 10px; margin-top: 0; } footer { text-align: center; padding: 20px; margin-top: 50px; color: #aaa; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // --- Escena básica --- const scene = new THREE.Scene(); // --- Cámara --- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // --- Renderer --- const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#bg'), // Usar el canvas existente antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); // --- Controles (Opcional, útil para desarrollo) --- // const controls = new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // --- Luces --- const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Luz ambiental suave scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 1); // Luz puntual pointLight.position.set(5, 5, 5); scene.add(pointLight); // --- Objeto de ejemplo (un cubo rotando) --- const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // Material estándar para reaccionar a la luz const cube = new THREE.Mesh(geometry, material); scene.add(cube); // --- Manejo de redimensionamiento de ventana --- window.addEventListener('resize', () => { // Actualizar dimensiones de cámara y renderer camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); // Asegurar pixel ratio correcto }); // --- Bucle de animación --- function animate() { requestAnimationFrame(animate); // Rotar el cubo (ejemplo) cube.rotation.x += 0.005; cube.rotation.y += 0.005; // Actualizar controles si están habilitados // controls.update(); // Renderizar la escena renderer.render(scene, camera); } // Iniciar animación animate();