INTERACTIVE Walkthrough on the WEB | Shapespark for Sketchup

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.

  I filled my 3D bathroom with Toilet Paper because I don't have enough in real life

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

  Art on Brick Wall (Blend Material) | Vray for Sketchup

You May Also Like

About the Author: Biên tập Viên

A guy who love writing and inspire message.
You cannot copy content of this page