Commit cc119e64 authored by Joe TS Dell's avatar Joe TS Dell
Browse files
parents 2158f0da e0789dce
Pipeline #6424 passed with stages
in 11 seconds
<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>
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
<title> Hello X3DOM </title> <title> Hello X3DOM </title>
<link rel="stylesheet" type="text/css" href="x3dom.css"> <link rel="stylesheet" type="text/css" href="x3dom.css">
</link> </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>
</head> </head>
<body> <body>
...@@ -23,6 +26,7 @@ ...@@ -23,6 +26,7 @@
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <td width="50%" align="left" valign="top" scope="col">
In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the
...@@ -33,16 +37,30 @@ ...@@ -33,16 +37,30 @@
version. version.
A local copy of the library is useful for development, if you are not always connected. A local copy of the library is useful for development, if you are not always connected.
<br> <br>
<pre class="prettyprint"> <pre>
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; <code class="language-html">
&lt;Scene&gt; &lt;html&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt; &lt;head&gt;
&lt;Shape id=box&gt; &lt;title&gt;My first X3DOM page&lt;/title&gt;
&lt;Box&gt; &lt;/Box&gt; &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;/Shape&gt; &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;/Scene&gt; &lt;/head&gt;
&lt;/X3D&gt; &lt;body&gt;
</pre> &lt;h1&gt;Hello, X3DOM!&lt;/h1&gt;
&lt;p&gt;
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='0 0 1'&gt; &lt;/background&gt;
&lt;Shape id=box&gt;
&lt;Box&gt; &lt;/Box&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph. The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph.
An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph" An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
target="_blank"> X3D scene graph </a> target="_blank"> X3D scene graph </a>
...@@ -56,31 +74,31 @@ ...@@ -56,31 +74,31 @@
The color of the background can be changed in the attribute skyColor. Currently it is red. The color of the background can be changed in the attribute skyColor. Currently it is red.
The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color
model </a> model </a>
with arithmetic notation (0.0 t0 1.0 per value). <br> with arithmetic notation (0.0 to 1.0 per value). <br>
The color of the Box can be changed by applying an appearance to the shape node. The color of the Box can be changed by applying an appearance to the shape node.
In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape
node </a> associates a geometry node with node </a> associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box. nodes that define that geometry's appearance. The following example draws a blue box.
<pre class="prettyprint"> <pre>
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; <code class="language-html">
&lt;Scene&gt; &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt; &lt;Scene&gt;
&lt;Shape id=box&gt; &lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;appearance &gt; &lt;Shape id=box&gt;
&lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt; &lt;appearance &gt;
&lt;/appearance&gt; &lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt;
&lt;Box&gt; &lt;/Box&gt; &lt;/appearance&gt;
&lt;/Shape&gt; &lt;Box&gt; &lt;/Box&gt;
&lt;/Scene&gt; &lt;/Shape&gt;
&lt;/X3D&gt; &lt;/Scene&gt;
</pre> &lt;/X3D&gt;
</code>
</pre>
<shape> <shape>
<box></box> <box></box>
</shape> </shape>
</td> </td>
</tr> <script type="text/javascript" src="x3dom.js"></script>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<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> Transformation </title> <title> Transformation </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> <script>hljs.highlightAll();</script>
<h1> Transformation </h1> </head>
<table width="100%" height="85%" border="0">
<tr> <body>
<td width="50%" align="center" valign="top" scope="col"> <h1> Transformation </h1>
<X3D id="shapedata" width="600px" height="600px" style="float:left"> <table width="100%" height="85%" border="0">
<Scene> <tr>
<background transparency='0' skyColor='1 1 1'> </background> <td width="50%" align="center" valign="top" scope="col">
<Shape> <X3D id="shapedata" width="600px" height="600px" style="float:left">
<Appearance> <Scene>
<Material diffuseColor='1 0 0'></Material> <background transparency='0' skyColor='1 1 1'> </background>
</Appearance> <Shape>
<Box></Box> <Appearance>
</Shape> <Material diffuseColor='1 0 0'></Material>
<Transform translation='-3 0 0'> </Appearance>
<Shape> <Box></Box>
<Appearance> </Shape>
<Material diffuseColor='0 1 0'></Material> <Transform translation='-3 0 0'>
</Appearance> <Shape>
<Cone></Cone> <Appearance>
</Shape> <Material diffuseColor='0 1 0'></Material>
</Transform> </Appearance>
<Transform translation='3 0 0'> <Cone></Cone>
<Shape> </Shape>
<Appearance> </Transform>
<Material diffuseColor='0 0 1'></Material> <Transform translation='3 0 0'>
</Appearance> <Shape>
<Sphere></Sphere> <Appearance>
</Shape> <Material diffuseColor='0 0 1'></Material>
</Transform> </Appearance>
</Scene> <Sphere></Sphere>
</X3D> </Shape>
</td> </Transform>
<td width="50%" align="left" valign="top" scope="col"> </Scene>
In X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The </X3D>
size of the shape can be modified, </p>
but the location is always centered at (0,0,0). To move a shape to another location, a transformation needs to </td>
be applied. See slides for <td width="50%" align="left" valign="top" scope="col">
the different kinds of affine transformations: translation, rotation, and scaling. In X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The
<br> size of the shape can be modified,
<pre class="prettyprint"> but the location is always centered at (0,0,0). To move a shape to another location, a transformation needs to
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; be applied. See slides for
&lt;Scene&gt; the different kinds of affine transformations: translation, rotation, and scaling.
&lt;background transparency='0' skyColor='1 1 1'&gt; &lt;/background&gt; <br>
&lt;Shape&gt; <pre>
&lt;Appearance&gt; <code class="language-html">
&lt;Material diffuseColor='1 0 0'&gt;&lt;/Material&gt; &lt;html&gt;
&lt;/Appearance&gt; &lt;head&gt;
&lt;Box&gt;&lt;/Box&gt; &lt;title&gt; Transformation &lt;/title&gt;
&lt;/Shape&gt; &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;Transform translation='-3 0 0'&gt; &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;Shape&gt; &lt;/head&gt;
&lt;Appearance&gt; &lt;body&gt;
&lt;Material diffuseColor='0 1 0'&gt;&lt;/Material&gt; &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;/Appearance&gt; &lt;Scene&gt;
&lt;Cone&gt;&lt;/Cone&gt; &lt;background transparency='0' skyColor='1 1 1'&gt; &lt;/background&gt;
&lt;/Shape&gt; &lt;Shape&gt;
&lt;/Transform&gt; &lt;Appearance&gt;
&lt;Transform translation='3 0 0'&gt; &lt;Material diffuseColor='1 0 0'&gt;&lt;/Material&gt;
&lt;Shape&gt; &lt;/Appearance&gt;
&lt;Appearance&gt; &lt;Box&gt;&lt;/Box&gt;
&lt;Material diffuseColor='0 0 1'&gt;&lt;/Material&gt; &lt;/Shape&gt;
&lt;/Appearance&gt; &lt;Transform translation='-3 0 0'&gt;
&lt;Sphere&gt;&lt;/Sphere&gt; &lt;Shape&gt;
&lt;/Shape&gt; &lt;Appearance&gt;
&lt;/Transform&gt; &lt;Material diffuseColor='0 1 0'&gt;&lt;/Material&gt;
&lt;/Scene&gt; &lt;/Appearance&gt;
&lt;/X3D&gt; &lt;Cone&gt;&lt;/Cone&gt;
</pre> &lt;/Shape&gt;
<br> &lt;/Transform&gt;
This example illustrates how to move shapes to another location. &lt;Transform translation='3 0 0'&gt;
</td> &lt;Shape&gt;
</tr> &lt;Appearance&gt;
</table> &lt;Material diffuseColor='0 0 1'&gt;&lt;/Material&gt;
<script type="text/javascript" src="x3dom.js"></script> &lt;/Appearance&gt;
</body> &lt;Sphere&gt;&lt;/Sphere&gt;
&lt;/Shape&gt;
</html> &lt;/Transform&gt;
\ No newline at end of file &lt;/Scene&gt;
&lt;/X3D&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
<br>
This example illustrates how to move shapes to another location.
</td>
<script type="text/javascript" src="x3dom.js"></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