From a97614f893390f33e2137205211511a3cfd521aa Mon Sep 17 00:00:00 2001
From: Mandic <02mami1mma@hft-stuttgart.de>
Date: Wed, 27 Apr 2022 14:02:59 +0000
Subject: [PATCH] Update hellox3dom.html
---
public/X3DOMTutorial/hellox3dom.html | 75 +++++++++++++++++-----------
1 file changed, 46 insertions(+), 29 deletions(-)
diff --git a/public/X3DOMTutorial/hellox3dom.html b/public/X3DOMTutorial/hellox3dom.html
index 7315716..ac4c2f1 100644
--- a/public/X3DOMTutorial/hellox3dom.html
+++ b/public/X3DOMTutorial/hellox3dom.html
@@ -5,6 +5,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>
</head>
<body>
@@ -23,6 +25,7 @@
</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
@@ -33,16 +36,30 @@
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>
+<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>
@@ -56,31 +73,31 @@
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>
+ 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 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>
+ 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>
- </tr>
- </table>
- <script type="text/javascript" src="x3dom.js"></script>
+ <script type="text/javascript" src="x3dom.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
--
GitLab