Categories
Tutorials Unity Vectorworks

Viewing 360° Design Options in a Browser with Unity

Speed up your client approval process with interactive 360° browser renderings. Instead of making several separate 2D renderings to show alternate design options, send your client a link to view a browser-based app that renders in real-time. They can click buttons to turn various design options on and off, all in 360° degrees!

Unity makes scripting visual. It’s easier than you’d think to set up button interactivity and build your very own webGL application.

Warning: This webGL app will not work on mobile devices. You’ll have to instruct clients to view on PC.


 

Export from Vectorworks

Orient the entire model on the internal origin & export as .fbx in a few parts. The materials import easier into Unity when the .fbx file isn’t too complex or large.

There’s some debate about .obj being a better option. It’s a more complex process but I highly recommend .obj to keep your web app as optimized as possible. If you choose to put in the extra work, here’s the Vectorworks .obj export process.

You can also export/import via Cinema 4D.

Get Set up in Unity

Install Unity Hub if you don’t already have it. Then install the latest version of Unity 2020 with the Android module. This tutorial uses Unity version 2021.1.1f1. Login/register the appropriate license if prompted (free for personal use).

Create a new Universal Render Pipeline project. In File>Build Settings, switch to WebGL platform.

Scenic Mentor 3 Icon

Import your 3D Model

Drag your 3D model export(s) onto the Assets Folder in the Project window (or right-click in the Assets window>Import New Asset).

Create a new basic scene & delete the Main Camera. Then drag your imported 3D model prefab object(s) into the hierarchy, with the blue box icon. If using .obj, update the X Rotation Transform in the inspector to -90 for each object and scale it down to .001, .001, .001.

If using .fbx or .c4d, find the CINEMA_4D_Editor game object in the hierarchy (this messes up your camera) and turn it off in the inspector. Do this by unchecking the box at the top left of the inspector window.

Here’s some video tutorials for three different import approaches:

To apply materials, click on the 3d model pre-fab object in the Assets window (it has a blue box icon). In the Inspector> Materials tab, change Location to ‘Use External Materials (Legacy)’ & click Apply.

If you are finding some objects that are not rendering any texture on one or more sides, you likely have a normals issue. Check out my separate post on importing materials and fixing normals.

 

Scenic Mentor 4 Icon

Set up Camera 

In the hierarchy, right-click and add a new camera object. With the camera object selected, manually set the position to the desired starting location in your scene. Increase the Far Clipping Plane to work with the scale of your model to make sure the farthest objects in your scene render in the camera.

Right click in the Assets window to create a new C# script. Name it ‘myCameraController’ (crucial), double click to edit, and copy/paste the below code:

using UnityEngine;

public class myCameraController : MonoBehaviour
{
	public float wsadSpeed = .15f; // WSAD Movement
	public float mouseSensitivity = 0.15f;   // Mouse Rotation Speed

	//Define variable to store previous mouse pos:
	private Vector3 mousePositionPrevious = Vector3.zero;
	private float totalRun = 1.0f;

	void Update()
	{
		//Move around scene with WSAD keyboard input:
		float xAxisValue = Input.GetAxis("Horizontal") * wsadSpeed;
		float zAxisValue = Input.GetAxis("Vertical") * wsadSpeed;

		transform.position = new Vector3(transform.position.x + xAxisValue, transform.position.y, transform.position.z + zAxisValue);


		//Update camera orientation if mouse button is down:
		if (Input.GetMouseButton(0))
		{
			//Calculate mouse movement and scale it by camSens:
			Vector3 mouseTranslationScaled = (Input.mousePosition - mousePositionPrevious) * mouseSensitivity;

			//
			transform.eulerAngles = new Vector3(transform.eulerAngles.x + mouseTranslationScaled.y,
				transform.eulerAngles.y - mouseTranslationScaled.x, 0); ;
		}
		mousePositionPrevious = Input.mousePosition;
	}
}
  

This script allows the user to rotate the camera with their mouse and move around in the scene with the WSAD keys. Save, close, and drag this script onto your Main Camera to apply. Press play to test it out in Game View.

 

Scenic Mentor 5 Icon

Add UI Canvas

In the hierarchy, right-click and add a UI > Canvas object. Leave the Render Mode set to ‘Screen Space – Overlay’ and set the Canvas Scaler UI Scale Mode to ‘Scale with Screen’. Set the Reference Resolution to 960 x 640.

Now, let’s add two buttons. Right-click in the hierarchy and add two UI > Button game objects. They will automatically be added as children to the existing canvas. Inside each Button object is a text object. I’m going to edit the text in each so that one button says ‘Option 1’ and the other says ‘Option 2’.

Double click on one of your buttons and switch the Scene view to 2D to manually position your buttons. Manually position each Button object in your scene. It helps to have the game view open as well to see how they’ll look within the camera.

Scenic Mentor 6 IconClick Interactivity

Now we have to tell Unity what to do when the user clicks on the buttons. When the ‘Option 1’ button is clicked, we want a specific set of game objects to turn on, and any game objects associated with ‘Option 2’ should turn off.

Do this by adding ‘On Click ()’ events in the inspector with the ‘+’ icon. Drag in any game objects that you want to turn on or off when the button is clicked. Choose ‘GameObject.SetActive(bool)’ from the Function dropdown and check the box to turn the object on, or uncheck to turn the object off. It’s that easy!

Here’s what the On Click() info looks like when the Option 1 Button is clicked:

Now apply the opposite GameObject.SetActive ‘On Click ()’ events for the ‘Option 2’ button. Press play to test them out in Game View.

Scenic Mentor 7 IconBuild Your App

In Build Settings, add the current scene into the list, delete the sample scene, and click ‘Build & Run’. Save into the main directory (not in Assets folder). I like to put mine into a folder named Builds.

Unity will automatically open the app in your browser with a localhost link. This link is NOT SHARABLE. It only works for you.

In order to gain a link that you can share with clients you’ve got to host your app somewhere. Here’s a few solutions:

  • Upload to a free site like Simmer.io . You can choose to add to your personal website using their embed code.
  • Host for free using Github Pages.
  • Host with a free Firebase account or similar cloud hosting services like AWS, etc.

 

 

I hope this basic workflow will give you the confidence and the relevant info to start building interactive real-time renderings with Unity. Subscribe to my youtube channel for more tutorials on Unity and WebGL.

 


You May Also be Interested In...