The Basics of XML3D

Jump to bottom Edit New page

lachsen edited this page Feb 27, 2013 · 25 revisions

Introduction

This is a tutorial that leads you through the basics of XML3D. What we will cover:

3D geometry
Viewports
Transform Hierarchy
Surface appearance
Light sources

Requirements of this tutorial:

Basic understanding of HTML, CSS and JavaScript

Provide correct XHTML

XML3D via xml3d.js currently only works in XHTML documents. So the first step is to make sure you provide correct XHTML:

Start your web document with <?xml version="1.0" encoding="UTF-8"?>, followed by <html xmlns="http://www.w3.org/1999/xhtml">
For static files: use the .xhtml file extension
For dynamic files created by a server: send the files with the MIME-type application/xhtml+xml

First steps

XML3D is an extension to HTML. Just as you write HTML for text and images like so:

<p>
   This is some generic paragraph <span>with a twist</span>
   <img src="yayColors.png" alt="and an image" />
</p>

You can write XML3D for 3D content:

<p>Following this paragraphs we will break the second dimension!</p>
<xml3d xmlns="http://www.xml3d.org/2009/xml3d" >
   <mesh src="yayVertices.xml" />
</xml3d>
<p>... did you see it?</p>

About XML3D inside of XHTML:

All XML3D elements inside of XHTML use the http://www.xml3d.org/2009/xml3d namespace
All 3D content is declared inside an <xml3d> element, which defines the canvas through which the 3D scene is displayed.
The <xml3d> element is displayed as an inline-block element like <canvas> and can be styled exactly the same way.