# Hello X3DOM

<Scene> <Shape> <appearance> </appearance> <Box> </Box> </Shape> </Scene>

In this example, a simple 3D scene is integrated into a web page. This is done by the <X3D> tag in the HTML document. The <X3D> tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the library or use it from the server. It is recommended to use the library from the server to ensure that you always have the latest version. A local copy of the library is useful for development, if you are not always connected.

      <html>
        <head>
          <title>My first X3DOM page</title>
          <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
          <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
        </head>
        <body>
          <h1>Hello, X3DOM!</h1>
          <p>
          <X3D id="shapedata" width="600px" height="600px" style="float:left">
            <Scene>
              <background transparency='0' skyColor='0 0 1'> </background>
              <Shape id=box>
                <Box> </Box>
              </Shape>
            </Scene>
          </X3D>
          </p>
        </body>
      </html>

The <X3D> tag defines the size of the 3D canvas on the web page as well as the scene graph. An X3D scene graph is defined as a directed acyclic graph. The nodes of the scene graph will be rendered on the screen from a given camera position. The default camera position is (0,0,10) pointing to the negative z-Axis. So objects at the center of the coordinate system will be displayed on the screen. A shape node contains a geometry. In this example, it is a simple box. The center of the box is at (0,0,0) with default size 2 in all dimensions
The color of the background can be changed in the attribute skyColor. Currently it is red. The color is defined using RGB color model with arithmetic notation (0.0 to 1.0 per value).
The color of the Box can be changed by applying an appearance to the shape node. In X3D, the Shape node associates a geometry node with nodes that define that geometry's appearance. The following example draws a blue box.

      <X3D id="shapedata" width="600px" height="600px" style="float:left">
        <Scene>
          <background transparency='0' skyColor='1 0 0'> </background>
            <Shape id=box>
              <appearance >
                <material diffuseColor='0 0 1'></material>
              </appearance>
              <Box> </Box>
            </Shape>
          </Scene>
        </X3D>

<shape> <box></box> </shape>