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 @@
...
@@ -112,7 +112,6 @@
</Transform>
</Transform>
</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"
>
Bar chart example
<br>
<br>
Bar chart example
<br>
<br>
...
@@ -125,37 +124,39 @@
...
@@ -125,37 +124,39 @@
<input
type=
"text"
id=
"yoc-b4"
value=
"1985"
size=
"12"
/><br>
<input
type=
"text"
id=
"yoc-b4"
value=
"1985"
size=
"12"
/><br>
<input
type=
"button"
value=
"draw"
onclick=
"drawBarChart()"
/>
<br>
<input
type=
"button"
value=
"draw"
onclick=
"drawBarChart()"
/>
<br>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
<script>
</table>
function
drawBarChart
()
{
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
var
labelx
=
document
.
getElementById
(
"
label-x
"
).
value
;
<script>
var
chartlabelx
=
document
.
getElementById
(
"
chartlabel-x
"
);
function
drawBarChart
()
{
chartlabelx
.
setAttribute
(
"
string
"
,
labelx
);
var
labelx
=
document
.
getElementById
(
"
label-x
"
).
value
;
var
labely
=
document
.
getElementById
(
"
label-y
"
).
value
;
var
chartlabelx
=
document
.
getElementById
(
"
chartlabel-x
"
);
var
chartlabely
=
document
.
getElementById
(
"
chartlabel-y
"
);
chartlabelx
.
setAttribute
(
"
string
"
,
labelx
);
chartlabely
.
setAttribute
(
"
string
"
,
labely
);
var
labely
=
document
.
getElementById
(
"
label-y
"
).
value
;
var
yocb1
=
document
.
getElementById
(
"
yoc-b1
"
).
value
;
var
chartlabely
=
document
.
getElementById
(
"
chartlabel-y
"
);
var
yocb2
=
document
.
getElementById
(
"
yoc-b2
"
).
value
;
chartlabely
.
setAttribute
(
"
string
"
,
labely
);
var
yocb3
=
document
.
getElementById
(
"
yoc-b3
"
).
value
;
var
yocb1
=
document
.
getElementById
(
"
yoc-b1
"
).
value
;
var
yocb4
=
document
.
getElementById
(
"
yoc-b4
"
).
value
;
var
yocb2
=
document
.
getElementById
(
"
yoc-b2
"
).
value
;
yocb1
=
(
yocb1
-
1950
)
/
10
;
var
yocb3
=
document
.
getElementById
(
"
yoc-b3
"
).
value
;
var
bar1
=
document
.
getElementById
(
"
bar1
"
);
var
yocb4
=
document
.
getElementById
(
"
yoc-b4
"
).
value
;
bar1
.
setAttribute
(
"
translation
"
,
"
0.25
"
+
yocb1
/
2.0
+
"
0
"
);
yocb1
=
(
yocb1
-
1950
)
/
10
;
bar1
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb1
+
"
1
"
);
var
bar1
=
document
.
getElementById
(
"
bar1
"
);
yocb2
=
(
yocb2
-
1950
)
/
10
;
bar1
.
setAttribute
(
"
translation
"
,
"
0.25
"
+
yocb1
/
2.0
+
"
0
"
);
var
bar2
=
document
.
getElementById
(
"
bar2
"
);
bar1
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb1
+
"
1
"
);
bar2
.
setAttribute
(
"
translation
"
,
"
0.75
"
+
yocb2
/
2.0
+
"
0
"
);
yocb2
=
(
yocb2
-
1950
)
/
10
;
bar2
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb2
+
"
1
"
);
var
bar2
=
document
.
getElementById
(
"
bar2
"
);
yocb3
=
(
yocb3
-
1950
)
/
10
;
bar2
.
setAttribute
(
"
translation
"
,
"
0.75
"
+
yocb2
/
2.0
+
"
0
"
);
var
bar3
=
document
.
getElementById
(
"
bar3
"
);
bar2
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb2
+
"
1
"
);
bar3
.
setAttribute
(
"
translation
"
,
"
1.25
"
+
yocb3
/
2.0
+
"
0
"
);
yocb3
=
(
yocb3
-
1950
)
/
10
;
bar3
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb3
+
"
1
"
);
var
bar3
=
document
.
getElementById
(
"
bar3
"
);
yocb4
=
(
yocb4
-
1950
)
/
10
;
bar3
.
setAttribute
(
"
translation
"
,
"
1.25
"
+
yocb3
/
2.0
+
"
0
"
);
var
bar4
=
document
.
getElementById
(
"
bar4
"
);
bar3
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb3
+
"
1
"
);
bar4
.
setAttribute
(
"
translation
"
,
"
1.75
"
+
yocb4
/
2.0
+
"
0
"
);
yocb4
=
(
yocb4
-
1950
)
/
10
;
bar4
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb4
+
"
1
"
);
var
bar4
=
document
.
getElementById
(
"
bar4
"
);
}
bar4
.
setAttribute
(
"
translation
"
,
"
1.75
"
+
yocb4
/
2.0
+
"
0
"
);
</script>
bar4
.
setAttribute
(
"
scale
"
,
"
1
"
+
yocb4
+
"
1
"
);
}
</script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer.html
View file @
29cfa78b
...
@@ -3,7 +3,8 @@
...
@@ -3,7 +3,8 @@
<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>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
</head>
<body
class=
"ui-widget-content"
style=
"border:0;"
>
<body
class=
"ui-widget-content"
style=
"border:0;"
>
...
@@ -26,8 +27,8 @@
...
@@ -26,8 +27,8 @@
See
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
See
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
target=
"_blank"
>
target=
"_blank"
>
X3D Material node definition
</a>
for an explanation of the different color attributes.
X3D Material node definition
</a>
for an explanation of the different color attributes.
<br>
<br>
<br><b>
ambientIntensity
</b><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"
ambientIntensity: 0
<input
type=
"range"
id=
"ambientIntensity"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.2"
onchange=
"changeColor()"
/>
1
<br>
onchange=
"changeColor()"
/>
1
<br>
<br>
<br>
...
@@ -100,38 +101,39 @@
...
@@ -100,38 +101,39 @@
rgbstring = " "+ red + " " + green + " " + blue;
rgbstring = " "+ red + " " + green + " " + blue;
mat.setAttribute("diffuseColor", rgbstring);
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</pre>
</p>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
<script>
</table>
/**
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
* Change the settings of the directional light
<script>
*
/**
* @param field string: Name of the field
* Change the settings of the directional light
* @param value number: New value to set
*
*/
* @param field string: Name of the field
function
changeColor
()
{
* @param value number: New value to set
var
material
=
document
.
getElementById
(
"
material
"
);
*/
var
emissive_rgb
=
"
"
+
document
.
getElementById
(
"
emissive_r
"
).
value
;
function
changeColor
()
{
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_g
"
).
value
;
var
material
=
document
.
getElementById
(
"
material
"
);
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_b
"
).
value
;
var
emissive_rgb
=
"
"
+
document
.
getElementById
(
"
emissive_r
"
).
value
;
material
.
setAttribute
(
"
emissiveColor
"
,
emissive_rgb
);
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_g
"
).
value
;
var
diffuse_rgb
=
"
"
+
document
.
getElementById
(
"
diffuse_r
"
).
value
;
emissive_rgb
+=
"
"
+
document
.
getElementById
(
"
emissive_b
"
).
value
;
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_g
"
).
value
;
material
.
setAttribute
(
"
emissiveColor
"
,
emissive_rgb
);
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_b
"
).
value
;
var
diffuse_rgb
=
"
"
+
document
.
getElementById
(
"
diffuse_r
"
).
value
;
material
.
setAttribute
(
"
diffuseColor
"
,
diffuse_rgb
);
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_g
"
).
value
;
var
specular_rgb
=
"
"
+
document
.
getElementById
(
"
specular_r
"
).
value
;
diffuse_rgb
+=
"
"
+
document
.
getElementById
(
"
diffuse_b
"
).
value
;
specular_rgb
+=
"
"
+
document
.
getElementById
(
"
specular_g
"
).
value
;
material
.
setAttribute
(
"
diffuseColor
"
,
diffuse_rgb
);
specular_rgb
+=
"
"
+
document
.
getElementById
(
"
specular_b
"
).
value
;
var
specular_rgb
=
"
"
+
document
.
getElementById
(
"
specular_r
"
).
value
;
material
.
setAttribute
(
"
specularColor
"
,
specular_rgb
);
specular_rgb
+=
"
"
+
document
.
getElementById
(
"
specular_g
"
).
value
;
var
ambientIntensity
=
"
"
+
document
.
getElementById
(
"
ambientIntensity
"
).
value
;
specular_rgb
+=
"
"
+
document
.
getElementById
(
"
specular_b
"
).
value
;
material
.
setAttribute
(
"
ambientIntensity
"
,
ambientIntensity
);
material
.
setAttribute
(
"
specularColor
"
,
specular_rgb
);
var
shininess
=
"
"
+
document
.
getElementById
(
"
shininess
"
).
value
;
var
ambientIntensity
=
"
"
+
document
.
getElementById
(
"
ambientIntensity
"
).
value
;
material
.
setAttribute
(
"
shininess
"
,
shininess
);
material
.
setAttribute
(
"
ambientIntensity
"
,
ambientIntensity
);
var
transparency
=
"
"
+
document
.
getElementById
(
"
transparency
"
).
value
;
var
shininess
=
"
"
+
document
.
getElementById
(
"
shininess
"
).
value
;
material
.
setAttribute
(
"
transparency
"
,
transparency
);
material
.
setAttribute
(
"
shininess
"
,
shininess
);
}
var
transparency
=
"
"
+
document
.
getElementById
(
"
transparency
"
).
value
;
</script>
material
.
setAttribute
(
"
transparency
"
,
transparency
);
}
</script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer2.html
View file @
29cfa78b
...
@@ -102,32 +102,33 @@
...
@@ -102,32 +102,33 @@
rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
mat.setAttribute("diffuseColor", rgbstring);
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</pre>
</p>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
<script>
</table>
function
refreshDiffuseMaterial
()
{
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
var
red
=
$
(
"
#red
"
).
slider
(
"
value
"
),
<script>
green
=
$
(
"
#green
"
).
slider
(
"
value
"
),
function
refreshDiffuseMaterial
()
{
blue
=
$
(
"
#blue
"
).
slider
(
"
value
"
);
var
red
=
$
(
"
#red
"
).
slider
(
"
value
"
),
var
mat
=
document
.
getElementById
(
"
material
"
);
green
=
$
(
"
#green
"
).
slider
(
"
value
"
),
rgbstring
=
"
"
+
red
/
255
+
"
"
+
green
/
255
+
"
"
+
blue
/
255
;
blue
=
$
(
"
#blue
"
).
slider
(
"
value
"
);
mat
.
setAttribute
(
"
diffuseColor
"
,
rgbstring
);
var
mat
=
document
.
getElementById
(
"
material
"
);
}
rgbstring
=
"
"
+
red
/
255
+
"
"
+
green
/
255
+
"
"
+
blue
/
255
;
$
(
function
()
{
mat
.
setAttribute
(
"
diffuseColor
"
,
rgbstring
);
$
(
"
#red, #green, #blue
"
).
slider
({
}
orientation
:
"
horizontal
"
,
$
(
function
()
{
range
:
"
min
"
,
$
(
"
#red, #green, #blue
"
).
slider
({
max
:
255
,
orientation
:
"
horizontal
"
,
value
:
127
,
range
:
"
min
"
,
slide
:
refreshDiffuseMaterial
,
max
:
255
,
change
:
refreshDiffuseMaterial
value
:
127
,
});
slide
:
refreshDiffuseMaterial
,
$
(
"
#red
"
).
slider
(
"
value
"
,
255
);
change
:
refreshDiffuseMaterial
$
(
"
#green
"
).
slider
(
"
value
"
,
140
);
});
$
(
"
#blue
"
).
slider
(
"
value
"
,
60
);
$
(
"
#red
"
).
slider
(
"
value
"
,
255
);
});
$
(
"
#green
"
).
slider
(
"
value
"
,
140
);
</script>
$
(
"
#blue
"
).
slider
(
"
value
"
,
60
);
});
</script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/coordinatesystem.html
View file @
29cfa78b
...
@@ -107,13 +107,14 @@
...
@@ -107,13 +107,14 @@
</Group>
</Group>
</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 X3DOM, a right hand coordinate system is used. The Y-axis is pointing up.
<br>
<br>
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>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</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 @@
...
@@ -16,14 +16,13 @@
<Scene>
<Scene>
<background
transparency=
'0'
skyColor=
'0.68, 0.95, 0.47'
>
</background>
<background
transparency=
'0'
skyColor=
'0.68, 0.95, 0.47'
>
</background>
<Shape>
<Shape>
<appearance
>
<appearance>
<material
diffuseColor=
'1 0 0'
></material>
<material
diffuseColor=
'1 0 0'
></material>
</appearance>
</appearance>
<Box>
</Box>
<Box>
</Box>
</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
<
X3D
>
tag in the
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 @@
...
@@ -79,7 +78,9 @@
<box></box>
<box></box>
</shape>
</shape>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandmaterial.html
View file @
29cfa78b
...
@@ -47,7 +47,6 @@
...
@@ -47,7 +47,6 @@
</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"
>
One shape has only ony appearance. If different colors for the building elements roof, wall and ground surfaces
One shape has only ony appearance. If different colors for the building elements roof, wall and ground surfaces
...
@@ -97,7 +96,9 @@
...
@@ -97,7 +96,9 @@
<
/X3D
>
<
/X3D
>
</pre>
</pre>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtexturecoord.html
View file @
29cfa78b
...
@@ -67,7 +67,6 @@
...
@@ -67,7 +67,6 @@
</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"
>
Example:
<a
href=
"https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using Images
Example:
<a
href=
"https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using Images
...
@@ -88,7 +87,9 @@
...
@@ -88,7 +87,9 @@
<
/Appearance
>
<
/Appearance
>
</pre>
</pre>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtextures.html
View file @
29cfa78b
...
@@ -60,7 +60,6 @@
...
@@ -60,7 +60,6 @@
</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"
>
Example:
<a
href=
"https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using
Example:
<a
href=
"https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using
...
@@ -81,7 +80,9 @@
...
@@ -81,7 +80,9 @@
<
/Appearance
>
<
/Appearance
>
</pre>
</pre>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</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 @@
...
@@ -51,6 +51,9 @@
<li><a
class=
"button"
href=
"ifsandmaterial.html"
>
indexedfaceset and material
</a></li>
<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=
"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=
"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=
"terrain.html"
>
terrain
</a></li>
<li><a
class=
"button"
href=
"barchart.html"
>
barchart
</a></li>
<li><a
class=
"button"
href=
"barchart.html"
>
barchart
</a></li>
<li><a
class=
"button"
href=
"toytown.html"
>
toy town
</a></li>
<li><a
class=
"button"
href=
"toytown.html"
>
toy town
</a></li>
...
...
public/X3DOMTutorial/indexedfaceset.html
View file @
29cfa78b
...
@@ -178,7 +178,6 @@
...
@@ -178,7 +178,6 @@
</Transform>
</Transform>
</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"
>
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
...
@@ -238,7 +237,9 @@
...
@@ -238,7 +237,9 @@
<
/X3D
>
<
/X3D
>
</pre>
</pre>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset2.html
View file @
29cfa78b
...
@@ -183,7 +183,6 @@
...
@@ -183,7 +183,6 @@
</Transform>
</Transform>
</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"
>
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
...
@@ -243,7 +242,9 @@
...
@@ -243,7 +242,9 @@
<
/X3D
>
<
/X3D
>
</pre>
</pre>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/terrain.html
View file @
29cfa78b
...
@@ -30,7 +30,6 @@
...
@@ -30,7 +30,6 @@
</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
<
X3D
>
tag in the
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 @@
...
@@ -86,7 +85,9 @@
<box></box>
<box></box>
</shape>
</shape>
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/toytown.html
View file @
29cfa78b
...
@@ -93,12 +93,13 @@
...
@@ -93,12 +93,13 @@
</Transform>
</Transform>
</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"
>
DEF / USE
DEF / USE
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/transform.html
View file @
29cfa78b
...
@@ -39,7 +39,6 @@
...
@@ -39,7 +39,6 @@
</Transform>
</Transform>
</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 X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The
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 @@
...
@@ -80,7 +79,9 @@
<br>
<br>
This example illustrates how to move shapes to another location.
This example illustrates how to move shapes to another location.
</td>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</tr>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</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 @@
...
@@ -12,65 +12,105 @@
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<tr>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<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>
<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
<
X3D
>
tag in the
<img
src=
"img/Abb-Laubbaum.png"
alt=
"Abb-Laubbaum"
width=
"259"
height=
"398"
HTML document.
class=
"alignnone size-full wp-image-252"
/><br>
The
<
X3D
>
tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the
Baum Parameter:
<br>
library or use it
Gesamth
ö
he h=
<input
type=
"text"
id=
"h"
name=
"h"
size=
"5"
value=
"10"
/>
m
<br>
from the server. It is recommended to use the library from the server to ensure that you always have the latest
H
ö
he Stamm ht=
<input
type=
"text"
id=
"ht"
name=
"ht"
size=
"5"
value=
"3"
/>
m
<br>
version.
Kronendurchmesser dc=
<input
type=
"text"
id=
"dc"
name=
"Kronendurchmesser"
size=
"5"
value=
"4"
/>
m
<br>
A local copy of the library is useful for development, if you are not always connected.
Stammdurchmesser dt=
<input
type=
"text"
id=
"dt"
name=
"Stammdurchmesser"
size=
"5"
value=
"0.4"
/>
m
<br>
<br>
Position:
<pre
class=
"prettyprint"
>
<input
type=
"text"
id=
"pos_x"
name=
"pos_x"
size=
"5"
value=
"0"
/>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<input
type=
"text"
id=
"pos_y"
name=
"pos_y"
size=
"5"
value=
"0"
/>
<
Scene
>
<input
type=
"text"
id=
"pos_z"
name=
"pos_z"
size=
"5"
value=
"0"
/><br>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<input
type=
"button"
value=
"DrawTree"
onclick=
"drawTree()"
/><br>
<
Shape id=box
>
<b>
Approximation Stamm
</b><br>
<
Box
>
<
/Box
>
subdivision: 4
<input
type=
"range"
id=
"subdivTrunk"
min=
"4"
max=
"64"
step=
"1"
value=
"32"
<
/Shape
>
onchange=
"changeSubDivisionTrunk()"
/>
64
<br>
<
/Scene
>
<b>
Approximation Krone
</b><br>
<
/X3D
>
subdivision: 4
<input
type=
"range"
id=
"subdivCrown"
min=
"4"
max=
"64"
step=
"1"
value=
"8"
</pre>
onchange=
"changeSubDivisionCrown()"
/>
64
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>
</td>
</td>
</tr>
</tr>
</table>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<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>
</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