Interactive 3D Graphics using x3dom

Interactive 3D Graphics using x3dom
John Denker

1 Getting Started with 3D Graphics

By far the easiest way I have found to integrate 3D graphics into a web page is by using the x3d with x3dom. See reference ‍1.

Specifically, x3d is a well-known and well-standardized language for describing 3D shapes, closely related to the earlier VRML. The x3dom package consists of a lot of javascript plus some css that allows you to render x3d in a browser.

Getting started is as easy as it possibly could be. Start with a working “hello world” example, either a .x3d file or a .xhtml file. Then edit it by hand to add features.

You can view your .x3d results using the view3dscene program, and view your .xhtml results using a web browser.

To incorporate 3D diagrams into an existing web page requires some fussing, but the process can be automated, as discussed in section ‍3.

I’ve tried a lot of other approaches, but all the others were

Buggy and poorly supported.
Poorly documented.
Ridiculously difficult for non-experts to use for simple projects.
Too low-level to be efficient in terms of programmer time for nontrivial projects.
Difficult to incorporate into web publications.
Difficult to integrate into my existing toolchain.
Or all of the above.

2 An Example

Figure ‍1: CIE xyY Color Space with White Point; Interactive 3D

Mouse-Drag	:	Rotate
Ctrl-Mouse-Drag	:	Pan
Alt-Mouse-Drag	:	Zoom
r	:	Reset view

Figure ‍2: CIE xyY Color Space; Interactive 3D

3 Integrating with Other Tools

To use it as a diagram on a web page, splice the x3d code into your web page and use x3dom. This is mostly straightforward, except for the fact that x3dom insists on XHTML, which is a dialect of XML, rather then straight HTML. Specifically:

In HTML tags are case-insensitive, but XHTML cares about case. <Div> and <div> are different tags in XHTML.
In XHTML almost all entities must be given in numerical form, e.g. © rather than ©. Either that or just use the unicode symbol © directly.
XHTML requires you to explicitly close all tags, whereas HTML forbids explicitly closing some self-closing tags.
The DOCTYPE declaration is different.
You have to declare the xmlns (XML namespace).

You can easily deal with all those issues by reading your html into perl using HTML::TreeBuilder and writing it back out with the appropriate options. Then you can splice in the x3d code.

4 References

: 1.
x3dom : Instant 3D graphics the HTML way.
https://www.x3dom.org/

[Contents]