Today there are already countless possibilities to visualize 3D models in web applications like 3D configurators without users having to install annoying browser plug-ins. In the following article we would like to introduce the most popular 3D rendering technologies X3DOM and ThreeJS.
More and more website operators are deciding to integrate 3D content into their own websites and to look for suitable technologies. Often these are overwhelmed by the multitude of possibilities today and inevitably as themselves which of the possibilities best suits their individual situation. We would like to present two possibilities with X3DOM and ThreeJS a little closer and compare them with each other.
Basically, both technologies pursue the same goal. 3D content such as pictures or videos should be integrated as easily as possible into the “everyday network”. However, these two technologies have slightly different approaches.
X3DOM.
X3DOM is an HTML5 framework. To enrich your website with 3D, all you have to do is insert a JavaScript file and add a few lines of code to the HTML DOM. The following examples illustrate the quite simple handling of X3DOM:
The examples show that only a few lines are necessary to integrate a 3D scene into a website. Even more complex 3D scenes can be implemented quite easily with X3DOM.
X3DOM is based on a standardized and XML-based file format for 3D computer graphics (X3D). It can almost certainly be stated that X3DOM is an attempt to integrate X3D directly into the HTML DOM format.
With X3DOM, users also have the option of determining the corner points with a coordinate tag and the corresponding indices with an IndexedFaceSet tag in addition to the standard primitives (cubes, blocks), as it would be done in an X3D tag. It can even directly integrate an external X3D file with an inline element.
Scenes can easily be manipulated on this basis by adding, deleting or changing DOM elements. This can be done directly in JavaScript, just like with other DOM elements. In addition, most HTML DOM events, such as “onclick”, are also supported for X3D elements.
In contrast to X3DOM, ThreeJS is a classic JavaScript library and as such is not bound to a concrete 3D standard. Unlike X3DOM, the DOM is not extended to display 3D content. Instead, JavaScript code is used to draw in an HTML5 canvas. The following example visualizes a cube with ThreeJS:
In comparison to X3DOM, a lot more code is needed to create a 3D scene. Before anything can be displayed, a scene, a camera and a renderer have to be defined. In addition to the classic perspective and orthographic camera, there are several other types, such as a stereo camera for a stereoscopic view with 3D glasses. There are also several different renderers to choose from. In this scene a WebGL renderer is used. ThreeJS also offers a variety of other renderers, including some that support older browsers. Finally, to display the scene, the renderer uses a canvas element that must be added to the HTML document.
After the scene, camera and renderer are initialized, a cube is added. First you have to define the geometry and the material. Analogous to X3DOM, there is a pool of primitives that can be used easily at any time. In the example above, the BoxGeometry constructor is called, but all vehicles and faces can also be constructed separately. In addition to the geometry, surface material is also required for the object. ThreeJS offers many different prefabricated materials. Last but not least, users need a mesh that assigns the material to the geometry.
After everything is done, the object can be added to the scene. By default the objecs are placed in the position 0,00 in the coordinate system, which is also the position of the camera. Therefore an object has to be moved. In the example above, the camera is moved in the z-axis direction.
In order to rotate the cube, an animation must be created. Since ThreeJS was originally developed for online games, the rendering loop is a fundemental part of the code. The rendering loop renders the scene approximately 60 times per second. In each frame, the cube is rotated a little further.
Compared to the first example, the result is not an interactive scene. The cube rotates by itself and cannot be influenced from the outsite. To create an interactive effect similar to the X3DOM example, additional user interactions would have to be implemented.
Another difference to X3DOM is that this example does not contain shadows. These can be added by using a so-called shadow map.
Conclusion:
With X3DOM and ThreeJS, users have two very simple ways to integrate 3D content into their website. However, the two technologies differ greatly in the way they are implemented.
Which one is better suited depends on the specific application. X3DOM delivers fast and good results and is therefore the perfect choice when 3D content needs to be quickly inserted into an HTML page. For more complex applications, ThreeJS is usually the better choice. The setup takes longer, but offers more customization options and can render the 3D scene directly without going through the DOM.