An error occurred while loading the file. Please try again.
-
Mandic authoredfe5ca278
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Hello X3DOM </title> <link rel="stylesheet" type="text/css" href="x3dom.css"> </link> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> <script>hljs.highlightAll();</script></head><body> <h1> Hello X3DOM </h1> <table width="100%" height="85%" border="0"> <tr> <td width="50%" align="center" valign="top" scope="col"> <X3D id="shapedata" width="600px" height="600px" style="float:left"> <Scene> <background transparency='0' skyColor='0.68, 0.95, 0.47'> </background> <Shape> <appearance> <material diffuseColor='1 0 0'></material> </appearance> <Box> </Box> </Shape> </Scene> </X3D> </p> </td> <td width="50%" align="left" valign="top" scope="col"> 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. <br><pre><code class="language-html"> <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></code></pre> The <X3D> tag defines the size of the 3D canvas on the web page as well as the scene graph. An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph" target="_blank"> X3D scene graph </a> 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.
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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
<br>
The color of the background can be changed in the attribute skyColor. Currently it is red.
The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color
model </a>
with arithmetic notation (0.0 to 1.0 per value). <br>
The color of the Box can be changed by applying an appearance to the shape node.
In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape
node </a> associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box.
<pre>
<code class="language-html">
<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>
</code>
</pre>
<shape>
<box></box>
</shape>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>