From 43137159e5dbc021612b74580029bafe63fa06ad Mon Sep 17 00:00:00 2001 From: Koukofikis Date: Wed, 19 May 2021 14:02:28 +0000 Subject: [PATCH] Update colorbrewer2.html --- public/X3DOMTutorial/colorbrewer2.html | 266 ++++++++++++------------- 1 file changed, 133 insertions(+), 133 deletions(-) diff --git a/public/X3DOMTutorial/colorbrewer2.html b/public/X3DOMTutorial/colorbrewer2.html index 41fc20f..a4ed47a 100644 --- a/public/X3DOMTutorial/colorbrewer2.html +++ b/public/X3DOMTutorial/colorbrewer2.html @@ -1,133 +1,133 @@ - - - - - Material brewer - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + Material brewer + + + + + + + + + + + +
- - - - - - - - - - - -

The following example will show you haw to interactively modify the 3D scene.

-
-
-
-

-









- The diffuse color of a material will be interactively changed. - A JavaScript RGB color picker 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. - 

-	<X3D id="shapedata" width="600px" height="600px" style="float:left">
-	  <Scene>
-	    <Shape> 
-   	      <Appearance>
-     	        <Material id="material" diffuseColor="0.980, 0.502, 0.447"> </Material>
-   	      </Appearance>
-	      <Sphere radius="2.0"> </Sphere>
- 	    </Shape>
-	  </Scene>
-	</X3D>
-
-
- 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 - "1.0 0.0 0.0". The attribute value is always a string. - 
-    var mat = document.getElementById("material");
-    mat.setAttribute("diffuseColor", "1.0 0.0 0.0");      
-
- In the example, the RGB value is fetched from the slider. As the slider gives the RGB values between 0 and 255, - they have to be transformed to - arithmetic values between 0.0 and 1.0. After that, the RBG value has to be formatted as string. - 
-      var mat = document.getElementById("material");
-      rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
-      mat.setAttribute("diffuseColor", rgbstring);
-
-

-
+ + + + + + + + -- GitLab
+ + + + + + + + + + + +

The following example will show you haw to interactively modify the 3D scene.

+
+
+
+

+









+ The diffuse color of a material will be interactively changed. + A JavaScript RGB color picker 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. + 

+	<X3D id="shapedata" width="600px" height="600px" style="float:left">
+	  <Scene>
+	    <Shape> 
+   	      <Appearance>
+     	        <Material id="material" diffuseColor="0.980, 0.502, 0.447"> </Material>
+   	      </Appearance>
+	      <Sphere radius="2.0"> </Sphere>
+ 	    </Shape>
+	  </Scene>
+	</X3D>
+
+
+ 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 + "1.0 0.0 0.0". The attribute value is always a string. + 
+    var mat = document.getElementById("material");
+    mat.setAttribute("diffuseColor", "1.0 0.0 0.0");      
+
+ In the example, the RGB value is fetched from the slider. As the slider gives the RGB values between 0 and 255, + they have to be transformed to + arithmetic values between 0.0 and 1.0. After that, the RBG value has to be formatted as string. + 
+      var mat = document.getElementById("material");
+      rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
+      mat.setAttribute("diffuseColor", rgbstring);
+
+

+