This tutorial shows how to use the 3D Object Story template to create a story with 360 photos, music and audio narrative.
More Patches tutorials can be found from https://techstart.github.io/.
Getting started
First, go to https://patches.vizor.io/templates where you’ll find the project named 3D Object Story.
The Start button begins the story and the Next buttons go to the next scenes. In the last scene the End button goes back to the Start screen.
Each scene has their own 3D object, which can be replaced and moved around.
To edit the template, click on anywhere in the experience and it will show icons in the middle. Click on the Pencil icon, which is the Edit button.
This brings you to the edit mode, where you can customize the project.
First, click on the Duplicate button at the top left corner on the toolbar. This will create a copy of the project for you to work on.
To switch between the Build and Program modes, you can either press Tab on your keyboard, or click on the Build and Program buttons on the toolbar.
In Program mode you will see the patches that contain all the content in the project. Patches are modules, which together combine a computer program. In this case the program is our template, which switches between four scenes.
In the middle are the patches for all the scenes. These purple patches are called nested patches, which means they have more patches inside of them. The blue “Switch Scenes” patch shows the scenes and switches between them.
To look inside the Scenes, click on the edit button on the nested patch (pencil icon).
After entering a nested patch, you can go back to the previous stage by clicking on the patch names in the Breadcrumb at the top right corner of the screen, below the toolbar.
More tutorials about Vizor basics can be found at the Techstart Github.
Changing the title texts
When you enter the Scene 0: Start screen patch, you’ll see the contents of that scene.
When you made a duplicate of the project, the title text may have disappeared from the view. You can get them back by reconnecting the blue text boxes to their patches.
To change the title and description, simply type your own text into the blue text boxes.
To view your project from the VR camera view, click on the camera button at the bottom right corner of the screen, or press V to switch between the VR and editor cameras.
Switching to VR camera lets you see how the scene would look like in a VR headset. Press Tab on your keyboard to hide the patches and see your scene.
Go back to the program view with Tab to see the patches. When you click on the Project Title or Project Description patches, you can see arrows appear in the scene. These arrows are the move tool, and you can move the text around to a place you like. Hide the patches again to click and drag the arrows.
If you cannot see the move tool in build mode, try to press H on your keyboard. This hides or shows all the tools in the view.
Changing the background color
To change the background color of the start screen, click on the edit button on the Background Sphere patch.
Inside you’ll find a Color picker, where you can change the color. Above it is a Texture patch where you can also upload your own texture image.
Replacing the 3D objects
To help with navigating the scenes, there are key shortcuts for each scene:
J= Start screenK= BeginningL= MiddleP= Ending
Press K to to see the Beginning scene with the green landscape and the Next button.
To change the 3D objects, go to the Scene 1: Beginning patch. There you can see several nested patches connected to a Scene patch.
- In the Sky patch, you can change the color of the sky from the color picker patch.
- In the Lighting patch you can change the intensity and color of the light.
- The Floor patch has a color picker for changing the ground color.
All other patches below the Floor patch are the 3D objects in the scene.
Here is what a nested patch with a 3D object generally looks like.
Texture
To enable texture, connect the texture patch to the texture slot in the material. To add you own texture file click on the pencil icon on the texture to open the image file window. Here you can choose an image from the Vizor library, or upload your own. To upload your own image make sure you are logged in to your account and click on the Upload tab. Click on Browse to look for your own texture image on your computer, select it and click upload.
Color
Change the color of the object with the color picker
Mesh
The mesh patch combines the 3D object and materials together.
- object3d: this is where more complex 3D objects would connect, like a model of a house or a car.
- geometry: simple 3D geometry objects like a box, cylinder or sphere
- material: the material for the object
To add new 3D objects to the scene, make sure you are in the Program view and in the Scene 1: Beginning patch.
If not already open, click on the Patches icon on the top right corner of the toolbar.
This open a window with a list of patches for you to use.
Here you can find 3D objects from any of the drop down menus labeled as “OBJECTS”.
Open any of the menus you’d like to try, and drag and drop an object to the program view.
If the patch you dropped in is minimized, simply click on the arrow to open it and then you can connect it into the scene.
The objects usually appear in the middle of the scene, right on top of the camera, so it is good to view it in the Editor camera (V) and move the object to a better place.
To select a 3D object, click on it and drag it around with the move tool arrows. If the arrows don’t appear, press M to activate the Move tool.
Other 3D object tools are Scale and Rotate. These can be found at the top left of the toolbar, next to the Duplicate button.
Hotkeys for these tools are M, S and R.
With Scale you can change the size of an object, and with rotate you can turn it in different directions.
Drag and drop any items you like into the scene to create your own scenery, and you can delete the template objects out of the way.
Adding audio tracks
Adding audio works the same way as adding images in the previous step of the tutorial.
Go to Root in the Program view, and go inside the Audio Control patch. There are three patches for music files, and three for audio narrative files if you have recorded speech.
To add music to the first scene click on the Source button on the blue Music1 patch.
This brings up a similar window as the image uploader, except for this you upload a music file. The second scene music is on Music2 and the ending is Music3.
To make the audio files work on most browsers and devices, it’s recommended to use .ogg or .m4a file formats. You can convert audio files to this format with free audio editor software, like Audacity for example.
Freesound.org is a good place to find royalty free music and other audio for your project. The music in the template are from there.
Scene timer
In the Root of the Program view, there’s a patch called Timer. This will change the scenes automatically without the viewer having to press the next buttons.
To enable or disable this, click on the On/Off button.
Under the On/Off toggle are three patches for the scene lengths. In these you can write numbers as seconds. Those seconds tell how long the scene will show before it switches to the next one.
For example, if you have a voice recording that is 50 seconds long, you can write that number on the timer and it will change the scene when the audio has played.
If you use the timer and want to disable the Next buttons, you can do so by disconnecting them from their scenes.
Publishing your project
To publish your project you have to be logged in to your account.
Click on the Publish button at the top right corner of the screen, and it will ask you to give your project a name and if you want to publish it as a Public or Private project.
It is good to publish your work after making major changes to the project, as it works like saving. You can then continue editing without losing any progress in case if the browser crashes for example.
After publishing, your project can be shared anywhere by simply sharing the URL.
Idia Erharuyi (Pixelface Oy/Vizor.IO)
[email protected]
Feel free to check out our public slack for more conversation about Patches!