Add files via upload

cuestionario.js

@@ -0,0 +1,141 @@
+// Escena del Cuestionario
+const sceneQuiz = new THREE.Scene();
+const cameraQuiz = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+// Crear un cubo con material MeshPhong
+const geometryQuiz = new THREE.BoxGeometry();
+const materialQuiz = new THREE.MeshPhongMaterial({
+    shininess: 150,
+    reflectivity: 1,
+    specular: 0xffffff,
+    color: 0x0000ff// Naranja inicial
+});
+const cubeQuiz = new THREE.Mesh(geometryQuiz, materialQuiz);
+cubeQuiz.position.x += 1;
+sceneQuiz.add(cubeQuiz);
+
+// Configurar cámara
+cameraQuiz.position.z = 5;
+
+// Añadir iluminación a la escena
+const ambientLight = new THREE.AmbientLight(0x404040); // Luz ambiental tenue
+sceneQuiz.add(ambientLight);
+
+
+const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+directionalLight.position.set(5, 5, 5); // Posición de la luz
+directionalLight.target = cubeQuiz;        // Hacer que apunte al cubo
+sceneQuiz.add(directionalLight);
+
+const hemisphereLight = new THREE.HemisphereLight(0x6495ED, 0xffcc00, 0.5); // Luz hemisférica
+sceneQuiz.add(hemisphereLight);
+
+// Crear contenedor para el cuestionario
+const quizContainer = document.createElement('div');
+quizContainer.style.position = 'absolute';
+quizContainer.style.top = '10px';
+quizContainer.style.left = '10px';
+quizContainer.style.width = '40%';
+quizContainer.style.background = 'rgba(255, 255, 255, 0.9)';
+quizContainer.style.padding = '10px';
+quizContainer.style.borderRadius = '10px';
+quizContainer.style.overflowY = 'auto';
+quizContainer.style.maxHeight = '70vh';
+quizContainer.style.fontSize = '10px'; // Reducir tamaño de fuente
+quizContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
+quizContainer.innerHTML = `
+    <h3 style="text-align: center; margin-top: 0;">Descubre tu color</h3>
+    <form id="quiz-form">
+        ${generateQuestions()}
+        <button type="submit" style="margin-top: 10px;">Calcular Color</button>
+    </form>
+`;
+quizContainer.style.display = 'none';
+document.body.appendChild(quizContainer);
+
+// Función para generar las 20 preguntas dinámicamente
+function generateQuestions() {
+    const questions = [
+        { text: "¿Qué tan incómodo te sientes frente a situaciones de peligro físico?", section: "R" },
+        { text: "¿Temes al conflicto o a las confrontaciones?", section: "R" },
+        { text: "¿Te sientes ansioso/a en situaciones de estrés intenso?", section: "R" },
+        { text: "¿Te provoca miedo la violencia o el caos?", section: "R" },
+        { text: "¿Evitas riesgos extremos o deportes peligrosos?", section: "R" },
+        { text: "¿Te incomoda estar en lugares abarrotados?", section: "R" },
+        { text: "¿Qué tan reactivo/a eres ante el peligro inmediato?", section: "R" },
+        { text: "¿Te preocupa la incertidumbre en el futuro?", section: "G" },
+        { text: "¿Qué tan ansioso/a te pone la inestabilidad económica o laboral?", section: "G" },
+        { text: "¿Te sientes inseguro/a al caminar por lugares desconocidos?", section: "G" },
+        { text: "¿Te genera ansiedad perderte o no saber cómo llegar a un lugar?", section: "G" },
+        { text: "¿Te incomoda la idea de que las cosas cambien inesperadamente?", section: "G" },
+        { text: "¿Qué tan importante es la estabilidad en tu vida?", section: "G" },
+        { text: "¿Temes perder el control sobre lo que te rodea?", section: "G" },
+        { text: "¿Qué tan incómodo/a te hace sentir estar completamente solo/a?", section: "B" },
+        { text: "¿Te provoca miedo el silencio absoluto o la oscuridad total?", section: "B" },
+        { text: "¿Qué tan introspectivo/a eres cuando tienes miedo?", section: "B" },
+        { text: "¿Te preocupan preguntas existenciales como el propósito de la vida?", section: "B" },
+        { text: "¿Sientes temor por lo desconocido o lo incierto?", section: "B" },
+        { text: "¿Te asusta perderte en tus propios pensamientos o recuerdos?", section: "B" }
+    ];
+
+    return questions.map((q, i) => `
+        <label>${i + 1}. ${q.text} (1-5)</label>
+        <input type="number" name="q${i + 1}" min="1" max="5" required>
+    `).join("");
+}
+
+// Animar el cuestionario
+function animateQuiz() {
+    requestAnimationFrame(animateQuiz);
+    cubeQuiz.rotation.x += 0.01;
+    cubeQuiz.rotation.y += 0.01;
+    renderer.render(sceneQuiz, cameraQuiz);
+}
+
+// Función para cambiar a la escena del cuestionario
+function loadQuizScene() {
+    quizContainer.style.display = 'block';
+    renderer.setAnimationLoop(() => {
+        cubeQuiz.rotation.x += 0.01;
+        cubeQuiz.rotation.y += 0.01;
+        renderer.render(sceneQuiz, cameraQuiz);
+    });
+}
+
+// Manejar el cuestionario
+document.body.addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    const formData = new FormData(event.target);
+    const answers = Array.from(formData.values()).map(val => parseInt(val, 10));
+    const { colorHex, statistics } = calculateColorAndStats(answers);
+
+    materialQuiz.color.set(colorHex);
+
+    alert(`
+        ¡Tu color es: #${colorHex.toString(16).padStart(6, '0').toUpperCase()}!
+        Estadísticas:
+        ${Object.entries(statistics).map(([key, value]) => `${key}: ${value.toFixed(2)}`).join("\n")}
+    `);
+});
+
+// Calcular color y estadísticas
+function calculateColorAndStats(answers) {
+    const red = Math.min(255, answers.slice(0, 7).reduce((acc, val) => acc + val * 10, 0));
+    const green = Math.min(255, answers.slice(7, 14).reduce((acc, val) => acc + val * 10, 0));
+    const blue = Math.min(255, answers.slice(14).reduce((acc, val) => acc + val * 10, 0));
+    const colorHex = (red << 16) | (green << 8) | blue;
+
+    const total = red + green + blue;
+    const statistics = {
+        Fuerza: red / 255 * 100,
+        Agilidad: green / 255 * 100,
+        Inteligencia: blue / 255 * 100,
+        Resistencia: (red + green) / (2 * 255) * 100,
+        Percepción: (green + blue) / (2 * 255) * 100,
+        Carisma: (red + blue) / (2 * 255) * 100,
+        Vitalidad: total / (3 * 255) * 100
+    };
+
+    return { colorHex, statistics };
+}

escenario1.js

@@ -0,0 +1,73 @@
+import * as THREE from 'three';
+export function initScene() {
+const scene1 = new THREE.Scene();
+
+// Crear la cámara
+const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera1.position.z = 5;
+
+// Crear el renderizador
+const renderer1 = new THREE.WebGLRenderer({ antialias: true });
+renderer1.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer1.domElement);
+
+// Añadir una luz a la escena
+const light = new THREE.DirectionalLight(0xffffff, 1);
+light.position.set(0, 1, 1).normalize();
+scene1.add(light);
+
+// Añadir un cubo a la escena
+const geometry1 = new THREE.BoxGeometry();
+const material1 = new THREE.MeshPhongMaterial({ color: 0x007BFF });
+const cube1 = new THREE.Mesh(geometry1, material1);
+scene1.add(cube1);
+function loadescenario1() {
+    scene1Container.style.display = 'block';
+    renderer.setAnimationLoop(() => {
+        cube1.rotation.x += 0.01;
+        cube1.rotation.y += 0.01;
+        renderer.render(scene1, camera1);
+    });
+}
+function animateScene1() {
+    requestAnimationFrame(animateScene1);
+    cube1.rotation.x += 0.01;
+    cube1.rotation.y += 0.01;
+    renderer1.render(scene1, camera1);
+}
+
+// Llamar a la función de animación
+animateScene1();
+
+// Manejar el redimensionamiento de la ventana
+window.addEventListener('resize', () => {
+    camera1.aspect = window.innerWidth / window.innerHeight;
+    camera1.updateProjectionMatrix();
+    renderer1.setSize(window.innerWidth, window.innerHeight);
+});
+
+// Añadir el reloj
+const clock = document.createElement('div');
+clock.id = 'clock';
+clock.style.position = 'absolute';
+clock.style.bottom = '10px';
+clock.style.right = '10px';
+clock.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+clock.style.color = 'white';
+clock.style.padding = '10px';
+clock.style.borderRadius = '5px';
+clock.style.fontFamily = 'Arial, sans-serif';
+clock.style.zIndex = '100'; // Asegura que esté encima del canvas
+document.body.appendChild(clock);
+
+// Actualizar el reloj
+function updateClock() {
+    const now = new Date();
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    clock.textContent = `${hours}:${minutes}:${seconds}`;
+}
+setInterval(updateClock, 1000);
+updateClock();// Actualizar inmediatamente al cargar la página
+}

index.html

@@ -1,17 +1,34 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Juego RPG</title>
+    <title>Lobby</title>
     <style>
         body { margin: 0; overflow: hidden; }
-        canvas { display: block; }
+        #container { position: relative; width: 100%; height: 100vh; }
     </style>
-    <!-- CDN de Three.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.138.3/three.min.js"></script>
 </head>
 <body>
-    <script src="./js/lobby.js"></script>
+    <div id="container"></div>
+    <div id="clock">00:00:00</div>
+    <script type="module">
+        import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
+        import { initScene } from './newScene.js';
+
+        document.getElementById('options-button').addEventListener('click', () => {
+            loadEscenario1();
+        });
+
+        function loadEscenario1() {
+            renderer.dispose();
+
+            import('./newScene.js').then(module => {
+                module.initScene();
+            }).catch(err => {
+                console.error('Error al cargar la nueva escena:', err);
+            });
+        }
+    </script>
 </body>
 </html>

lobby.js

@@ -0,0 +1,84 @@
+import * as THREE from 'three';// Escena del Lobby
+const sceneLobby = new THREE.Scene();
+const cameraLobby = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+const loader = new THREE.TextureLoader();
+loader.load('./roman.jpg', function (texture) {
+    sceneLobby.background = texture;
+});
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.domElement.style.position = "absolute";
+renderer.domElement.style.top = "0";
+renderer.domElement.style.left = "0";
+document.body.appendChild(renderer.domElement);
+
+// Fondo del lobby con la imagen "roman.jpg"
+document.body.style.margin = "0"; // Elimina márgenes
+document.body.style.overflow = "hidden"; // Evita scroll
+document.body.style.backgroundImage = "url('./roman.jpg')"; // Ruta de la imagen
+document.body.style.backgroundSize = "cover"; // Que la imagen cubra todo el fondo
+document.body.style.backgroundPosition = "center"; // Centrado
+
+// Crear el cubo de la escena del lobby
+const geometryLobby = new THREE.BoxGeometry();
+const materialLobby = new THREE.MeshBasicMaterial({ color: 0x007BFF });
+const cubeLobby = new THREE.Mesh(geometryLobby, materialLobby);
+cubeLobby.position.y = -6;
+cubeLobby.position.z = -10;
+sceneLobby.add(cubeLobby);
+
+cameraLobby.position.z = 5;
+
+// Mostrar texto de instrucciones (canvas 2D sobre la escena 3D)
+const lobbyContainer = document.createElement('div');
+lobbyContainer.style.position = 'absolute';
+lobbyContainer.style.top = '2';
+lobbyContainer.style.left = '50';
+lobbyContainer.style.width = '100%';
+lobbyContainer.style.height = '100%';
+lobbyContainer.style.display = 'flex';
+lobbyContainer.style.flexDirection = 'column';
+lobbyContainer.style.justifyContent = 'flex-start';
+lobbyContainer.style.alignItems = 'center';
+lobbyContainer.style.textAlign = 'center';
+lobbyContainer.style.color = 'white'; // Texto visible sobre el fondo
+lobbyContainer.style.fontFamily = 'Arial, sans-serif'; // Fuente legible
+lobbyContainer.style.zIndex = '10'; // Asegura que esté sobre el canvas
+lobbyContainer.innerHTML = `
+    <h1 style="margin-top: 20px;">Bienvenido al RPG de Colores</h1>
+    <div style="position: absolute; bottom: 10px; display: flex; justify-content: center; width: 100%;">
+        <button id="start-game-button" style="margin: 5px; padding: 10px 20px; font-size: 12px;">Empezar Juego</button>
+        <button id="options-button" style="margin: 5px; padding: 10px 20px; font-size: 12px;">Opciones</button>`;
+document.body.appendChild(lobbyContainer);
+
+// Animar el lobby
+function animateLobby() {
+    requestAnimationFrame(animateLobby);
+    cubeLobby.rotation.x += 0.01;
+    cubeLobby.rotation.y += 0.01;
+    renderer.render(sceneLobby, cameraLobby);
+}
+animateLobby();
+
+// Manejar eventos de los botones
+document.getElementById('start-game-button').addEventListener('click', () => {
+    lobbyContainer.style.display = 'none'; // Ocultar lobby
+    loadQuizScene();
+});
+
+document.getElementById('options-button').addEventListener('click', () => {
+    lobbyContainer.style.display = 'none';
+    loadEscenario1();
+});
+
+function loadEscenario1() {
+    // Eliminar el renderizador del lobby (si es necesario)
+    renderer.dispose();
+
+    // Cargar la nueva escena
+    import('./escenario1.js').then(module => {
+        module.initScene(); // Ejecutar la función initScene para inicializar la nueva escena
+    }).catch(err => {
+        console.error('Error al cargar la nueva escena:', err);
+    });
+}