43
X3DOM Documentation, Release 1.4.0
new tag called <indexedFaceSet>, which can be used for creating arbitrary kinds ofgeometry.
The example discussed here is alsoavailableonline. Moreover,there are already lots ofotherX3DOMexamples. Just
try them out, and even more important, have a look at the source code tolearn what’s going on.
Please note, that there are slight differences between XHTML and HTML encoding: e.g. the latter does not yet work
with self-closing tags but requires that tags are always closed inthe form</tagName>.
If you ever have problems, please first check the Troubleshooting section of this guide, much helpful information is
collected there.
1.2.2 Styling with CSS
This tutorial guides you throughthe process of using CSS with X3DOM. In orderto demonstrate the functionality, we
are going tocreate a HTML document with a X3DOM scene. That scene is then amended with a button that allows to
resize the scene by setting CSS attributes using JavaScript.
Important: you shouldalways include the X3DOM defaultstylesheet x3dom.css,since it initializes some important
settings necessary due tothe fact that X3DOM’s new 3Delements are unknownto the Browserand so are theirstyles.
For example, if the <x3d> element is not floating (e.g. using the float:left property), the relative mouse positions
cannot be calculated correctly and picking does not work!
Basic scene document
We are going touse the box example scene established in the First steps with X3DOM tutorial:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Integration Test</title>
<link rel="stylesheet" href="http://www.x3dom.org/download/x3dom.css">
<script src="http://www.x3dom.org/download/x3dom.js"></script>
</head>
<body>
<h1>Styling tutorial</h1>
<x3d width="400px" height="300px">
<scene>
<shape>
<appearance>
<material diffuseColor=’red’></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
</body>
</html>
Rendering this document in aWebGLcompatiblebrowser,results in a look similarto this:
1.2. Tutorial
7
