Wonda comes with a set of 3D Rooms to host your sessions that are accessible by simply choosing one from the editor. But you can also import your own 3D environment.

Overview

You can import any 3D room into Wonda that is created using any 3D software (such as Blender or Unity - read our dedicated article about optimization) as long as you use the .glb file format.

To edit your scene you will need to use a freeware called Spoke (powered by Mozilla).

With Spoke you will be able to:

  • Define the 3D Room's default size and default position relative to the viewer when entering the room

  • Add 3D objects with a fixed position

  • Adjust the 3D Room’s lighting

  • Adjust or add a custom skybox

  • Define the walkable area (floor plan)

Step 1/3: Import your 3D Environment in Spoke

1. Check that your 3D model follows the following recommendations:

  • Max Poly count: 50k (Decimate your model if needed. See how to do in Blender)

  • Max different Texture count: 25k

  • Max Texture Resolution: 4K (higher resolution will not work on mobile devices)

  • Material number: reduce the number of material as much as possible if you need to run on mobile devices

2. Export your model as .glb and make sure it's working by testing it in a viewer.

3. Go to Spoke, create an empty project (or remove the default content) and drag and drop your 3D file

NB: For more information on how to optimize your 3D room, you can read this really interesting blog post by the maker of the Hello WebXR experience

Step 2/3: Set the position, orientation and scale of your 3D room

After importing your 3D room in a new project in Spoke, follow these guidelines:

  1. Import a 2D image to simulate where the Virtual Screen will be positioned after you import your 3D room into Wonda. Scale the image to reach 4 meters in width and change its position to: (X:0,00 Y:1,50 Z:-3,00).

    Note: it will not be visible in your Wonda project, you can use any sample image

  2. Move your 3D Room around this image to make sure the virtual screen is in the desired position (against a wall for example).

    Note: don't move the screen as it's only a helper here, move the room around instead.

  3. Regenerate the Floor Plan to match the room's new position by clicking on Floor Plan and Regenerate with default options (see more details here).

    Note: You can add interactive 3D objects directly in Wonda: More information here.

Step 3/3: Import your 3D room From Spoke to Wonda

Once the Room is correctly prepared using Spoke:

  1. Go to file > export as .glb

  2. Create a thumbnail file (.jpg or .png) using your usual screenshot tool (it will be displayed in the room library)

  3. Open Wonda, go to your project library (as shown below), simply drag and drop the two files in the media library and select it as the main 3D Room of your Experience.


Add a custom 360 image as a 3D Room

Just select your desired .jpg equirectangular file and it will be used as the main background for your experiences. Users will be able to zoom in/out of the Main Screen using the keyboard arrows on desktop, or with the controller in VR.

Did this answer your question?