Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Volker Coors
Visualization
Commits
29cfa78b
Commit
29cfa78b
authored
May 19, 2021
by
Athanasios
Browse files
Add missing tutorials
parent
ce283081
Pipeline
#3793
passed with stages
in 21 seconds
Changes
27
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/X3DOMTutorial/barchart.html
View file @
29cfa78b
...
...
@@ -112,7 +112,6 @@
</Transform>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
Bar chart example
<br>
<br>
...
...
@@ -125,37 +124,39 @@
<input
type=
"text"
id=
"yoc-b4"
value=
"1985"
size=
"12"
/><br>
<input
type=
"button"
value=
"draw"
onclick=
"drawBarChart()"
/>
<br>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script>
function
drawBarChart
()
{
var
labelx
=
document
.
getElementById
(
"
label-x
"
).
value
;
var
chartlabelx
=
document
.
getElementById
(
"
chartlabel-x
"
);
chartlabelx
.
setAttribute
(
"
string
"
,
labelx
);
var
labely
=
document
.
getElementById
(
"
label-y
"
).
value
;
var
chartlabely
=
document
.
getElementById
(
"
chartlabel-y
"
);
chartlabely
.
setAttribute
(
"
string
"
,
labely
);
var
yocb1
=
document
.
getElementById
(
"
yoc-b1
"
).
value
;
var
yocb2
=
document
.
getElementById
(
"
yoc-b2
"
).
value
;
var
yocb3
=
document
.
getElementById
(
"
yoc-b3
"
).
value
;
var
yocb4
=
document
.
getElementById
(
"
yoc-b4
"
).
value
;
yocb1
=
(
yocb1
-
1950
)
/
10
;
var
bar1
=
document
.
getElementById
(
"
bar1
"
);
bar1
.
setAttribute
(
"
translation
"
,
"
0.25
"
+
yocb1
/
2.0
+
"
0
"
);
bar1
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb1
+
"
1
"
);
yocb2
=
(
yocb2
-
1950
)
/
10
;
var
bar2
=
document
.
getElementById
(
"
bar2
"
);
bar2
.
setAttribute
(
"
translation
"
,
"
0.75
"
+
yocb2
/
2.0
+
"
0
"
);
bar2
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb2
+
"
1
"
);
yocb3
=
(
yocb3
-
1950
)
/
10
;
var
bar3
=
document
.
getElementById
(
"
bar3
"
);
bar3
.
setAttribute
(
"
translation
"
,
"
1.25
"
+
yocb3
/
2.0
+
"
0
"
);
bar3
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb3
+
"
1
"
);
yocb4
=
(
yocb4
-
1950
)
/
10
;
var
bar4
=
document
.
getElementById
(
"
bar4
"
);
bar4
.
setAttribute
(
"
translation
"
,
"
1.75
"
+
yocb4
/
2.0
+
"
0
"
);
bar4
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb4
+
"
1
"
);
}
</script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script>
function
drawBarChart
()
{
var
labelx
=
document
.
getElementById
(
"
label-x
"
).
value
;
var
chartlabelx
=
document
.
getElementById
(
"
chartlabel-x
"
);
chartlabelx
.
setAttribute
(
"
string
"
,
labelx
);
var
labely
=
document
.
getElementById
(
"
label-y
"
).
value
;
var
chartlabely
=
document
.
getElementById
(
"
chartlabel-y
"
);
chartlabely
.
setAttribute
(
"
string
"
,
labely
);
var
yocb1
=
document
.
getElementById
(
"
yoc-b1
"
).
value
;
var
yocb2
=
document
.
getElementById
(
"
yoc-b2
"
).
value
;
var
yocb3
=
document
.
getElementById
(
"
yoc-b3
"
).
value
;
var
yocb4
=
document
.
getElementById
(
"
yoc-b4
"
).
value
;
yocb1
=
(
yocb1
-
1950
)
/
10
;
var
bar1
=
document
.
getElementById
(
"
bar1
"
);
bar1
.
setAttribute
(
"
translation
"
,
"
0.25
"
+
yocb1
/
2.0
+
"
0
"
);
bar1
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb1
+
"
1
"
);
yocb2
=
(
yocb2
-
1950
)
/
10
;
var
bar2
=
document
.
getElementById
(
"
bar2
"
);
bar2
.
setAttribute
(
"
translation
"
,
"
0.75
"
+
yocb2
/
2.0
+
"
0
"
);
bar2
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb2
+
"
1
"
);
yocb3
=
(
yocb3
-
1950
)
/
10
;
var
bar3
=
document
.
getElementById
(
"
bar3
"
);
bar3
.
setAttribute
(
"
translation
"
,
"
1.25
"
+
yocb3
/
2.0
+
"
0
"
);
bar3
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb3
+
"
1
"
);
yocb4
=
(
yocb4
-
1950
)
/
10
;
var
bar4
=
document
.
getElementById
(
"
bar4
"
);
bar4
.
setAttribute
(
"
translation
"
,
"
1.75
"
+
yocb4
/
2.0
+
"
0
"
);
bar4
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb4
+
"
1
"
);
}
</script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer.html
View file @
29cfa78b
...
...
@@ -3,7 +3,8 @@
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Material brewer
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
></link>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body
class=
"ui-widget-content"
style=
"border:0;"
>
...
...
@@ -26,8 +27,8 @@
See
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
target=
"_blank"
>
X3D Material node definition
</a>
for an explanation of the different color attributes.
<br>
<br><b>
ambientIntensity
</b><br>
<br>
<br><b>
ambientIntensity
</b><br>
ambientIntensity: 0
<input
type=
"range"
id=
"ambientIntensity"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.2"
onchange=
"changeColor()"
/>
1
<br>
<br>
...
...
@@ -100,38 +101,39 @@
rgbstring = " "+ red + " " + green + " " + blue;
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</p>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script>
/**
* Change the settings of the directional light
*
* @param field string: Name of the field
* @param value number: New value to set
*/
function
changeColor
()
{
var
material
=
document
.
getElementById
(
"
material
"
);
var
emissive_rgb
=
"
"
+
document
.
getElementById
(
"
emissive_r
"
).
value
;
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_g
"
).
value
;
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_b
"
).
value
;
material
.
setAttribute
(
"
emissiveColor
"
,
emissive_rgb
);
var
diffuse_rgb
=
"
"
+
document
.
getElementById
(
"
diffuse_r
"
).
value
;
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_g
"
).
value
;
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_b
"
).
value
;
material
.
setAttribute
(
"
diffuseColor
"
,
diffuse_rgb
);
var
specular_rgb
=
"
"
+
document
.
getElementById
(
"
specular_r
"
).
value
;
specular_rgb
+=
"
"
+
document
.
getElementById
(
"
specular_g
"
).
value
;
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>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script>
/**
* Change the settings of the directional light
*
* @param field string: Name of the field
* @param value number: New value to set
*/
function
changeColor
()
{
var
material
=
document
.
getElementById
(
"
material
"
);
var
emissive_rgb
=
"
"
+
document
.
getElementById
(
"
emissive_r
"
).
value
;
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_g
"
).
value
;
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_b
"
).
value
;
material
.
setAttribute
(
"
emissiveColor
"
,
emissive_rgb
);
var
diffuse_rgb
=
"
"
+
document
.
getElementById
(
"
diffuse_r
"
).
value
;
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_g
"
).
value
;
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_b
"
).
value
;
material
.
setAttribute
(
"
diffuseColor
"
,
diffuse_rgb
);
var
specular_rgb
=
"
"
+
document
.
getElementById
(
"
specular_r
"
).
value
;
specular_rgb
+=
"
"
+
document
.
getElementById
(
"
specular_g
"
).
value
;
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>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer2.html
View file @
29cfa78b
...
...
@@ -102,32 +102,33 @@
rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</p>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script>
function
refreshDiffuseMaterial
()
{
var
red
=
$
(
"
#red
"
).
slider
(
"
value
"
),
green
=
$
(
"
#green
"
).
slider
(
"
value
"
),
blue
=
$
(
"
#blue
"
).
slider
(
"
value
"
);
var
mat
=
document
.
getElementById
(
"
material
"
);
rgbstring
=
"
"
+
red
/
255
+
"
"
+
green
/
255
+
"
"
+
blue
/
255
;
mat
.
setAttribute
(
"
diffuseColor
"
,
rgbstring
);
}
$
(
function
()
{
$
(
"
#red, #green, #blue
"
).
slider
({
orientation
:
"
horizontal
"
,
range
:
"
min
"
,
max
:
255
,
value
:
127
,
slide
:
refreshDiffuseMaterial
,
change
:
refreshDiffuseMaterial
});
$
(
"
#red
"
).
slider
(
"
value
"
,
255
);
$
(
"
#green
"
).
slider
(
"
value
"
,
140
);
$
(
"
#blue
"
).
slider
(
"
value
"
,
60
);
});
</script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script>
function
refreshDiffuseMaterial
()
{
var
red
=
$
(
"
#red
"
).
slider
(
"
value
"
),
green
=
$
(
"
#green
"
).
slider
(
"
value
"
),
blue
=
$
(
"
#blue
"
).
slider
(
"
value
"
);
var
mat
=
document
.
getElementById
(
"
material
"
);
rgbstring
=
"
"
+
red
/
255
+
"
"
+
green
/
255
+
"
"
+
blue
/
255
;
mat
.
setAttribute
(
"
diffuseColor
"
,
rgbstring
);
}
$
(
function
()
{
$
(
"
#red, #green, #blue
"
).
slider
({
orientation
:
"
horizontal
"
,
range
:
"
min
"
,
max
:
255
,
value
:
127
,
slide
:
refreshDiffuseMaterial
,
change
:
refreshDiffuseMaterial
});
$
(
"
#red
"
).
slider
(
"
value
"
,
255
);
$
(
"
#green
"
).
slider
(
"
value
"
,
140
);
$
(
"
#blue
"
).
slider
(
"
value
"
,
60
);
});
</script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/coordinatesystem.html
View file @
29cfa78b
...
...
@@ -107,13 +107,14 @@
</Group>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
In X3DOM, a right hand coordinate system is used. The Y-axis is pointing up.
<br>
<br>
<img
src=
"
https://flylib.com/books/2/416/1/html/2/images/fig3-3.jpg"
width=
"350"
height=
"310
"
/>
<img
src=
"
img/right_hand_system.png"
width=
"178
"
/>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/externalfile.html
0 → 100644
View file @
29cfa78b
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
External File
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
External File
</h1>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
>
<Scene>
<background
transparency=
'0'
skyColor=
'1 1 1'
></background>
<inline
id=
"inline"
url=
"x3d/HFT_Bau1_0.x3d"
></inline>
</Scene>
</X3D>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
<p>
Any X3D scene can be integrated into the Scene by using the
<
inline
>
node. The X3D model has be be
stored on a web server. The X3D file should be optimized using aopt. It is not necessary, but usually improves
performance a lot.
</p>
<pre>
<
X3D id="shapedata"
>
<
Scene
>
<
background transparency='0' skyColor='1 1 1'
><
/background
>
<
inline url="HFT_Bau1_0.x3d"
><
/inline
>
<
/Scene
>
<
/X3D
&
gt
</pre>
<select
id=
"combo"
style=
"margin-bottom:20px"
onchange=
"comboCallback();"
>
<option
value=
"x3d/HFT_Bau1_0.x3d"
>
HFT Building 1 Floor 0
</option>
<option
value=
"x3d/HFT_Bau1_1.x3d"
>
HFT Building 1 Floor 1
</option>
<option
value=
"x3d/HFT_Bau1_2.x3d"
>
HFT Building 1 Floor 2
</option>
<option
value=
"x3d/HFT_Bau1_3.x3d"
>
HFT Building 1 Floor 3
</option>
<option
value=
"x3d/HFT_Bau2_0.x3d"
>
HFT Building 2 Floor 0
</option>
<option
value=
"x3d/HFT_Bau2_3.x3d"
>
HFT Building 2 Floor 3
</option>
<option
value=
"x3d/HFT_Bau2_4.x3d"
>
HFT Building 2 Floor 4
</option>
</select>
</td>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script>
function
comboCallback
()
{
var
index
=
document
.
getElementById
(
"
combo
"
).
selectedIndex
;
var
value
=
document
.
getElementsByTagName
(
"
option
"
)[
index
].
value
;
document
.
getElementById
(
"
inline
"
).
url
=
value
;
}
</script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/hellox3dom.html
View file @
29cfa78b
...
...
@@ -16,14 +16,13 @@
<Scene>
<background
transparency=
'0'
skyColor=
'0.68, 0.95, 0.47'
>
</background>
<Shape>
<appearance
>
<appearance>
<material
diffuseColor=
'1 0 0'
></material>
</appearance>
<Box>
</Box>
</Shape>
</Scene>
</X3D>
</p>
</td>
<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
<
X3D
>
tag in the
...
...
@@ -79,7 +78,9 @@
<box></box>
</shape>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandmaterial.html
View file @
29cfa78b
...
...
@@ -47,7 +47,6 @@
</Shape>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
One shape has only ony appearance. If different colors for the building elements roof, wall and ground surfaces
...
...
@@ -97,7 +96,9 @@
<
/X3D
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtexturecoord.html
View file @
29cfa78b
...
...
@@ -67,7 +67,6 @@
</Shape>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
Example:
<a
href=
"https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using Images
...
...
@@ -88,7 +87,9 @@
<
/Appearance
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtextures.html
View file @
29cfa78b
...
...
@@ -60,7 +60,6 @@
</Shape>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
Example:
<a
href=
"https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using
...
...
@@ -81,7 +80,9 @@
<
/Appearance
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/img/Abb-Laubbaum.png
0 → 100644
View file @
29cfa78b
14.6 KB
public/X3DOMTutorial/img/Abb-Nadelbaum.png
0 → 100644
View file @
29cfa78b
12.7 KB
public/X3DOMTutorial/img/right_hand_system.png
0 → 100644
View file @
29cfa78b
17.3 KB
public/X3DOMTutorial/index.html
View file @
29cfa78b
...
...
@@ -51,6 +51,9 @@
<li><a
class=
"button"
href=
"ifsandmaterial.html"
>
indexedfaceset and material
</a></li>
<li><a
class=
"button"
href=
"ifsandtexturecoord.html"
>
indexedfaceset and texture coord
</a></li>
<li><a
class=
"button"
href=
"ifsandtextures.html"
>
indexedfaceset and textures
</a></li>
<li><a
class=
"button"
href=
"treesdeciduous.html"
>
trees deciduous
</a></li>
<li><a
class=
"button"
href=
"treesconifer.html"
>
trees conifer
</a></li>
<li><a
class=
"button"
href=
"externalfile.html"
>
external file
</a></li>
<li><a
class=
"button"
href=
"terrain.html"
>
terrain
</a></li>
<li><a
class=
"button"
href=
"barchart.html"
>
barchart
</a></li>
<li><a
class=
"button"
href=
"toytown.html"
>
toy town
</a></li>
...
...
public/X3DOMTutorial/indexedfaceset.html
View file @
29cfa78b
...
...
@@ -178,7 +178,6 @@
</Transform>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
...
...
@@ -238,7 +237,9 @@
<
/X3D
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset2.html
View file @
29cfa78b
...
...
@@ -183,7 +183,6 @@
</Transform>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
...
...
@@ -243,7 +242,9 @@
<
/X3D
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/terrain.html
View file @
29cfa78b
...
...
@@ -30,7 +30,6 @@
</Shape>
</Scene>
</X3D>
</p>
</td>
<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
<
X3D
>
tag in the
...
...
@@ -86,7 +85,9 @@
<box></box>
</shape>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/toytown.html
View file @
29cfa78b
...
...
@@ -93,12 +93,13 @@
</Transform>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
DEF / USE
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/transform.html
View file @
29cfa78b
...
...
@@ -39,7 +39,6 @@
</Transform>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
In X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The
...
...
@@ -80,7 +79,9 @@
<br>
This example illustrates how to move shapes to another location.
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/treesconifer.html
0 → 100644
View file @
29cfa78b
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Trees Conifer
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Trees Conifer
</h1>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
>
<Scene>
<background
transparency=
'0'
skyColor=
'1 1 1'
>
</background>
<transform
id=
"root"
translation=
"0 0 0"
>
<Transform
id=
"trunk"
translation=
'0 1.5 0'
>
<Shape>
<Appearance>
<Material
diffuseColor=
'0.5 0.5 0.5'
></Material>
</Appearance>
<Cylinder
id=
"geometryTrunk"
radius=
"0.2"
height=
"3"
></Cylinder>
</Shape>
</Transform>
<Transform
id=
"crown"
translation=
'0 3 0'
>
<Transform
id=
"crown-s"
scale=
'1 3.5 1'
>
<Shape>
<Appearance>
<Material
diffuseColor=
'0 1 0'
></Material>
</Appearance>
<Cone
id=
"geometryCrown"
height=
"1.0"
radius=
"2.0"
subdivision=
"8"
></Cone>
</Shape>
</Transform>
</Transform>
</transform>
</Scene>
</X3D>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
<img
src=
"img/Abb-Nadelbaum.png"
alt=
"Abb-Nadelbaum"
width=
"259"
height=
"399"
class=
"alignnone size-full wp-image-260"
/><br>
Baum Parameter:
<br>
Gesamth
ö
he h=
<input
type=
"text"
id=
"h"
name=
"h"
size=
"5"
value=
"10"
/>
m
<br>
H
ö
he Stamm ht=
<input
type=
"text"
id=
"ht"
name=
"ht"
size=
"5"
value=
"3"
/>
m
<br>
Kronendurchmesser dc=
<input
type=
"text"
id=
"dc"
name=
"Kronendurchmesser"
size=
"5"
value=
"4"
/>
m
<br>
Stammdurchmesser dt=
<input
type=
"text"
id=
"dt"
name=
"Stammdurchmesser"
size=
"5"
value=
"0.4"
/>
m
<br>
Position:
<input
type=
"text"
id=
"pos_x"
name=
"pos_x"
size=
"5"
value=
"0"
/>
<input
type=
"text"
id=
"pos_y"
name=
"pos_y"
size=
"5"
value=
"0"
/>
<input
type=
"text"
id=
"pos_z"
name=
"pos_z"
size=
"5"
value=
"0"
/><br>
<input
type=
"button"
value=
"DrawTree"
onclick=
"drawTree()"
/><br><b>
Approximation Stamm
</b><br>
subdivision: 4
<input
type=
"range"
id=
"subdivTrunk"
min=
"4"
max=
"64"
step=
"1"
value=
"32"
onchange=
"changeSubDivisionTrunk()"
/>
64
<br>
<b>
Approximation Krone
</b><br>
subdivision: 4
<input
type=
"range"
id=
"subdivCrown"
min=
"4"
max=
"64"
step=
"1"
value=
"8"
onchange=
"changeSubDivisionCrown()"
/>
64
</td>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script
type=
"text/javascript"
>
function
drawTree
()
{
// read input parameter
var
h
=
document
.
getElementById
(
"
h
"
).
value
;
var
ht
=
document
.
getElementById
(
"
ht
"
).
value
;
var
dc
=
document
.
getElementById
(
"
dc
"
).
value
;
var
dt
=
document
.
getElementById
(
"
dt
"
).
value
;
var
x
=
document
.
getElementById
(
"
pos_x
"
).
value
;
var
y
=
document
.
getElementById
(
"
pos_y
"
).
value
;
var
z
=
document
.
getElementById
(
"
pos_z
"
).
value
;
// get X3D nodes
var
transformTree
=
document
.
getElementById
(
'
root
'
);
var
transformTrunk
=
document
.
getElementById
(
'
trunk
'
);
var
geometryTrunk
=
document
.
getElementById
(
'
geometryTrunk
'
);
var
transformCrown
=
document
.
getElementById
(
'
crown
'
);
var
scaleCrown
=
document
.
getElementById
(
'
crown-s
'
);
var
geometryCrown
=
document
.
getElementById
(
'
geometryCrown
'
);
// map input parameter to X3D model
// trunk
transformTrunk
.
setAttribute
(
"
translation
"
,
"
0
"
+
ht
/
2
+
"
0
"
);
geometryTrunk
.
setAttribute
(
"
radius
"
,
"
"
+
dt
/
2
);
geometryTrunk
.
setAttribute
(
"
height
"
,
ht
);
// crown
transformCrown
.
setAttribute
(
"
translation
"
,
"
0
"
+
ht
+
"
0
"
);
scaleCrown
.
setAttribute
(
"
scale
"
,
"
1
"
+
(
h
-
ht
)
/
2
+
"
1
"
);
geometryCrown
.
setAttribute
(
"
radius
"
,
dc
/
2
);
// position
transformTree
.
setAttribute
(
"
translation
"
,
x
+
"
"
+
y
+
"
"
+
z
);
}
function
changeSubDivisionTrunk
()
{
var
trunk
=
document
.
getElementById
(
"
geometryTrunk
"
);
var
subdiv
=
document
.
getElementById
(
"
subdivTrunk
"
).
value
;
trunk
.
setAttribute
(
"
subdivision
"
,
subdiv
);
}
function
changeSubDivisionCrown
()
{
var
crown
=
document
.
getElementById
(
"
geometryCrown
"
);
var
subdiv
=
document
.
getElementById
(
"
subdivCrown
"
).
value
;
crown
.
setAttribute
(
"
subdivision
"
,
subdiv
);
}
</script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/treesdeciduous.html
View file @
29cfa78b
...
...
@@ -12,65 +12,105 @@
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
>
<Scene>
<background
transparency=
'0'
skyColor=
'1 1 1'
>
</background>
<transform
id=
"root"
translation=
"0 0 0"
>
<Transform
id=
"trunk"
translation=
'0 1.5 0'
>
<Shape>
<Appearance>
<Material
diffuseColor=
'0.5 0.5 0.5'
></Material>
</Appearance>
<Cylinder
id=
"geometryTrunk"
radius=
"0.2"
height=
"3"
></Cylinder>
</Shape>
</Transform>
<Transform
id=
"crown"
translation=
'0 6.5 0'
>
<Transform
id=
"crown-s"
scale=
'1 1.75 1'
>
<Shape>
<Appearance>
<Material
diffuseColor=
'0 1 0'
></Material>
</Appearance>
<Sphere
id=
"geometryCrown"
radius=
"2.0"
subdivision=
"8,8"
></Sphere>
</Shape>
</Transform>
</Transform>
</transform>
</Scene>
</X3D>
</td>
<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
<
X3D
>
tag in the
HTML document.
The
<
X3D
>
tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the
library or use it
from the server. It is recommended to use the library from the server to ensure that you always have the latest
version.
A local copy of the library is useful for development, if you are not always connected.
<br>
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
Shape id=box
>
<
Box
>
<
/Box
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
The
<
X3D
>
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"
target=
"_blank"
>
X3D scene graph
</a>
is defined as a directed acyclic graph.
The nodes of the scene graph will be rendered on the screen from a given camera position.
The default camera position is (0,0,10) pointing to the negative z-Axis.
So objects at the center of the coordinate system will be displayed on the screen.
A shape node contains a geometry. In this example, it is a simple box. The center of the box is at (0,0,0) with
default size 2 in all dimensions
<br>
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
model
</a>
with arithmetic notation (0.0 t0 1.0 per value).
<br>
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
node
</a>
associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box.
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
Shape id=box
>
<
appearance
>
<
material diffuseColor='0 0 1'
><
/material
>
<
/appearance
>
<
Box
>
<
/Box
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
<shape>
<box></box>
</shape>
<img
src=
"img/Abb-Laubbaum.png"
alt=
"Abb-Laubbaum"
width=
"259"
height=
"398"
class=
"alignnone size-full wp-image-252"
/><br>
Baum Parameter:
<br>
Gesamth
ö
he h=
<input
type=
"text"
id=
"h"
name=
"h"
size=
"5"
value=
"10"
/>
m
<br>
H
ö
he Stamm ht=
<input
type=
"text"
id=
"ht"
name=
"ht"
size=
"5"
value=
"3"
/>
m
<br>
Kronendurchmesser dc=
<input
type=
"text"
id=
"dc"
name=
"Kronendurchmesser"
size=
"5"
value=
"4"
/>
m
<br>
Stammdurchmesser dt=
<input
type=
"text"
id=
"dt"
name=
"Stammdurchmesser"
size=
"5"
value=
"0.4"
/>
m
<br>
Position:
<input
type=
"text"
id=
"pos_x"
name=
"pos_x"
size=
"5"
value=
"0"
/>
<input
type=
"text"
id=
"pos_y"
name=
"pos_y"
size=
"5"
value=
"0"
/>
<input
type=
"text"
id=
"pos_z"
name=
"pos_z"
size=
"5"
value=
"0"
/><br>
<input
type=
"button"
value=
"DrawTree"
onclick=
"drawTree()"
/><br>
<b>
Approximation Stamm
</b><br>
subdivision: 4
<input
type=
"range"
id=
"subdivTrunk"
min=
"4"
max=
"64"
step=
"1"
value=
"32"
onchange=
"changeSubDivisionTrunk()"
/>
64
<br>
<b>
Approximation Krone
</b><br>
subdivision: 4
<input
type=
"range"
id=
"subdivCrown"
min=
"4"
max=
"64"
step=
"1"
value=
"8"
onchange=
"changeSubDivisionCrown()"
/>
64
</td>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<script
type=
"text/javascript"
>
function
drawTree
()
{
// read input parameter
var
h
=
document
.
getElementById
(
"
h
"
).
value
;
var
ht
=
document
.
getElementById
(
"
ht
"
).
value
;
var
dc
=
document
.
getElementById
(
"
dc
"
).
value
;
var
dt
=
document
.
getElementById
(
"
dt
"
).
value
;
var
x
=
document
.
getElementById
(
"
pos_x
"
).
value
;
var
y
=
document
.
getElementById
(
"
pos_y
"
).
value
;
var
z
=
document
.
getElementById
(
"
pos_z
"
).
value
;
// get X3D nodes
var
transformTree
=
document
.
getElementById
(
'
root
'
);
var
transformTrunk
=
document
.
getElementById
(
'
trunk
'
);
var
geometryTrunk
=
document
.
getElementById
(
'
geometryTrunk
'
);
var
transformCrown
=
document
.
getElementById
(
'
crown
'
);
var
scaleCrown
=
document
.
getElementById
(
'
crown-s
'
);
var
geometryCrown
=
document
.
getElementById
(
'
geometryCrown
'
);
// map input parameter to X3D model
// trunk
transformTrunk
.
setAttribute
(
"
translation
"
,
"
0
"
+
ht
/
2
+
"
0
"
);
geometryTrunk
.
setAttribute
(
"
radius
"
,
"
"
+
dt
/
2
);
geometryTrunk
.
setAttribute
(
"
height
"
,
ht
);
// crown
transformCrown
.
setAttribute
(
"
translation
"
,
"
0
"
+
(
h
/
2
+
ht
/
2
)
+
"
0
"
);
scaleCrown
.
setAttribute
(
"
scale
"
,
"
1
"
+
(
h
-
ht
)
/
dc
+
"
1
"
);
geometryCrown
.
setAttribute
(
"
radius
"
,
dc
/
2
);
// position
transformTree
.
setAttribute
(
"
translation
"
,
x
+
"
"
+
y
+
"
"
+
z
);
}
function
changeSubDivisionTrunk
()
{
var
trunk
=
document
.
getElementById
(
"
geometryTrunk
"
);
var
subdiv
=
document
.
getElementById
(
"
subdivTrunk
"
).
value
;
trunk
.
setAttribute
(
"
subdivision
"
,
subdiv
);
}
function
changeSubDivisionTrunk
()
{
var
trunk
=
document
.
getElementById
(
"
geometryTrunk
"
);
var
subdiv
=
document
.
getElementById
(
"
subdivTrunk
"
).
value
;
trunk
.
setAttribute
(
"
subdivision
"
,
subdiv
);
}
function
changeSubDivisionCrown
()
{
var
crown
=
document
.
getElementById
(
"
geometryCrown
"
);
var
subdiv
=
document
.
getElementById
(
"
subdivCrown
"
).
value
;
crown
.
setAttribute
(
"
subdivision
"
,
subdiv
+
"
,
"
+
subdiv
);
}
</script>
</body>
</html>
</html>
\ No newline at end of file
Prev
1
2
Next
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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