If you’ve ever wondered how to build your own VR showcase room, this guide is for you. Building a VR showcase has many cool avenues to pursue – with a little scripting, for example, you could create your own virtual movie theatre, or a virtual poker table to hang out with your friends. Building a VR showcase is not difficult at all, and this guide will walk you through the steps.
For this guide, we’ll be using Archilogic and 3D.io – Archilogic can also turn your 2D floorplans into 3D, but it isn’t a free service – they do, however, offer your first floorplan for free. You can do that for this guide, but its highly recommended that you learn how to create your own 3D floorplan models.
- A 2D floor plan that will be converted to 3D
- 3D models if you wish to import your own furniture.
- Knowledge in A-Frame + HTML programming.
Converting a 2D Floorplan into 3D via Archilogic (For non-3D artists)
- Your first step is to create or acquire a 2D floor plan. You can do this yourself in any number of programs like RoomSketcher, SketchUp, Homebyme, etc. Alternatively, you could just grab one off the internet by Google image searching “2d floor plan”.
- Next you want to convert your 2D floor plan into 3D. Go to the Archilogic Dashboard, create an account, and order a Basic 3D Model – your first one is free, so make sure you really like your 2D floorplan.
- After you’ve uploaded your 2D floorplan, Archilogic will send you a 3D model within 24 hours, which can now be imported into 3D.IO creation kit.
(Optional) Exporting a 3D Floorplan from SketchUp for Archilogic / 3D.IO
- If you’re familiar with using SketchUp (formerly Google SketchUp), it’s quite easy to export your 3D floorplans for use in Archilogic. If you aren’t familiar with SketchUp, it’s really quite easy to use and I recommend learning it, if you want to create awesome 3D floorplans from scratch.
- So let’s say you’ve created a 3D floorplan in SketchUp, or downloaded one from the 3D Warehouse (a collection of user-submitted SketchUp models). Whichever you have, you need to change the units of the model to Meters so that Archilogic can read it properly.
- Next, you should probably also delete the upward-facing polygons of your roof, so that you can see inside your 3D model from above, while still having a ceiling when viewing the model from inside.
- In SketchUp, export your model as an OBJ file, which is the only filetype that can be imported into Archilogic. You should also uncheck “Export two-sided faces” in the Export options (this goes back to your roof).
- If you have an older or non-Pro version of SketchUp and cannot directly export as OBJ, you can export your model as a DAE file, and then import it into something like Blender to export as OBJ.
- In any case, once you actually have your OBJ exported, you can go to your Archilogic Dashboard and choose to import a 3D model.
Creating your VR Rooms
- Once you’ve got a 3D model / floorplan in Archilogic, you can go into the Archilogic Furnishing editor to drop furniture into your rooms. If you don’t like any of the furniture and want to import your own, you can also import 3D models from programs like 3D Model, SketchUp, Blender, 3ds Max. Archilogic has documentation on how to import 3D models from each of those programs.
- If you’re actually creating a VR Showcase, you can go ahead and create Camera Bookmarks in Archilogic – these will center the camera on “important” parts of your model, as if you were showcasing a house. But if you’re following this guide just to build your own VR room, the default first-person perspective is all you need.
- Once you’ve furnished / edited your 3D model to your liking, it’s time to turn it into a VR showcase.
- Go to the 3D.io AppCreator, and click “Make a Copy” in the top right – this will clone the current template and create a new one.
- In the box for “Import Archilogic scene”, paste your particular scene / 3D model string-code that you imported into Archilogic earlier. It will be automatically imported into the scene, along with all of your furniture edits, camera bookmarks, etc.
- Once your scene has been imported, begin fully customizing it to your liking – adding a “background image” (what it looks like outside the windows, basically).
- Now the real power of all this comes from the A-Frame / HTML editor. You access this by clicking the “Code” tab in the App Creator. This is where you’ll include things you’ve coded in A-Frame / HTML, such as a realtime Poker table, movie screen, etc. You can get really complex with this.
- If you want your VR Showcase to be “multiplayer”, so that for example, your friends can play at your Poker table or watch a movie with you, you’ll want a real-time multiplayer A-Frame code. You can build one yourself if you have enough expertise, or try one of the following multiplayer-enabled A-Frame codes:
With the exception of Lance.GG which is really advanced and more for actual game developers, a multiplayer AFrame will basically drop “avatars” into your VR Showcase for each person connected – they’ll be represented by ‘entities’ which you can typically customize in the AFrame code.
Read the instructions for each one to see which is best for you – typically you will just drop the A-Frame code into the 3D.Io Code section, but you may need to also run a server on your computer for your friends to connect to.