Inicio Rápido
Bienvenido a Wonderland Engine. Por favor, instala el Editor de Wonderland antes de continuar con este tutorial.
Crear un Proyecto
Ingresa el nombre de un proyecto de tu elección y crea el proyecto a través del “Asistente de Proyecto” que se lanza al iniciar el editor por primera vez.
Elige la plantilla “VR”.
Te encontrarás con un proyecto básico que tiene teletransportación VR configurada. ¡Bastante aburrido! Vamos a añadir un recurso aquí.
En la parte inferior izquierda verás el “Explorador de Recursos”. Muestra el contenido del directorio del proyecto. Todos los activos para el proyecto deben colocarse en este directorio.
Ejecutar en el Navegador
Para empaquetar el proyecto y visualizarlo en el navegador, haz clic en la flecha verde en la parte superior de la ventana:
Ahora, cada vez que “empaquetemos” el proyecto (haciendo clic en el icono de 🔨), el navegador se recargará automáticamente con nuestros cambios.
Eliminar Objetos
Con la plantilla VR, tenemos algunas luces, objetos y lo más importante: la configuración del jugador.
No necesitamos todos los objetos. Elimínalos seleccionándolos con clic izquierdo y luego haciendo clic derecho en el “Esquema de la Escena”, o presionando la tecla “Del”.
Elimina estos:
- Cube
- Sphere
- Cone
- Panel
Asegúrate de mantener:
- Player
- Light
- Light.000
- 3DCursorHitLeft / 3DCursorHitRight
- TeleportIndicator
Modificar la Malla de Navegación
El plano que conservamos tiene un componente de “colisión” adjunto, que define la forma del objeto para colisiones y rayos.
En este caso, se utiliza para la navegación de teletransporte. En el siguiente paso, añadiremos una escena que ya tiene un suelo, así que eliminaremos la malla, pero mantendremos la colisión.
Haz clic en el plano, luego en las “Propiedades”, haz clic en ⋮ (puntos verticales) en el componente “mesh” y finalmente en “Eliminar”:
Verás que las líneas verdes para el componente de colisión se mantienen, mientras que la malla para renderizado desapareció. En el navegador, esta visualización de colisión no aparece por defecto.
Añadir un Recurso
Crea una nueva carpeta assets haciendo clic derecho en el directorio raíz y seleccionando “Nueva carpeta”.
Descarga low_poly_winter_scene.zip y extrae o arrastra y suelta los archivos en esa nueva carpeta en el Explorador de Recursos. Si usas WinRAR, también puedes arrastrar y soltar los archivos directamente desde WinRAR.
Esta hermosa escena fue creada por “EdwinRC” y puede encontrarse en Sketchfab.
Para importar la escena, simplemente arrastra y suelta scene.gltf (no el scene.bin) en la “Vista de Escena”. Alternativamente, puedes arrastrarlo y soltarlo directamente sobre un objeto existente en el “Esquema de la Escena”.
Mirar Alrededor
Para observar en la “Vista de Escena”, mantén presionado el botón derecho del ratón mientras mueves el ratón. Usa las teclas W-A-S-D para moverte hacia adelante, izquierda, atrás y derecha mientras mantienes presionado el botón derecho del ratón. Para aumentar la velocidad, desplázate hacia arriba, manteniendo el botón derecho del ratón presionado.
También puedes mantener presionado el botón de la rueda del ratón (mantén Alt en MacOS) para orbitar alrededor de la escena.
Posicionar las Luces
Las luces ahora parecen fuera de lugar para esta nueva escena.
Para moverlas a un lugar útil, selecciona una en el “Esquema de la Escena” y usa las manijas del “gizmo de traducción” para arrastrar la luz por la escena 3D.
Si no tienes las flechas para traducción, puedes cambiar el tipo de gizmo usando las siguientes teclas:
- G (“Agarrar”): gizmo de posición
- R (“Rotar”): gizmo de rotación
- S (“Escalar”): gizmo de escala
Toca dos veces G para alternar entre la traducción en espacio local y mundial.
También puedes usar la barra de herramientas en la parte superior de la Vista de Escena:
Propiedades del Componente
El objeto “Light” emite luz porque tiene un componente “light” adjunto. Puedes hacer la luz más brillante reduciendo la propiedad “intensity” del componente de iluminación:
Resumen
Aunque esta escena solo tiene unos pocos objetos, Wonderland Engine es excelente para renderizar muchas mallas diferentes. Consulta el Ejemplo de Optimización de Escena.
Puedes continuar agregando comportamientos personalizados con tus propios componentes de JavaScript.
O quizás quieras añadir soporte para controladores VR.