-
Notifications
You must be signed in to change notification settings - Fork 25
Getting started
lachsen edited this page Feb 27, 2013
·
25 revisions
To make XML3D work, all you need to do is include the xml3d.js library in your XHTML document.
Just make sure, that you include xml3d.js as the very first js library in your document, like so:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Your usual header stuff, but NO <script> -->
<script src="http://www.xml3d.org/xml3d/script/xml3d.js"></script>
<!-- Other <script> tags -->
</head>Important things to remember:
- xml3d.js currently only works in XHTML documents
- Always add the xml3d.js library first for all JavaScript libraries! (Yes, even before jquery.)
XML3D is an extension to HTML. So 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>The very basics of XML3D:
All XML3D elements inside of XHTML use the http://www.xml3d.org/2009/xml3d namespace
All 3D content is declared inside an element, which defines the canvas through which the 3D scene is displayed.
Beyond that it's all about understanding the set of XML3D elements. Good news: there are only few of them. Currently less then 25.
** How to learn XML3D further**:
- Tutorial: XML3D - the basics
- Browse our XML3D examples and look at the source code
- Read the specification
If a standard navigation mode is sufficient for your web application, you can include the camera controller that comes with xml3d.js:
<script src="http://www.xml3d.org/xml3d/script/xml3d.js"></script>
<script src="http://www.xml3d.org/xml3d/script/tools/camera.js"></script>