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 cuando inicias el editor por primera vez.
Elige la plantilla “VR”.
Se te presenta un proyecto básico que tiene teletransportación VR configurada. ¡Bastante aburrido! Deberíamos agregar un recurso aquí.
En la parte inferior izquierda ves el “Explorador de Recursos”. Muestra los contenidos del directorio del proyecto. Todos los recursos para el proyecto deben colocarse en este directorio.
Ejecutar en el Navegador
Para empaquetar el proyecto y verlo 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, obtenemos 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 elimínalos 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 mantenemos 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, agregaremos una escena que ya tiene un piso, 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”, finalmente “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.
Agregar 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 mirar alrededor 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 sigues manteniendo 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 en 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
Doble tap G para alternar entre traducción en espacio local vs 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 comportamiento personalizado con tus propios componentes de JavaScript.
O quizás quieras agregar soporte para controladores VR.