Skip to content
GitLab
Commit a97614f8 authored by Mandic's avatar Mandic
Browse files

Update hellox3dom.html

parent 2aee5012
Pipeline #6353 passed with stages
in 11 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 46 additions and 29 deletions
+46 -29
public/X3DOMTutorial/hellox3dom.html
+ 46
- 29
View file @ a97614f8
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,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>
<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>
</head> </head>
<body> <body>
...@@ -23,6 +25,7 @@ ...@@ -23,6 +25,7 @@
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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 &lt;X3D&gt; tag in the In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the
...@@ -33,16 +36,30 @@ ...@@ -33,16 +36,30 @@
version. version.
A local copy of the library is useful for development, if you are not always connected. A local copy of the library is useful for development, if you are not always connected.
<br> <br>
<pre class="prettyprint"> <pre>
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; <code class="language-html">
&lt;Scene&gt; &lt;html&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt; &lt;head&gt;
&lt;Shape id=box&gt; &lt;title&gt;My first X3DOM page&lt;/title&gt;
&lt;Box&gt; &lt;/Box&gt; &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;/Shape&gt; &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;/Scene&gt; &lt;/head&gt;
&lt;/X3D&gt; &lt;body&gt;
</pre> &lt;h1&gt;Hello, X3DOM!&lt;/h1&gt;
&lt;p&gt;
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='0 0 1'&gt; &lt;/background&gt;
&lt;Shape id=box&gt;
&lt;Box&gt; &lt;/Box&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph. The &lt;X3D&gt; 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" An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
target="_blank"> X3D scene graph </a> target="_blank"> X3D scene graph </a>
...@@ -56,31 +73,31 @@ ...@@ -56,31 +73,31 @@
The color of the background can be changed in the attribute skyColor. Currently it is red. 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 The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color
model </a> model </a>
with arithmetic notation (0.0 t0 1.0 per value). <br> 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. 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 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 node </a> associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box. nodes that define that geometry's appearance. The following example draws a blue box.
<pre class="prettyprint"> <pre>
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; <code class="language-html">
&lt;Scene&gt; &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt; &lt;Scene&gt;
&lt;Shape id=box&gt; &lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;appearance &gt; &lt;Shape id=box&gt;
&lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt; &lt;appearance &gt;
&lt;/appearance&gt; &lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt;
&lt;Box&gt; &lt;/Box&gt; &lt;/appearance&gt;
&lt;/Shape&gt; &lt;Box&gt; &lt;/Box&gt;
&lt;/Scene&gt; &lt;/Shape&gt;
&lt;/X3D&gt; &lt;/Scene&gt;
</pre> &lt;/X3D&gt;
</code>
</pre>
<shape> <shape>
<box></box> <box></box>
</shape> </shape>
</td> </td>
</tr> <script type="text/javascript" src="x3dom.js"></script>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
Supports Markdown
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