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
Hide 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>
</head> <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>
<body class="ui-widget-content" style="border:0;"> <script>hljs.highlightAll();</script>
<table width="100%" height="85%" border="0"> </head>
<tr>
<td width="50%" align="center" valign="top" scope="col"> <body class="ui-widget-content" style="border:0;">
<X3D id="shapedata" width="600px" height="600px" style="float:left"> <table width="100%" height="85%" border="0">
<Scene> <tr>
<Shape> <td width="50%" align="center" valign="top" scope="col">
<Appearance> <X3D id="shapedata" width="600px" height="600px" style="float:left">
<Material id="material"> </Material> <Scene>
</Appearance> <Shape>
<Sphere radius="2.0"> </Sphere> <Appearance>
</Shape> <Material id="material"> </Material>
</Scene> </Appearance>
</X3D> <Sphere radius="2.0"> </Sphere>
</td> </Shape>
<td width="50%" align="left" valign="top" scope="col"> </Scene>
The following example will show you haw to interactively modify the 3D scene. </X3D>
See <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material" </td>
target="_blank"> <td width="50%" align="left" valign="top" scope="col">
X3D Material node definition </a> for an explanation of the different color attributes. The following example will show you how to interactively modify the 3D scene.
<br> See <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
<br><b>ambientIntensity</b><br> target="_blank">
ambientIntensity: 0 <input type="range" id="ambientIntensity" min="0.0" max="1.0" step="0.05" value="0.2" X3D Material node definition </a> for an explanation of the different color attributes.
onchange="changeColor()" />1<br> <br>
<br> <br><b>ambientIntensity</b><br>
<b>diffue color</b> ambientIntensity: 0 <input type="range" id="ambientIntensity" min="0.0" max="1.0" step="0.05" value="0.2"
<br> onchange="changeColor()" />1<br>
red: 0 <input type="range" id="diffuse_r" min="0.0" max="1.0" step="0.05" value="0.8" <br>
onchange="changeColor()" />1<br> <b>diffue color</b>
green: 0 <input type="range" id="diffuse_g" min="0.0" max="1.0" step="0.05" value="0.8" <br>
onchange="changeColor()" />1<br> red: 0 <input type="range" id="diffuse_r" min="0.0" max="1.0" step="0.05" value="0.8"
blue: 0 <input type="range" id="diffuse_b" min="0.0" max="1.0" step="0.05" value="0.8" onchange="changeColor()" />1<br>
onchange="changeColor()" />1<br> green: 0 <input type="range" id="diffuse_g" min="0.0" max="1.0" step="0.05" value="0.8"
<br><b>emissive color</b><br> onchange="changeColor()" />1<br>
red: 0 <input type="range" id="emissive_r" min="0.0" max="1.0" step="0.05" value="0.0" blue: 0 <input type="range" id="diffuse_b" min="0.0" max="1.0" step="0.05" value="0.8"
onchange="changeColor()" />1<br> onchange="changeColor()" />1<br>
green: 0 <input type="range" id="emissive_g" min="0.0" max="1.0" step="0.05" value="0.0" <br><b>emissive color</b><br>
onchange="changeColor()" />1<br> red: 0 <input type="range" id="emissive_r" min="0.0" max="1.0" step="0.05" value="0.0"
blue: 0 <input type="range" id="emissive_b" min="0.0" max="1.0" step="0.05" value="0.0" onchange="changeColor()" />1<br>
onchange="changeColor()" />1<br> green: 0 <input type="range" id="emissive_g" min="0.0" max="1.0" step="0.05" value="0.0"
<br> onchange="changeColor()" />1<br>
<b>specular color</b> blue: 0 <input type="range" id="emissive_b" min="0.0" max="1.0" step="0.05" value="0.0"
<br> onchange="changeColor()" />1<br>
red: 0 <input type="range" id="specular_r" min="0.0" max="1.0" step="0.05" value="0.0" <br>
onchange="changeColor()" />1<br> <b>specular color</b>
green: 0 <input type="range" id="specular_g" min="0.0" max="1.0" step="0.05" value="0.0" <br>
onchange="changeColor()" />1<br> red: 0 <input type="range" id="specular_r" min="0.0" max="1.0" step="0.05" value="0.0"
blue: 0 <input type="range" id="specular_b" min="0.0" max="1.0" step="0.05" value="0.0" onchange="changeColor()" />1<br>
onchange="changeColor()" />1<br> green: 0 <input type="range" id="specular_g" min="0.0" max="1.0" step="0.05" value="0.0"
<br> onchange="changeColor()" />1<br>
<b>shininess</b> blue: 0 <input type="range" id="specular_b" min="0.0" max="1.0" step="0.05" value="0.0"
<br> onchange="changeColor()" />1<br>
shininess: 0 <input type="range" id="shininess" min="0.0" max="1.0" step="0.05" value="0.2" <br>
onchange="changeColor()" />1<br> <b>shininess</b>
<br> <br>
<b>transparency</b> shininess: 0 <input type="range" id="shininess" min="0.0" max="1.0" step="0.05" value="0.2"
<br> onchange="changeColor()" />1<br>
transparency : 0 <input type="range" id="transparency" min="0.0" max="1.0" step="0.05" value="0.0" <br>
onchange="changeColor()" />1<br> <b>transparency</b>
<br> <br>
<p> transparency : 0 <input type="range" id="transparency" min="0.0" max="1.0" step="0.05" value="0.0"
<br><br> onchange="changeColor()" />1<br>
The diffuse color of a material will be interactively changed. <br>
A JavaScript <a href="http://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used <p>
and modified. <br><br>
If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to The diffuse color of a material will be interactively changed.
get the Material node first. A JavaScript <a href="http://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id. and modified.
<pre> If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; get the Material node first.
&lt;Scene&gt; This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.
&lt;Shape&gt; <pre>
&lt;Appearance&gt; <code class="language-html">
&lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt; &lt;html&gt;
&lt;/Appearance&gt; &lt;head&gt;
&lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt; &lt;title&gt;colorbrewer&lt;/title&gt;
&lt;/Shape&gt; &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;/Scene&gt; &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;/X3D&gt; &lt;/head&gt;
</pre> &lt;body&gt;
<br> &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
For example, if the diffuse color should be set to red, the Material node is referenced by its id and the &lt;Scene&gt;
attribute diffuseColor is set to &lt;Shape&gt;
"1.0 0.0 0.0". The attribute value is always a string. &lt;Appearance&gt;
<pre> &lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
var mat = document.getElementById("material"); &lt;/Appearance&gt;
mat.setAttribute("diffuseColor", "1.0 0.0 0.0"); &lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt;
</pre> &lt;/Shape&gt;
In the example, the RGB value is fetched from the slider. &lt;/Scene&gt;
<pre> &lt;/X3D&gt;
var mat = document.getElementById("material"); &lt;/body&gt;
rgbstring = " "+ red + " " + green + " " + blue; &lt;/html&gt;
mat.setAttribute("diffuseColor", rgbstring); </code>
</pre> </pre>
</td> <br>
</tr> For example, if the diffuse color should be set to red, the Material node is referenced by its id and the
</table> attribute diffuseColor is set to
<script type="text/javascript" src="x3dom.js"></script> "1.0 0.0 0.0". The attribute value is always a string.
<script> <pre>
/** var mat = document.getElementById("material");
* Change the settings of the directional light mat.setAttribute("diffuseColor", "1.0 0.0 0.0");
* </pre>
* @param field string: Name of the field In the example, the RGB value is fetched from the slider.
* @param value number: New value to set <pre>
*/ var mat = document.getElementById("material");
function changeColor() { rgbstring = " "+ red + " " + green + " " + blue;
var material = document.getElementById("material"); mat.setAttribute("diffuseColor", rgbstring);
var emissive_rgb = " " + document.getElementById("emissive_r").value; </pre>
emissive_rgb += " " + document.getElementById("emissive_g").value; </p>
emissive_rgb += " " + document.getElementById("emissive_b").value; </td>
material.setAttribute("emissiveColor", emissive_rgb); <script type="text/javascript" src="x3dom.js"></script>
var diffuse_rgb = " " + document.getElementById("diffuse_r").value; <script>
diffuse_rgb += " " + document.getElementById("diffuse_g").value; /**
diffuse_rgb += " " + document.getElementById("diffuse_b").value; * Change the settings of the directional light
material.setAttribute("diffuseColor", diffuse_rgb); *
var specular_rgb = " " + document.getElementById("specular_r").value; * @param field string: Name of the field
specular_rgb += " " + document.getElementById("specular_g").value; * @param value number: New value to set
specular_rgb += " " + document.getElementById("specular_b").value; */
material.setAttribute("specularColor", specular_rgb); function changeColor() {
var ambientIntensity = " " + document.getElementById("ambientIntensity").value; var material = document.getElementById("material");
material.setAttribute("ambientIntensity", ambientIntensity); var emissive_rgb = " " + document.getElementById("emissive_r").value;
var shininess = " " + document.getElementById("shininess").value; emissive_rgb += " " + document.getElementById("emissive_g").value;
material.setAttribute("shininess", shininess); emissive_rgb += " " + document.getElementById("emissive_b").value;
var transparency = " " + document.getElementById("transparency").value; material.setAttribute("emissiveColor", emissive_rgb);
material.setAttribute("transparency", transparency); var diffuse_rgb = " " + document.getElementById("diffuse_r").value;
} diffuse_rgb += " " + document.getElementById("diffuse_g").value;
</script> diffuse_rgb += " " + document.getElementById("diffuse_b").value;
</body> material.setAttribute("diffuseColor", diffuse_rgb);
var specular_rgb = " " + document.getElementById("specular_r").value;
</html> specular_rgb += " " + document.getElementById("specular_g").value;
\ No newline at end of file specular_rgb += " " + document.getElementById("specular_b").value;
material.setAttribute("specularColor", specular_rgb);
var ambientIntensity = " " + document.getElementById("ambientIntensity").value;
material.setAttribute("ambientIntensity", ambientIntensity);
var shininess = " " + document.getElementById("shininess").value;
material.setAttribute("shininess", shininess);
var transparency = " " + document.getElementById("transparency").value;
material.setAttribute("transparency", transparency);
}
</script>
</body>
</html>
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