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
a852031d
Commit
a852031d
authored
May 06, 2022
by
Mandic
Browse files
Update colorbrewer2.html
parent
c1696859
Changes
1
Show whitespace changes
Inline
Side-by-side
public/X3DOMTutorial/colorbrewer2.html
View file @
a852031d
...
...
@@ -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 h
a
w to interactively modify the 3D scene.
</p>
<p>
The following example will show you h
o
w 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=
"http
s
://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"
>
<
html
>
<
head
>
<
title
>
colorbrewer
<
/title
>
<
script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'
>
<
/script
>
<
link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'
><
/link
>
<
/head
>
<
body
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
Shape
>
...
...
@@ -85,7 +96,10 @@
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
<
/body
>
<
/html
>
</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
()
{
...
...
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