The Basics of XML3D

Displaying our first mesh

We have already established, that all our 3D content is placed inside an xml3d element, so let's start with that:

====ENCODE <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://www.xml3d.org/xml3d/script/xml3d.js"></script> <script type="text/javascript" src="http://www.xml3d.org/xml3d/script/tools/camera.js"></script> <title>My very first XML3D teapot</title> </head> <body> ==== ====ENCODE </body> </html>

To add some 3D geometry to our scene, we use the mesh element. Just as with img, the mesh element links an external file containing the 3D geometry data. Here is one of these files for the good ol' teapot: teapot.json

Including the mesh is now fairly simple:

...That's not a teapot. There is just a red square on the upper half of the screen.

Here is, where 3D gets a bit complicated: The teapot is there, it's just that its position relative to your viewpoint is rather badly chosen.

Why is that?

So consequently: our viewpoint is right next to the surface to the mesh.

Let's change the viewpoint to get some distance to the object. XML3D provides the view element to define the viewpoint of the scene:

====MARK ====

Since our viewpoint looks into the direction (0,0,-1), we move along the z coordinate to get some distance, thus the new position (0,0,100).

Now we start to recognize our teapot, but it's still a bit high up, not quite inside the center. We could now simply move the viewpoint up a bit again. However, thanks to relativity, there is a second option: Let's move the mesh instead.

In order to move the mesh, we first have to wrap it inside a group element. The group element can enclose multiple mesh and other group elements and transform all of it's content.

To declare the transformation, we simply use CSS 3D Transformations:

====MARK ==== ====MARK ====

There's our teapot! Well, at least its silhouette.