From ef5784fe5f1f66400a57974eb3e79efa40fbac95 Mon Sep 17 00:00:00 2001 From: Koukofikis <athanasios.koukofikis@hft-stuttgart.de> Date: Wed, 19 May 2021 15:12:43 +0000 Subject: [PATCH] Update hellox3dom.html --- public/X3DOMTutorial/hellox3dom.html | 167 ++++++++++++++------------- 1 file changed, 85 insertions(+), 82 deletions(-) diff --git a/public/X3DOMTutorial/hellox3dom.html b/public/X3DOMTutorial/hellox3dom.html index e8b077b..a373e22 100644 --- a/public/X3DOMTutorial/hellox3dom.html +++ b/public/X3DOMTutorial/hellox3dom.html @@ -1,82 +1,85 @@ -<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> -</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 1 0'> </background> - <Shape> - <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 class="prettyprint"> - <X3D id="shapedata" width="600px" height="600px" style="float:left"> - <Scene> - <background transparency='0' skyColor='1 0 0'> </background> - <Shape id=box> - <Box> </Box> - </Shape> - </Scene> - </X3D> - </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. - 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 t0 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 class="prettyprint"> - <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> - </pre> - <shape> - <box></box> - </shape> - </td> - <script type="text/javascript" src="x3dom.js"></script> -</body> - -</html> \ No newline at end of file +<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> +</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.1 0.2 0'> </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 class="prettyprint"> + <X3D id="shapedata" width="600px" height="600px" style="float:left"> + <Scene> + <background transparency='0' skyColor='1 0 0'> </background> + <Shape id=box> + <Box> </Box> + </Shape> + </Scene> + </X3D> + </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. + 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 t0 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 class="prettyprint"> + <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> + </pre> + <shape> + <box></box> + </shape> + </td> + <script type="text/javascript" src="x3dom.js"></script> +</body> + +</html> -- GitLab