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:
- Sketchup (Free or Pro will do)
- BS Contact 3D viewer/converter
- 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:
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!