|
- |
-
- 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.
- - - <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> -- 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 t0 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> -- |
-
-
-
-
\ No newline at end of file
+
+
+
+
+
|
+ |
+
+ 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.
+ + + <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> ++ 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 t0 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> ++ |
+
+
+
+