Commit a852031d authored by Mandic's avatar Mandic
Browse files

Update colorbrewer2.html

parent c1696859
Pipeline #6430 passed with stages
in 13 seconds
......@@ -10,6 +10,9 @@
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</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>
<style>
#red,
#green,
......@@ -62,19 +65,27 @@
</X3D>
</td>
<td width="50%" align="left" valign="top" scope="col">
<p>The following example will show you haw to interactively modify the 3D scene.</p>
<p>The following example will show you how to interactively modify the 3D scene.</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<p>
<br><br><br><br><br><br><br><br><br><br>
The diffuse color of a material will be interactively changed.
A JavaScript <a href="https://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
A JavaScript <a href="http://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
and modified.
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>
<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;
......@@ -85,7 +96,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
......@@ -102,9 +116,8 @@
rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</p>
</td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
<script>
function refreshDiffuseMaterial() {
......
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