Navigable Building Made With PreFabs Parts + WebGL Scene

SketchUp Gallery
1

Have you ever searched the Sketchup warehouse for any type of building? You know if you input just the search term “building”, you will get a whole lot of,…well,…building models and other things like it. And most of them are good in their own way and purposes. Now, out of all of those building models, how many of those are a literal and true representation of an actual building in the sense that the Sketchup building model can be navigated via first person perspective all throughout the inside of it?

And what if the building model is composed of multiple floors (or levels), would it have maybe some stairs that can be used to reach the rest of the floors? Or better yet, what about an elevator? I suppose if I really looked well in the Sketchup warehouse for this type of building model, I will be able to find some good ones.

Or I can just simply create my own version of one.

To make a long story short and get to the point, allow me to quickly introduce my first contribution to the gallery. So here it is, a little and humble creation of mines which I call for a better lack of a name, 5 Floors Building. I know, it’s a dumb simple name. But anyway, here’s how it looks like in Sketchup:

NEW NOTICE: If by any chance you can’t see the images below, then just click on the blank images so it can open the image directly and be able to see it.

I created this multi level building model by first making a series of prefabs modules that were all specially designed to accurately inter-connect with each other, pretty much like a 3d puzzle. This way I greatly reduce the tedious and repetitive task of making so many of the same model parts. Whenever I need to use the same particular prefab again and again, I just copy and paste it over and over. Here’s the 5 Floor Building model all broken up in it’s prefab parts:

The prefab floor modules:

These here are the stairs prefab modules:

Yep, it is what it looks like. Here’s the prefab of the elevator well:

Now, even though I did my building with only 5 floors, in reality there is no limit to how many floors it can have. As an example, here is one with 10 floors:

Going back to my 5 Floor Building model, I have decided to share something special concerning this model. Would you like to look and walk inside and outside of the 5 Floor Building in an online 3D scene setting? You can even operate a working elevator to get to the top floors! Well, I have just that…You see, I converted this Sketchup model to an interactive WebGL 3D webpage!

So yea, please be my guest and check it out here:
http://titopr.rf.gd/3d/5_Floor_Building.html

1 Like
2

@sdc_pr1
Just curious, what file format does the WebGL page use for the model, and how did you go about exporting to this format?

3

Sorry, but I can’t view any of the images either direct in the forum page, or with R-click ‘Open image in new tab’. Using latest Chrome browser.

4

@Centaur: I am not sure if the question of what 3d format WebGL uses really applies in the way WebGL works. To be honest, I am not really all that familiar with the inner workings of WebGL. All I now is what the official site of the Mozilla Developer Network describes it as and I quote: “WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 canvas elements.”

As for your other question, what I did was after I created the Sketchup building model, I exported it as a Collada (.dae) format file. Afterwards, that same Collada formatted model I imported it in to another program by the name “Coppercube”, which is an all-in-one 3D game engine. It is very easy to learn to use, no programing is necessary and is capable of publishing to several different kinds of platforms, including WebGL. Coppercube is not freeware, but it does have a free unlimited 30 day trial for first time users.

Once I have the Collada building inside of Coppercube, using Coppercube’s built in tools, I go ahead and start adding some graphical eye candy like diffuse light mapping, reflective materials, transparent textures. As for things that move like the elevator, that can be done using some of the other non-programing tools from inside Coppercube. Once I am done, I first save my work in the native Coppercube format in a chosen folder, then using Coppercube’s platforms publisher, I select WebGL output, and I just publish it to WebGL html file along with it’s dependent file folders. Afterwards, upload your WebGL creation to your hosted web server account, make note of the exact URL of the WebGL page, and your done.

If your interested, here’s the official Coppercube site where you can download it from: http://www.ambiera.com/coppercube/

5

I see what you mean. Try using Microsoft Edge or Firefox to see what happens.

6

None of your images are visible, regardless of the browser used. I tried Firefox, Chrome and Edge.

7

I think what might be happening is that since I am using a free hosting service provider, the posting of remote linking of images being hosted are being blocked. Normally, this is how an image is posted in a forum page:

[IMG]http://titopr.rf.gd/3d/pics/Image1.jpg[/IMG]

So what I did was I added a direct URL link to each image, thus making each posted image clickable to it’s own, direct image file like shown here:

[URL=http://titopr.rf.gd/3d/pics/Image1.jpg][IMG]http://titopr.rf.gd/3d/pics/Image1.jpg[/IMG][/URL]

So for those of you that might be having trouble seeing the images, just click on where they are supposed to be and it should take you to them directly. Please know if it works for you now…

8

When you want to include a linked url in the future, the most efficient way to do this is to simply click the hyperlink icon and insert your link in the provided box. The hyperlink icon is the 4th from the left in the reply box.

9

I can now see them directly in Chrome. Thanks for fixing that.

10

I could see everything clearly. This is so cool. I like how the door opened by itself, and that you can push the elevator buttons! I wish the speed were more variable, but it’s still such a neat project!

11

I am very glad you like my Sketchup/WebGL effort. The doors seem to open by themselves, but only if you click on them with the mouse’s pointer, that’s the way it was setup. Oh yes,…the elevator buttons, setting them up with the elevator commands inside Coppercube was very tedious and frustrating since it was my first time in doing this. As for the speed of the elevator, actually, it can be adjusted to any speed you want, the variables are unlimited in this regard. I have the elevator moving at 5 seconds between start to end regardless how many floors are in-between. If you are interested in trying out WebGL with Sketchup, I recommend Coppercube.

1 Like
12

I finally went ahead and uploaded the .skp file of this building model up on the 3D Warehouse. You can find it here:

https://3dwarehouse.sketchup.com/model/884f47e8-3fa3-482c-b1b3-a2c28b2f8446/Fully-navigable-building-with-5-floors-made-up-of-prefab-parts