Skip to content

GitLab

Commit b9fea9e5 authored by Mandic's avatar Mandic
Browse files

Update colorbrewer.html

parent 99f856de
Pipeline #6359 passed with stages
in 10 seconds
Show whitespace changes
Inline Side-by-side
public/X3DOMTutorial/colorbrewer.html
View file @ b9fea9e5
<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>Material brewer</title> <title>Material brewer</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>
<script>hljs.highlightAll();</script>
</head> </head>
<body class="ui-widget-content" style="border:0;"> <body class="ui-widget-content" style="border:0;">
...@@ -23,7 +26,7 @@ ...@@ -23,7 +26,7 @@
</X3D> </X3D>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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" See <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
target="_blank"> target="_blank">
X3D Material node definition </a> for an explanation of the different color attributes. X3D Material node definition </a> for an explanation of the different color attributes.
...@@ -75,7 +78,15 @@ ...@@ -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 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. 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. 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;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt; &lt;Scene&gt;
&lt;Shape&gt; &lt;Shape&gt;
...@@ -86,7 +97,10 @@ ...@@ -86,7 +97,10 @@
&lt;/Shape&gt; &lt;/Shape&gt;
&lt;/Scene&gt; &lt;/Scene&gt;
&lt;/X3D&gt; &lt;/X3D&gt;
</pre> &lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
<br> <br>
For example, if the diffuse color should be set to red, the Material node is referenced by its id and the 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 attribute diffuseColor is set to
...@@ -101,9 +115,8 @@ ...@@ -101,9 +115,8 @@
rgbstring = " "+ red + " " + green + " " + blue; rgbstring = " "+ red + " " + green + " " + blue;
mat.setAttribute("diffuseColor", rgbstring); mat.setAttribute("diffuseColor", rgbstring);
</pre> </pre>
</p>
</td> </td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script> <script type="text/javascript" src="x3dom.js"></script>
<script> <script>
/** /**
......
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