Create a X3DOM (WebGL) site with Sketchup easily and free

Tutorials
1

Like some of you might already know, ever since HTML5 was introduced a few years ago by the World Wide Web Consortium (W3C), which is the main international standards organization for the World Wide Web, it has become possible to embed 3D models natively inside websites in such a way that most web browsers now can render fully textured 3D scenes without the help of external plugins. WebGL is the 3D API of choice that does this. All of the major web browsers can now display any WebGL material by defult. X3DOM is a backend that basically renders X3D models inside a WebGL wrapper.

To demonstrate how a Sketchup made model will look like being rendered in real time 3D inside a web browser, I have created a Sketchup model of a very simple one room building, with only a few textures and pictures. This Sketchup model was specifically designed to be navigable in a first person perspective mode, just like a FPS game. So to show you the demonstration, here’s how my test example of my 3D model which I am naming “simple_building” looks like in Sketchup:

Now, this his how my simple_building Sketchup model looks like in a web browser after going through a 3 step conversion and some copy and pasting of code snippets:

As Full Screen Webpage: FULL SCREEN LIVE EXAMPLE

As a 40% x 40% iFrame Page: 40% x 40% iFRAME LIVE EXAMPLE

To accomplish this, you will only need 3 different apps:

  1. Sketchup (Free or Pro will do)
  2. BS Contact 3D viewer/converter
  3. Notepad (If using Windows, you already have this)

The Sketchup “simple_building.skp” model download: simple_building.skp (1.1 MB)

Now, if you like the above X3DOM demonstration and would like to take a shot at practicing on converting a Sketchup model to X3DOM, then by all means please follow the below tutorial. Before you start, just for the sake of understanding this tutorial more efficiently, I have made available the actual simple_building Sketchup model used in the above demonstration for download. For just this instance and understanding of this tutorial, please download my simple_building.skp Sketchup model and use it to practice the tutorial. Once you have downloaded both the BS Contact 3D viewer and the simple_building Sketchup model and have ready your copy of Sketchup and Notepad ready to go, then here’s my tutorial on converting my simple_building Sketchup model to a X3DOM webpage:

Sketchup Model “simple_building” to X3DOM Conversion Tutorial

Remember, after you get your first practice run with my simple_building.skp model, you can always try this method of conversion to X3DOM on your own made Sketchup model

UPDATE: So far this post has 100 views, but no replies yet. If anybody has any questions, concerns or opinions, please feel free to let me know. Also, if anybody of you here managed to duplicate my X3DOM demonstration with your own Sketchup made model or at least a modified version of my own “simple_building.skp” model, by all means please post reply a web link to your X3DOM creation!

1 Like
2

My tablet says cannott open file

3

First of all, thanks for being the first to post a reply on my thread. Anyway, I am afraid your going to have to come up with a bit more info than just “My tablet”, it’s just too vague. Is it an android or apple tablet? If it’s android, what brand and model tablet is it? What version of android does it have?

You see, since WebGL is a relative new technology, most older phones and tablets are not compatible with WebGL due to obsolete hardware. Now, the good news is that most mobile devices released within the past 2 or 3 years are pretty much able to handle HTML5 and it’s 3D baby WebGL.

A case in point: My cellphone is a Virgin Mobile LG Volt. It came out in the market a little over a year ago. It runs Android 4.4, has 1gb of ram, 8gb of internal space and it’s processor is quad core. It’s a fairly decent mid-range phone that cost me only $142.00. Anyway, here’s my phone in action displaying the very same “simple_building” X3DOM scene from this very same thread:

My Android Phone showing the simple_building X3DOM webpage

4

this link refers to a non available host, which may be the reason why nobody further reacts!

“Sketchup Model “simple_building” to X3DOM Conversion Tutorial”