Skip to content
GitLab
Commit cc119e64 authored by Santhanavanich's avatar Santhanavanich
Browse files

Merge branch 'master' of https://transfer.hft-stuttgart.de/gitlab/coors/visualization into master

parents 2158f0da e0789dce
master
No related merge requests found
Pipeline #6424 passed with stages
in 11 seconds
Show whitespace changes
Inline Side-by-side
Showing
with 299 additions and 255 deletions
+299 -255
public/X3DOMTutorial/colorbrewer.html
+ 152
- 139
View file @ cc119e64
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Material brewer</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>
<script>hljs.highlightAll();</script>
</head>
<body class="ui-widget-content" style="border:0;">
......@@ -23,7 +26,7 @@
</X3D>
</td>
<td width="50%" align="left" valign="top" scope="col">
The following example will show you haw to interactively modify the 3D scene.
The following example will show you how to interactively modify the 3D scene.
See <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
target="_blank">
X3D Material node definition </a> for an explanation of the different color attributes.
......@@ -75,7 +78,15 @@
If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to
get the Material node first.
This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.
<pre>
<pre>
<code class="language-html">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;colorbrewer&lt;/title&gt;
&lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
......@@ -86,7 +97,10 @@
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
<br>
For example, if the diffuse color should be set to red, the Material node is referenced by its id and the
attribute diffuseColor is set to
......@@ -101,9 +115,8 @@
rgbstring = " "+ red + " " + green + " " + blue;
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</p>
</td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
<script>
/**
......
public/X3DOMTutorial/hellox3dom.html
+ 47
- 29
View file @ cc119e64
......@@ -5,6 +5,9 @@
<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>
<script>hljs.highlightAll();</script>
</head>
<body>
......@@ -23,6 +26,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 &lt;X3D&gt; tag in the
......@@ -33,16 +37,30 @@
version.
A local copy of the library is useful for development, if you are not always connected.
<br>
<pre class="prettyprint">
<pre>
<code class="language-html">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My first X3DOM page&lt;/title&gt;
&lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;/head&gt;
&lt;body&gt;
&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='1 0 0'&gt; &lt;/background&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;
</pre>
&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.
An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
target="_blank"> X3D scene graph </a>
......@@ -56,12 +74,13 @@
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">
<pre>
<code class="language-html">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
......@@ -73,13 +92,12 @@
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
</code>
</pre>
<shape>
<box></box>
</shape>
</td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
......
public/X3DOMTutorial/transform.html
+ 100
- 87
View file @ cc119e64
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Transformation </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>
<script>hljs.highlightAll();</script>
</head>
<body>
......@@ -39,6 +42,7 @@
</Transform>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
In X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The
......@@ -47,7 +51,15 @@
be applied. See slides for
the different kinds of affine transformations: translation, rotation, and scaling.
<br>
<pre class="prettyprint">
<pre>
<code class="language-html">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Transformation &lt;/title&gt;
&lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 1 1'&gt; &lt;/background&gt;
......@@ -75,12 +87,13 @@
&lt;/Transform&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
<br>
This example illustrates how to move shapes to another location.
</td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
......
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