Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Mir
Visualization
Commits
b9fea9e5
Commit
b9fea9e5
authored
Apr 27, 2022
by
Mandic
Browse files
Update colorbrewer.html
parent
99f856de
Changes
1
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
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
get the Material node first.
<
Scene
>
This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.
<
Shape
>
<pre>
<
Appearance
>
<code
class=
"language-html"
>
<
Material id="material" diffuseColor="0.980, 0.502, 0.447"
>
<
/Material
>
<
html
>
<
/Appearance
>
<
head
>
<
Sphere radius="2.0"
>
<
/Sphere
>
<
title
>
colorbrewer
<
/title
>
<
/Shape
>
<
script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'
>
<
/script
>
<
/Scene
>
<
link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'
><
/link
>
<
/X3D
>
<
/head
>
</pre>
<
body
>
<br>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
For example, if the diffuse color should be set to red, the Material node is referenced by its id and the
<
Scene
>
attribute diffuseColor is set to
<
Shape
>
"1.0 0.0 0.0". The attribute value is always a string.
<
Appearance
>
<pre>
<
Material id="material" diffuseColor="0.980, 0.502, 0.447"
>
<
/Material
>
var mat = document.getElementById("material");
<
/Appearance
>
mat.setAttribute("diffuseColor", "1.0 0.0 0.0");
<
Sphere radius="2.0"
>
<
/Sphere
>
</pre>
<
/Shape
>
In the example, the RGB value is fetched from the slider.
<
/Scene
>
<pre>
<
/X3D
>
var mat = document.getElementById("material");
<
/body
>
rgbstring = " "+ red + " " + green + " " + blue;
<
/html
>
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>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment