The Basics of XML3D
Displaying our first mesh
We have already established, that all our 3D content is placed inside an
To add some 3D geometry to our scene, we use the
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?
- the XML3D viewpoint by default is set at the origin of 3D space (x=y=z=0), looking at direction (0,0, -1), so in negative z direction.
- most meshes tend to be places around the origin as well
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
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
To declare the transformation, we simply use CSS 3D Transformations:
There's our teapot! Well, at least its silhouette.