Skip to content

GitLab

Commit ef5784fe authored by Koukofikis's avatar Koukofikis
Browse files

Update hellox3dom.html

parent 5fab4255
Pipeline #3789 passed with stages
in 19 seconds
Hide whitespace changes
Inline Side-by-side
public/X3DOMTutorial/hellox3dom.html
View file @ ef5784fe
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Hello X3DOM </title> <title> Hello X3DOM </title>
<link rel="stylesheet" type="text/css" href="x3dom.css"> <link rel="stylesheet" type="text/css" href="x3dom.css">
</link> </link>
</head> </head>
<body> <body>
<h1> Hello X3DOM </h1> <h1> Hello X3DOM </h1>
<table width="100%" height="85%" border="0"> <table width="100%" height="85%" border="0">
<tr> <tr>
<td width="50%" align="center" valign="top" scope="col"> <td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left"> <X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene> <Scene>
<background transparency='0' skyColor='0 1 0'> </background> <background transparency='0' skyColor='0.1 0.2 0'> </background>
<Shape> <Shape>
<Box> </Box> <appearance >
</Shape> <material diffuseColor='1 0 0'></material>
</Scene> </appearance>
</X3D> <Box> </Box>
</p> </Shape>
</td> </Scene>
<td width="50%" align="left" valign="top" scope="col"> </X3D>
In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the </p>
HTML document. </td>
The &lt;X3D&gt; tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the <td width="50%" align="left" valign="top" scope="col">
library or use it In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the
from the server. It is recommended to use the library from the server to ensure that you always have the latest HTML document.
version. The &lt;X3D&gt; tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the
A local copy of the library is useful for development, if you are not always connected. library or use it
<br> from the server. It is recommended to use the library from the server to ensure that you always have the latest
<pre class="prettyprint"> version.
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; A local copy of the library is useful for development, if you are not always connected.
&lt;Scene&gt; <br>
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt; <pre class="prettyprint">
&lt;Shape id=box&gt; &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Box&gt; &lt;/Box&gt; &lt;Scene&gt;
&lt;/Shape&gt; &lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;/Scene&gt; &lt;Shape id=box&gt;
&lt;/X3D&gt; &lt;Box&gt; &lt;/Box&gt;
</pre> &lt;/Shape&gt;
The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph. &lt;/Scene&gt;
An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph" &lt;/X3D&gt;
target="_blank"> X3D scene graph </a> </pre>
is defined as a directed acyclic graph. The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph.
The nodes of the scene graph will be rendered on the screen from a given camera position. An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
The default camera position is (0,0,10) pointing to the negative z-Axis. target="_blank"> X3D scene graph </a>
So objects at the center of the coordinate system will be displayed on the screen. is defined as a directed acyclic graph.
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 The nodes of the scene graph will be rendered on the screen from a given camera position.
default size 2 in all dimensions The default camera position is (0,0,10) pointing to the negative z-Axis.
<br> So objects at the center of the coordinate system will be displayed on the screen.
The color of the background can be changed in the attribute skyColor. Currently it is red. 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
The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color default size 2 in all dimensions
model </a> <br>
with arithmetic notation (0.0 t0 1.0 per value). <br> The color of the background can be changed in the attribute skyColor. Currently it is red.
The color of the Box can be changed by applying an appearance to the shape node. The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color
In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape model </a>
node </a> associates a geometry node with with arithmetic notation (0.0 t0 1.0 per value). <br>
nodes that define that geometry's appearance. The following example draws a blue box. The color of the Box can be changed by applying an appearance to the shape node.
<pre class="prettyprint"> In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; node </a> associates a geometry node with
&lt;Scene&gt; nodes that define that geometry's appearance. The following example draws a blue box.
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt; <pre class="prettyprint">
&lt;Shape id=box&gt; &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;appearance &gt; &lt;Scene&gt;
&lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt; &lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;/appearance&gt; &lt;Shape id=box&gt;
&lt;Box&gt; &lt;/Box&gt; &lt;appearance &gt;
&lt;/Shape&gt; &lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt;
&lt;/Scene&gt; &lt;/appearance&gt;
&lt;/X3D&gt; &lt;Box&gt; &lt;/Box&gt;
</pre> &lt;/Shape&gt;
<shape> &lt;/Scene&gt;
<box></box> &lt;/X3D&gt;
</shape> </pre>
</td> <shape>
<script type="text/javascript" src="x3dom.js"></script> <box></box>
</body> </shape>
</td>
</html> <script type="text/javascript" src="x3dom.js"></script>
\ No newline at end of file </body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal