What’s happening ladies and gentlemen,
this is Minh from Architecture Inspirations
Today I’m going to show you how to create
an Interactive walkthrough on the web
using Shapespark for Sketchup.
Let’s get started
First of all, if you are new to this software, make sure
to check out my tutorial on Shapespark to get started.
In the new version 1.6.2 of Shapespark,
you can add extensions to your render
to make it more interactive
when it’s uploaded to the web.
To do that,
go to the Viewer tab,
at the bottom you will see the Extensions section.
Click on the plus button to add an extension.
And you will see a new window pop up.
Here you can choose the extension type
which includes HTML Label, audio, and material picker.
Let’s start with the HTML Label
Here you can add a Name.
I will embed a video here, so I will name this as "Video”
Next click this plus button to add an anchor.
Here you can see several options for the anchor.
First I’m going to set the position
by clicking on a spot in my scene.
To change the position,
you can click on another spot,
or adjust these XYZ values here.
You can also adjust the size of the icon here.
Instead of using icon, you can also use text,
which can be a question mark,
a number, or anything you want.
I will keep it as the icon.
If I click here, I can choose from a collection of icons.
I will use this YouTube icon here
because I want to embed a video.
Lastly, it’s the content of the HTML label.
You can type anything here,
and it will appear as text when you click on the icon.
But what’s cool about this,
is you can embed a video or a website.
For example, I will go to the video that I want to embed,
which is this tutorial here I made on Shapespark.
Then below the video, click on Share,
Embed, and copy this code here.
Then go back to Shapespark
and paste it in the content of the HTML Label.
Now you can click on the icon again to open the video.
There you go, pretty cool huh.
I will create another HTML Label
And place the anchor here on this microwave.
And here I have a website
with information about the product.
Now of course I cannot simply paste
the link of this website in the content area
because it will only show up as text.
So I have to embed it.
To do that, first go to this website here.
Now copy the URL of the website we want to use
Make sure that the URL uses the type of protocol,
otherwise it will not work.
Then I will then paste the URL here.
I will also enable the scrollbar
so I can scroll up and down the website.
Then click Generate, and copy this code,
and paste it in the content area.
There we go,
now I can click on this icon and the website will pop up.
As you can see,
HTML labels are a great way of providing the viewers
with more information about your model.
Now let’s move on to the next type of extension,
which is Audio.
This is quite simple to use,
just create an extension, change the type to Audio.
I want to create some sound effects,
so I will name this as Sound Effects.
Now I’m going to use the Youtube Audio Library,
which you can get to by following this link here.
Then I will go to sound effects
and find a wave sound effects.
This one sounds pretty good.
Then there’s this download icon here,
I will right click that, and copy the link address,
then paste it in the URL section of the Audio.
You can also set this to Autoplay by checking this box.
Now Press okay.
There we go,
you can hear some sound effects in the background
Remember you can always
add multiple audio for your scene.
Just create another audio extension,
and use the previous method to add a song you like.
Also, you can also use these icons here
to turn the audio on and off individually.
Pretty cool huh?
Finally it’s the Material Picker.
I want to use this for the flooring material
so I will name it as Floor.
Next I will click here,
choose the material that I want to replace.
Which is this wood floor material here, press Okay.
Then for the materials to pick,
I’m going to click this button
and add a material in the scene that I want to use,
such as this one for example.
Now I can click here to add an anchor,
I will also change the icon to this color picker symbol.
Finally I can click on a spot in my scene
that I want to place the icon.
Then press okay, and test it out.
Currently, you can only use materials
that are already in the scene.
For additional materials,
you would have to go back to your Sketchup model,
and create a “material pool”.
For example, here I will create a small plane
then create a simple color material for the cabinets.
Next I will create another plane for a concrete material
which I will use for the floor.
An important thing to note
is that the size of the plane
has to be bigger than the size of the texture,
otherwise it will not work correctly.
For example,
the texture size of this concrete material is 5’ by 5’,
while the size of this plane is only 2’ by 2’,
so I need to make it bigger to say 6’ by 6’,
then it will work correctly now.
Now I will export the model as an update.
Remember that when updating the model,
you have to bake the scene again
to make it look correct.
But first
I will make sure that the model has been updated,
there it is,
you can see that the material pool
has been added to the scene.
Now I will bake the scene again.
And after that,
I can edit my material picker extension by clicking here,
then I will navigate to the material pool,
and click here
then select this concrete material to add it to the list.
Let’s go test it out,
There we go, looks good.
And I will also add another material picker extension
for the cabinets
and add this material to the list.
and place the anchor here,
then name it Cabinets,
There we go. Once you’re happy with what you have,
just save the scene, and upload it to the internet.
And now you can share this simply by using this link
As you can see,
with the new extensions feature in Shapespark,
you can improve the viewers’ experience
when they walk through your scene.
This just make Shapespark even more powerful
since the main idea of the software
is to easily share your work using only a web link.
And there you have it, that’s all for today,
leave a like if you enjoy the video,
comment below and let me know what you thought,
stay inspired guys, and I will see you,
next time