Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Volker Coors
Visualization
Commits
7018135a
Commit
7018135a
authored
May 19, 2021
by
Athanasios
Browse files
Add X3DOM tutorials
parent
8faf9dd5
Pipeline
#3781
passed with stages
in 25 seconds
Changes
21
Pipelines
1
Expand all
Show whitespace changes
Inline
Side-by-side
public/X3DOMTutorial/addnode.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>
Add/Remove Nodes example
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"./x3dom.css"
>
</head>
<body>
<h1>
Add/Remove Nodes Example
</h1>
<p>
simple example which shows how to add/remove nodes using a simple DOM appendChild()/removeChild() function
</p>
<x3d
id=
"boxes"
showstat=
"true"
x=
"0px"
y=
"0px"
width=
"600px"
height=
"300px"
>
<scene
render=
"true"
bboxcenter=
"0,0,0"
bboxsize=
"-1,-1,-1"
pickmode=
"idBuf"
dopickpass=
"true"
>
<viewpoint
position=
"4.88104 4.59865 7.4181"
orientation=
"-0.69017 0.723467 -0.0161809 0.735134"
fieldofview=
"0.785398"
centerofrotation=
"0,0,0"
znear=
"-1"
zfar=
"-1"
></viewpoint>
<background
def=
"bgnd"
transparency=
"0"
skycolor=
"1 1 1"
groundcolor=
""
groundangle=
""
skyangle=
""
backurl=
""
bottomurl=
""
fronturl=
""
lefturl=
""
righturl=
""
topurl=
""
></background>
<transform
id=
"root"
translation=
"0 0 0"
render=
"true"
bboxcenter=
"0,0,0"
bboxsize=
"-1,-1,-1"
center=
"0,0,0"
rotation=
"0,0,0,0"
scale=
"1,1,1"
scaleorientation=
"0,0,0,0"
>
<shape
render=
"true"
bboxcenter=
"0,0,0"
bboxsize=
"-1,-1,-1"
ispickable=
"true"
>
<appearance
sorttype=
"auto"
>
<material
ambientintensity=
"0.2"
diffusecolor=
"0.8,0.8,0.8"
emissivecolor=
"0,0,0"
shininess=
"0.2"
specularcolor=
"0,0,0"
></material>
</appearance>
<box
solid=
"true"
ccw=
"true"
usegeocache=
"true"
lit=
"true"
size=
"2,2,2"
></box>
</shape>
<transform
translation=
"1.5160652180202305 1.489243873860687 -2.648085524328053"
scale=
"1.2286848302464932 0.7494203578680754 1.357877661474049"
render=
"true"
bboxcenter=
"0,0,0"
bboxsize=
"-1,-1,-1"
center=
"0,0,0"
rotation=
"0,0,0,0"
scaleorientation=
"0,0,0,0"
>
<shape
render=
"true"
bboxcenter=
"0,0,0"
bboxsize=
"-1,-1,-1"
ispickable=
"true"
>
<appearance
sorttype=
"auto"
>
<material
ambientintensity=
"0.2"
diffusecolor=
"0.8,0.8,0.8"
emissivecolor=
"0,0,0"
shininess=
"0.2"
specularcolor=
"0,0,0"
></material>
</appearance>
<box
solid=
"true"
ccw=
"true"
usegeocache=
"true"
lit=
"true"
size=
"2,2,2"
></box>
</shape>
</transform>
</transform>
</scene>
<div
class=
"x3dom-progress"
style=
"display: none;"
><strong>
Loading: 0
</strong><span
style=
"width: 25%;"
>
</span>
</div>
</x3d>
<p>
Dynamic childtree update
</p>
<input
type=
"button"
value=
"Add Child"
onclick=
"addNode();"
>
<input
type=
"button"
value=
"Remove Child"
onclick=
"removeNode();"
>
<script
type=
"text/javascript"
>
function
addNode
()
{
x
=
Math
.
random
()
*
6
-
3
;
y
=
Math
.
random
()
*
6
-
3
;
z
=
Math
.
random
()
*
6
-
3
;
s0
=
Math
.
random
()
+
0.5
;
s1
=
Math
.
random
()
+
0.5
;
s2
=
Math
.
random
()
+
0.5
;
var
t
=
document
.
createElement
(
'
Transform
'
);
t
.
setAttribute
(
"
translation
"
,
x
+
"
"
+
y
+
"
"
+
z
);
t
.
setAttribute
(
"
scale
"
,
s0
+
"
"
+
s1
+
"
"
+
s2
);
var
s
=
document
.
createElement
(
'
Shape
'
);
// Appearance Node
var
app
=
document
.
createElement
(
'
Appearance
'
);
// Material Node
var
mat
=
document
.
createElement
(
'
Material
'
);
app
.
appendChild
(
mat
);
s
.
appendChild
(
app
);
t
.
appendChild
(
s
);
var
b
=
document
.
createElement
(
'
Box
'
);
s
.
appendChild
(
b
);
var
ot
=
document
.
getElementById
(
'
root
'
);
ot
.
appendChild
(
t
);
return
false
;
};
function
removeNode
()
{
var
ot
=
document
.
getElementById
(
'
root
'
);
for
(
var
i
=
0
;
i
<
ot
.
childNodes
.
length
;
i
++
)
{
// check if we have a real X3DOM Node; not just e.g. a Text-tag
if
(
ot
.
childNodes
[
i
].
nodeType
===
Node
.
ELEMENT_NODE
)
{
ot
.
removeChild
(
ot
.
childNodes
[
i
]);
break
;
}
}
return
false
;
};
</script>
<script
type=
"text/javascript"
src=
"./x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/barchart.html
0 → 100644
View file @
7018135a
<html
xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Bar Chart
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Coordinate system
</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"
style=
"float:left"
>
<Scene>
<background
transparency=
'0'
skyColor=
'1 1 1'
>
</background>
<!-- Invoke CoordinateAxes in other scenes as an Inline child inside a scaling Transform node, at the topmost level of the scene graph. -->
<!-- Each arrow goes from +1m to -1m to allow linear scaling to fit a scene -->
<!-- Note each label rotates about the scene's vertical Y axis for consistency, enabling local orientation by user -->
<Group>
<!-- Vertical Y arrow and label -->
<Group
DEF=
'ArrowGreen'
>
<Transform
translation=
'0 1 0'
>
<Shape>
<Appearance
DEF=
'Green'
>
<Material
diffuseColor=
'0 1 0'
>
</Material>
</Appearance>
<Cylinder
DEF=
'ArrowCylinder'
radius=
'.025'
top=
'false'
>
</Cylinder>
</Shape>
</Transform>
<Transform
translation=
'0 2 0'
>
<Shape>
<Appearance
USE=
'Green'
>
</Appearance>
<Cone
DEF=
'ArrowCone'
bottomRadius=
'.05'
height=
'.1'
>
</Cone>
</Shape>
</Transform>
</Group>
<Transform
translation=
'0 2.08 0'
>
<Billboard>
<Shape>
<Appearance
DEF=
'LABEL_APPEARANCE'
>
<Material
diffuseColor=
'0 0 0'
>
</Material>
</Appearance>
<Text
id=
'chartlabel-y'
string=
'"year"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
<Transform
rotation=
'0 0 1 -1.57079'
>
<!-- Horizontal X arrow and label -->
<Group
DEF=
'ArrowRed'
>
<Transform
translation=
'0 1 0'
>
<Shape>
<Appearance
DEF=
'Red'
>
<Material
diffuseColor=
'.7 .1 .1'
emissiveColor=
'.33 0 0'
/>
</Appearance>
<Cylinder
USE=
'ArrowCylinder'
>
</Cylinder>
</Shape>
</Transform>
<Transform
translation=
'0 2 0'
>
<Shape>
<Appearance
USE=
'Red'
>
</Appearance>
<Cone
USE=
'ArrowCone'
>
</Cone>
</Shape>
</Transform>
</Group>
<Transform
rotation=
'0 0 1 1.57079'
translation=
'0 2 0'
>
<!-- note label rotated back to original coordinate frame -->
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
id=
'chartlabel-x'
string=
'"building id"'
>
<FontStyle
USE=
'LABEL_FONT'
>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- bars -->
<Transform
id=
"bar1"
translation=
'0.25 0.5 0'
>
<Shape>
<Appearance
DEF=
'BAR_COLOR'
>
<Material
diffuseColor=
'1 0 1'
>
</Material>
</Appearance>
<Box
size=
'0.025 1 0.025'
>
</Box>
</Shape>
</Transform>
<Transform
id=
"bar2"
translation=
'0.75 0.5 0'
>
<Shape>
<Appearance
USE=
'BAR_COLOR'
>
</Appearance>
<Box
size=
'0.025 1.0 0.025'
>
</Box>
</Shape>
</Transform>
<Transform
id=
"bar3"
translation=
'1.25 0.5 0'
>
<Shape>
<Appearance
USE=
'BAR_COLOR'
>
</Appearance>
<Box
size=
'0.025 1.0 0.025'
>
</Box>
</Shape>
</Transform>
<Transform
id=
"bar4"
translation=
'1.75 0.5 0'
>
<Shape>
<Appearance
USE=
'BAR_COLOR'
>
</Appearance>
<Box
size=
'0.025 1.0 0.025'
>
</Box>
</Shape>
</Transform>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
Bar chart example
<br>
<br>
label x-axis:
<input
type=
"text"
id=
"label-x"
value=
"building id"
size=
"12"
/>
<br>
label y-axis:
<input
type=
"text"
id=
"label-y"
value=
"year"
size=
"12"
/><br>
attribute year of construction:
<br>
<input
type=
"text"
id=
"yoc-b1"
value=
"1960"
size=
"12"
/><br>
<input
type=
"text"
id=
"yoc-b2"
value=
"1968"
size=
"12"
/><br>
<input
type=
"text"
id=
"yoc-b3"
value=
"1980"
size=
"12"
/><br>
<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
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.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>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer.html
0 → 100644
View file @
7018135a
<html>
<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>
</head>
<body
class=
"ui-widget-content"
style=
"border:0;"
>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
style=
"float:left"
>
<Scene>
<Shape>
<Appearance>
<Material
id=
"material"
>
</Material>
</Appearance>
<Sphere
radius=
"2.0"
>
</Sphere>
</Shape>
</Scene>
</X3D>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
The following example will show you haw to interactively modify the 3D scene.
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>
ambientIntensity: 0
<input
type=
"range"
id=
"ambientIntensity"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.2"
onchange=
"changeColor()"
/>
1
<br>
<br>
<b>
diffue color
</b>
<br>
red: 0
<input
type=
"range"
id=
"diffuse_r"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.8"
onchange=
"changeColor()"
/>
1
<br>
green: 0
<input
type=
"range"
id=
"diffuse_g"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.8"
onchange=
"changeColor()"
/>
1
<br>
blue: 0
<input
type=
"range"
id=
"diffuse_b"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.8"
onchange=
"changeColor()"
/>
1
<br>
<br><b>
emissive color
</b><br>
red: 0
<input
type=
"range"
id=
"emissive_r"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.0"
onchange=
"changeColor()"
/>
1
<br>
green: 0
<input
type=
"range"
id=
"emissive_g"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.0"
onchange=
"changeColor()"
/>
1
<br>
blue: 0
<input
type=
"range"
id=
"emissive_b"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.0"
onchange=
"changeColor()"
/>
1
<br>
<br>
<b>
specular color
</b>
<br>
red: 0
<input
type=
"range"
id=
"specular_r"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.0"
onchange=
"changeColor()"
/>
1
<br>
green: 0
<input
type=
"range"
id=
"specular_g"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.0"
onchange=
"changeColor()"
/>
1
<br>
blue: 0
<input
type=
"range"
id=
"specular_b"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.0"
onchange=
"changeColor()"
/>
1
<br>
<br>
<b>
shininess
</b>
<br>
shininess: 0
<input
type=
"range"
id=
"shininess"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.2"
onchange=
"changeColor()"
/>
1
<br>
<br>
<b>
transparency
</b>
<br>
transparency : 0
<input
type=
"range"
id=
"transparency"
min=
"0.0"
max=
"1.0"
step=
"0.05"
value=
"0.0"
onchange=
"changeColor()"
/>
1
<br>
<br>
<p>
<br><br>
The diffuse color of a material will be interactively changed.
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>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
Shape
>
<
Appearance
>
<
Material id="material" diffuseColor="0.980, 0.502, 0.447"
>
<
/Material
>
<
/Appearance
>
<
Sphere radius="2.0"
>
<
/Sphere
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</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
"1.0 0.0 0.0". The attribute value is always a string.
<pre>
var mat = document.getElementById("material");
mat.setAttribute("diffuseColor", "1.0 0.0 0.0");
</pre>
In the example, the RGB value is fetched from the slider.
<pre>
var mat = document.getElementById("material");
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>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer2.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
Material brewer
</title>
<!-- source Colorpicker slider: http://jqueryui.com/slider/#colorpicker -->
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
<link
rel=
"stylesheet"
href=
"http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
>
</link>
<script
src=
"http://code.jquery.com/jquery-1.10.2.js"
></script>
<script
src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js"
></script>
</link>
<style>
#red
,
#green
,
#blue
{
float
:
left
;
clear
:
left
;
width
:
300px
;
margin
:
15px
;
}
#red
.ui-slider-range
{
background
:
#ef2929
;
}
#red
.ui-slider-handle
{
border-color
:
#ef2929
;
}
#green
.ui-slider-range
{
background
:
#8ae234
;
}
#green
.ui-slider-handle
{
border-color
:
#8ae234
;
}
#blue
.ui-slider-range
{
background
:
#729fcf
;
}
#blue
.ui-slider-handle
{
border-color
:
#729fcf
;
}
</style>
</head>
<body
class=
"ui-widget-content"
style=
"border:0;"
>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
style=
"float:left"
>
<Scene>
<Shape>
<Appearance>
<Material
id=
"material"
diffuseColor=
"0.980, 0.502, 0.447"
>
</Material>
</Appearance>
<Sphere
radius=
"2.0"
>
</Sphere>
</Shape>
</Scene>
</X3D>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
<p>
The following example will show you haw 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://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>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
Shape
>
<
Appearance
>
<
Material id="material" diffuseColor="0.980, 0.502, 0.447"
>
<
/Material
>
<
/Appearance
>
<
Sphere radius="2.0"
>
<
/Sphere
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</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
"1.0 0.0 0.0". The attribute value is always a string.
<pre>
var mat = document.getElementById("material");
mat.setAttribute("diffuseColor", "1.0 0.0 0.0");
</pre>
In the example, the RGB value is fetched from the slider. As the slider gives the RGB values between 0 and 255,
they have to be transformed to
arithmetic values between 0.0 and 1.0. After that, the RBG value has to be formatted as string.
<pre>
var mat = document.getElementById("material");
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>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/coordinatesystem.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Coordinate system
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Coordinate system
</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"
style=
"float:left"
>
<Scene>
<background
transparency=
'0'
skyColor=
'1 1 1'
>
</background>
<!-- Invoke CoordinateAxes in other scenes as an Inline child inside a scaling Transform node, at the topmost level of the scene graph. -->
<!-- Each arrow goes from +1m to -1m to allow linear scaling to fit a scene -->
<!-- Note each label rotates about the scene's vertical Y axis for consistency, enabling local orientation by user -->
<Group>
<!-- Vertical Y arrow and label -->
<Group
DEF=
'ArrowGreen'
>
<Shape>
<Appearance
DEF=
'Green'
>
<Material
diffuseColor=
'0 1 0'
>
</Material>
</Appearance>
<Cylinder
DEF=
'ArrowCylinder'
radius=
'.025'
top=
'false'
>
</Cylinder>
</Shape>
<Transform
translation=
'0 1 0'
>
<Shape>
<Appearance
USE=
'Green'
>
</Appearance>
<Cone
DEF=
'ArrowCone'
bottomRadius=
'.05'
height=
'.1'
>
</Cone>
</Shape>
</Transform>
</Group>
<Transform
translation=
'0 1.08 0'
>
<Billboard>
<Shape>
<Appearance
DEF=
'LABEL_APPEARANCE'
>
<Material
diffuseColor=
'0 0 0'
>
</Material>
</Appearance>
<Text
string=
'"Y"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
<Transform
rotation=
'0 0 1 -1.57079'
>
<!-- Horizontal X arrow and label -->
<Group
DEF=
'ArrowRed'
>
<Shape>
<Appearance
DEF=
'Red'
>
<Material
diffuseColor=
'.7 .1 .1'
emissiveColor=
'.33 0 0'
/>
</Appearance>
<Cylinder
USE=
'ArrowCylinder'
>
</Cylinder>
</Shape>
<Transform
translation=
'0 1 0'
>
<Shape>
<Appearance
USE=
'Red'
>
</Appearance>
<Cone
USE=
'ArrowCone'
>
</Cone>
</Shape>
</Transform>
</Group>
<Transform
rotation=
'0 0 1 1.57079'
translation=
'.072 1.1 0'
>
<!-- note label rotated back to original coordinate frame -->
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"X"'
>
<FontStyle
USE=
'LABEL_FONT'
>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<Transform
rotation=
'1 0 0 1.57079'
>
<!-- Z arrow and label -->
<Group
DEF=
'ArrowBlue'
>
<Shape>
<Appearance
DEF=
'Blue'
>
<Material
diffuseColor=
'0 0 1'
>
</Material>
</Appearance>
<Cylinder
USE=
'ArrowCylinder'
>
</Cylinder>
</Shape>
<Transform
translation=
'0 1 0'
>
<Shape>
<Appearance
USE=
'Blue'
>
</Appearance>
<Cone
USE=
'ArrowCone'
>
</Cone>
</Shape>
</Transform>
</Group>
<Transform
rotation=
'1 0 0 -1.57079'
translation=
'0 1.1 .072'
>
<!-- note label rotated back to original coordinate frame -->
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"Z"'
>
<FontStyle
USE=
'LABEL_FONT'
>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
</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=
"http://flylib.com/books/2/416/1/html/2/images/fig3-3.jpg"
width=
"350"
height=
"310"
/>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/hellox3dom.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Hello X3DOM
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Hello X3DOM
</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"
style=
"float:left"
>
<Scene>
<background
transparency=
'0'
skyColor=
'0 1 0'
>
</background>
<Shape>
<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
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>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandmaterial.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
indexed face set and material
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
indexed face set and material
</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"
style=
"float:left"
>
<Scene>
<Shape>
<!-- roof -->
<Appearance>
<Material
diffuseColor=
"0.980, 0.502, 0.447"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<Coordinate
DEF=
"pointset"
point=
"-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall -->
<Appearance>
<Material
diffuseColor=
"0.753, 0.753, 0.753"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1"
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- ground -->
<Appearance>
<Material
diffuseColor=
"0.180, 0.280, 0.230"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 3 2 1 -1 "
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</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
shall be used,
we need to have different shape for these elements. However, they can share the same point set. The following
example uses different
Material for roo, wall, and ground surfaces.
<br>
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
Shape
>
<
!-- roof --
>
<
Appearance
>
<
Material diffuseColor="0.980, 0.502, 0.447"
>
<
/Material
>
<
/Appearance
>
<
IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<
Coordinate DEF="pointset" point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
<
/Coordinate
>
<
/IndexedFaceSet
>
<
/Shape
>
<
Shape
>
<
!-- wall --
>
<
Appearance
>
<
Material diffuseColor="0.753, 0.753, 0.753"
>
<
/Material
>
<
/Appearance
>
<
IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1"
>
<
Coordinate USE="pointset"
>
<
/Coordinate
>
<
/IndexedFaceSet
>
<
/Shape
>
<
Shape
>
<
!-- ground --
>
<
Appearance
>
<
Material diffuseColor="0.180, 0.280, 0.230"
>
<
/Material
>
<
/Appearance
>
<
IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 3 2 1 -1 "
>
<
Coordinate USE="pointset"
>
<
/Coordinate
>
<
/IndexedFaceSet
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtexturecoord.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
indexed face set and material
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</head>
<body>
<h1>
indexed face set and material
</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"
style=
"float:left"
>
<Scene>
<Shape>
<!-- roof -->
<Appearance>
<Material
diffuseColor=
"0.980, 0.502, 0.447"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<Coordinate
DEF=
"pointset"
point=
"-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
</Coordinate>
<TextureCoordinate
DEF=
"texcoord"
point=
"0 0 0 1 1 1 1 0 0 0 0 1 1 1 1 0 0 0"
>
</TextureCoorinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall 1 -->
<Appearance>
<ImageTexture
url=
"http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Brick_wall_close-up_view.jpg/800px-Brick_wall_close-up_view.jpg"
>
</ImageTexture>
<Material
diffuseColor=
"0.753, 0.753, 0.753"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
"0 1 5 4 -1 "
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall -->
<Appearance>
<ImageTexture
url=
"http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg"
>
</ImageTexture>
<Material
diffuseColor=
"0.753, 0.753, 0.753"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1"
texCoordIndex=
"0 1 2 3 -1 0 1 2 3 -1 0 1 2 3"
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
<TextureCoordinate
USE=
"texcoord"
>
</TextureCoorinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- ground -->
<Appearance>
<Material
diffuseColor=
"0.180, 0.280, 0.230"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 3 2 1 -1 "
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
Example:
<a
href=
"http://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using Images
and Movies as Textures
</a>
<br>
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/texturing.html"
target=
"_blank"
>
Textures
</a>
<br>
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet"
target=
"_blank"
>
How Textures are mapped on IndexedFaceSet:
</a><br>
<br>
<pre
class=
"prettyprint"
>
<
Appearance
>
<
ImageTexture url="http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg"
><
/ImageTexture
>
<
Material diffuseColor="0.753, 0.753, 0.753"
>
<
/Material
>
<
/Appearance
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtextures.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
indexed face set and material
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</head>
<body>
<h1>
indexed face set and material
<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"
style=
"float:left"
>
<Scene>
<Shape>
<!-- roof -->
<Appearance>
<Material
diffuseColor=
"0.980, 0.502, 0.447"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<Coordinate
DEF=
"pointset"
point=
"-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall 1 -->
<Appearance>
<ImageTexture
url=
"img/brick_stone_wall_0119_01_preview.jpg"
></ImageTexture>
<Material
diffuseColor=
"0.753, 0.753, 0.753"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
"0 1 5 4 -1 "
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall -->
<Appearance>
<ImageTexture
url=
"http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg"
>
</ImageTexture>
<Material
diffuseColor=
"0.753, 0.753, 0.753"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1"
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- ground -->
<Appearance>
<Material
diffuseColor=
"0.180, 0.280, 0.230"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 3 2 1 -1 "
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
Example:
<a
href=
"http://doc.x3dom.org/tutorials/basics/imagesMovies/index.html"
target=
"_blank"
>
Using
Images and Movies as Textures
</a>
<br>
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/texturing.html"
target=
"_blank"
>
Textures
</a>
<br>
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet"
target=
"_blank"
>
How Textures are mapped on IndexedFaceSet:
</a><br>
<br>
<pre
class=
"prettyprint"
>
<
Appearance
>
<
ImageTexture url="http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg"
><
/ImageTexture
>
<
Material diffuseColor="0.753, 0.753, 0.753"
>
<
/Material
>
<
/Appearance
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/img/HFT_DL3_CMYK_maxH27mm.jpg
0 → 100644
View file @
7018135a
671 KB
public/X3DOMTutorial/img/Logo_bisH27mm.jpg
0 → 100644
View file @
7018135a
10.2 KB
public/X3DOMTutorial/img/brick_stone_wall_0119_01_preview.jpg
0 → 100644
View file @
7018135a
68.4 KB
public/X3DOMTutorial/index.html
View file @
7018135a
<html
xmlns=
"http://www.w3.org/1999/xhtml"
>
<html
lang=
"en"
>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Hello X3DOM
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"https://x3dom.org/download/1.8.1/x3dom.css"
></link>
<script
type=
"text/javascript"
src =
"https://x3dom.org/download/1.8.1/x3dom.js"
></script>
<script
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
></script>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
X3DOM Tutorials
</title>
<style>
ul
{
list-style-type
:
none
;
padding
:
0
;
margin
:
0
;
}
.button
{
text-decoration
:
none
;
display
:
block
;
width
:
500px
;
height
:
25px
;
color
:
black
;
background
:
lightgray
;
padding
:
10px
;
text-align
:
center
;
border-radius
:
5px
;
line-height
:
25px
;
margin-bottom
:
10px
;
font-family
:
sans-serif
;
}
.button
:hover
{
background-color
:
#4CAF50
;
color
:
white
;
}
.center
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
}
</style>
</head>
</head>
<body>
<body>
<ul
class=
"center"
>
<font
size=
"4"
>
Hello X3DOM
</font>
<li><a
class=
"button"
href=
"hellox3dom.html"
>
hello X3DOM
</a></li>
<li><a
class=
"button"
href=
"coordinatesystem.html"
>
coordinate system
</a></li>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<li><a
class=
"button"
href=
"transform.html"
>
transform
</a></li>
<tr>
<li><a
class=
"button"
href=
"colorbrewer.html"
>
color brewer
</a></li>
<th
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<li><a
class=
"button"
href=
"colorbrewer2.html"
>
color brewer 2
</a></li>
<li><a
class=
"button"
href=
"indexedfaceset.html"
>
indexedfaceset
</a></li>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
style=
"float:left"
>
<li><a
class=
"button"
href=
"indexedfaceset2.html"
>
indexedfaceset 2
</a></li>
<Scene>
<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>
<background
transparency=
'0'
skyColor=
'0 1 0'
>
</background>
<li><a
class=
"button"
href=
"ifsandtextures.html"
>
indexedfaceset and textures
</a></li>
<Shape>
<li><a
class=
"button"
href=
"terrain.html"
>
terrain
</a></li>
<Box>
</Box>
<li><a
class=
"button"
href=
"barchart.html"
>
barchart
</a></li>
</Shape>
<li><a
class=
"button"
href=
"toytown.html"
>
toy town
</a></li>
<li><a
class=
"button"
href=
"addnode.html"
>
add node
</a></li>
</Scene>
</ul>
</X3D>
</p>
</th>
<th
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>
</th>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Indexed Face Set
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Indexed Face Set
</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"
style=
"float:left"
>
<Scene>
<Shape>
<Appearance>
<Material
diffuseColor=
"0.5 0.5 0.5"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<Coordinate
point=
"-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<!-- add points (as spheres) and labels -->
<!-- P0 -->
<Transform
translation=
'-1 0 1'
>
<Shape
DEF=
'Point'
>
<Appearance
DEF=
'Green'
>
<Material
diffuseColor=
'0 1 0'
>
</Material>
</Appearance>
<Sphere
radius=
"0.1"
>
</Sphere>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
DEF=
'LABEL_APPEARANCE'
>
<Material
diffuseColor=
'0 0 0'
>
</Material>
</Appearance>
<Text
string=
'"P0"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P1 -->
<Transform
translation=
'1 0 1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P1"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P2 -->
<Transform
translation=
'1 0 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P2"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P3 -->
<Transform
translation=
'-1 0 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P3"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P4 -->
<Transform
translation=
'-1 2 1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P4"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P5 -->
<Transform
translation=
'1 2 1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P5"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P6 -->
<Transform
translation=
'1 2 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P6"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P7 -->
<Transform
translation=
'-1 2 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P7"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P8 -->
<Transform
translation=
'0 3 0'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 0.0 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P8"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</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.
The building geometry is given by a set of points P={P0, P1, ..., Pn}
and a set of polygons F={F0, F1, ..., Fm}. Each point Pi is given by its coordinates Pi=(xi,yi,zi).
Each polygon Fi is defined by a list of m coplanar points (m >=3) given in counterclockwise order:
Fi=(Pi0, Pi1, ... Pim)
<pre>
Example:
P = {P0, P1, P2, P3, P4, P5, P6, P7, P8}
with
P0 = (-1.0, 0.0, 1.0)
P1 = ( 1.0, 0.0, 1.0)
P2 = ( 1.0, 0.0, -1.0)
P3 = (-1.0, 0.0, -1.0)
P4 = (-1.0, 2.0, 1.0)
P5 = ( 1.0, 2.0, 1.0)
P6 = ( 1.0, 2.0, -1.0)
P7 = (-1.0, 2.0, -1.0)
P8 = ( 0.0, 3.0, 0.0)
F = {F0, F1, F2, F3, F4, F5, F6, F7, F8}
wall:
F0 = (P0, P1, P5, P4)
F1 = (P1, P2, P6, P5)
F2 = (P2, P3, P7, P6)
F3 = (P3, P0, P4, P7)
ground:
F4 = (P0, P3, P2, P1)
roof:
F5 = (P7, P4, P8)
F6 = (P4, P5, P8)
F7 = (P5, P6, P8)
F8 = (P6, P7, P8)
</pre>
<br>
In the IndexedFaceSet the point set P is defined in the Coordinate node.
The set of polygons F is defined in the attribute coordIndex. Each polygon is given by a list of point indices
followed by -1 to indicate the end of a polygon and the beginning of a new one.
<br>
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
Shape
>
<
Appearance
>
<
Material diffuseColor="0.5 0.5 0.5"
>
<
/Material
>
<
/Appearance
>
<
IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<
Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
<
/Coordinate
>
<
/IndexedFaceSet
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset2.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Indexed Face Set
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Indexed Face Set
</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"
style=
"float:left"
>
<Scene>
<Shape>
<Appearance>
<Material
diffuseColor=
"0.5 0.5 0.5"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"false"
ccw=
"true"
coordIndex=
" 0 4 5 1 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 1 2 3 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1
9 13 14 10 -1 10 11 15 14 -1 11 12 16 15 -1
12 9 13 16 -1 9 10 11 12 -1 16 13 17 -1
13 14 17 -1 14 15 17 -1 15 16 17 -1"
>
<Coordinate
point=
"-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0,
2 0 1, 4 0 1, 4 0 -1, 2 0 -1,
2 2 1, 4 2 1, 4 2 -1, 2 2 -1, 3 3 0 "
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<!-- add points (as spheres) and labels -->
<!-- P0 -->
<Transform
translation=
'-1 0 1'
>
<Shape
DEF=
'Point'
>
<Appearance
DEF=
'Green'
>
<Material
diffuseColor=
'0 1 0'
>
</Material>
</Appearance>
<Sphere
radius=
"0.1"
>
</Sphere>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
DEF=
'LABEL_APPEARANCE'
>
<Material
diffuseColor=
'0 0 0'
>
</Material>
</Appearance>
<Text
string=
'"P0"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P1 -->
<Transform
translation=
'1 0 1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P1"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P2 -->
<Transform
translation=
'1 0 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P2"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P3 -->
<Transform
translation=
'-1 0 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P3"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P4 -->
<Transform
translation=
'-1 2 1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P4"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P5 -->
<Transform
translation=
'1 2 1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P5"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P6 -->
<Transform
translation=
'1 2 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P6"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P7 -->
<Transform
translation=
'-1 2 -1'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 -0.75 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P7"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P8 -->
<Transform
translation=
'0 3 0'
>
<Shape
USE=
"Point"
>
</Shape>
<Transform
translation=
'0 0.0 0'
>
<Billboard>
<Shape>
<Appearance
USE=
'LABEL_APPEARANCE'
>
</Appearance>
<Text
string=
'"P8"'
>
<FontStyle
DEF=
'LABEL_FONT'
family=
'"SANS"'
justify=
'"MIDDLE" "MIDDLE"'
size=
'.2'
>
</FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</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.
The building geometry is given by a set of points P={P0, P1, ..., Pn}
and a set of polygons F={F0, F1, ..., Fm}. Each point Pi is given by its coordinates Pi=(xi,yi,zi).
Each polygon Fi is defined by a list of m coplanar points (m >=3) given in counterclockwise order:
Fi=(Pi0, Pi1, ... Pim)
<pre>
Example:
P = {P0, P1, P2, P3, P4, P5, P6, P7, P8}
with
P0 = (-1.0, 0.0, 1.0)
P1 = ( 1.0, 0.0, 1.0)
P2 = ( 1.0, 0.0, -1.0)
P3 = (-1.0, 0.0, -1.0)
P4 = (-1.0, 2.0, 1.0)
P5 = ( 1.0, 2.0, 1.0)
P6 = ( 1.0, 2.0, -1.0)
P7 = (-1.0, 2.0, -1.0)
P8 = ( 0.0, 3.0, 0.0)
F = {F0, F1, F2, F3, F4, F5, F6, F7, F8}
wall:
F0 = (P0, P1, P5, P4)
F1 = (P1, P2, P6, P5)
F2 = (P2, P3, P7, P6)
F3 = (P3, P0, P4, P7)
ground:
F4 = (P0, P3, P2, P1)
roof:
F5 = (P7, P4, P8)
F6 = (P4, P5, P8)
F7 = (P5, P6, P8)
F8 = (P6, P7, P8)
</pre>
<br>
In the IndexedFaceSet the point set P is defined in the Coordinate node.
The set of polygons F is defined in the attribute coordIndex. Each polygon is given by a list of point indices
followed by -1 to indicate the end of a polygon and the beginning of a new one.
<br>
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
Shape
>
<
Appearance
>
<
Material diffuseColor="0.5 0.5 0.5"
>
<
/Material
>
<
/Appearance
>
<
IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<
Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
<
/Coordinate
>
<
/IndexedFaceSet
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/terrain.html
0 → 100644
View file @
7018135a
This diff is collapsed.
Click to expand it.
public/X3DOMTutorial/toytown.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
toy town
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
toy town
</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"
style=
"float:left"
>
<Scene>
<transform
id=
"terrain"
>
<Shape>
<Appearance>
<ImageTexture
url=
"./img/Logo_bisH27mm.jpg"
></ImageTexture>
<Material
diffuseColor=
"0, 1, 0"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 3 2 1 -1"
>
<Coordinate
point=
"-5 0 -5, 5 0 -5, 5 0 5, -5 0 5"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
</transform>
<transform
id=
"building_1"
>
<Group
DEF=
"building"
>
<Shape
DEF=
"roof"
>
<!-- roof -->
<Appearance>
<Material
diffuseColor=
"0.980, 0.502, 0.447"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"
>
<Coordinate
DEF=
"pointset"
point=
"-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 "
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape
DEF=
"wall"
>
<!-- wall -->
<Appearance>
<Material
diffuseColor=
"0.753, 0.753, 0.753"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1"
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape
DEF=
"ground"
>
<!-- ground -->
<Appearance>
<Material
diffuseColor=
"0.180, 0.280, 0.230"
>
</Material>
</Appearance>
<IndexedFaceSet
solid=
"true"
ccw=
"true"
coordIndex=
" 0 3 2 1 -1 "
>
<Coordinate
USE=
"pointset"
>
</Coordinate>
</IndexedFaceSet>
</Shape>
</Group>
</Transform>
<Transform
id=
"building_2"
translation=
"3 0 0"
>
<Group>
<Shape
USE=
"roof"
>
</Shape>
<Shape
USE=
"wall"
>
</Shape>
<Shape
USE=
"ground"
>
</Shape>
</Group>
</Transform>
<Transform
id=
"building_3"
translation=
"0 0 4"
>
<Group>
<Shape
USE=
"roof"
>
</Shape>
<Shape
USE=
"wall"
>
</Shape>
<Shape
USE=
"ground"
>
</Shape>
</Group>
</Transform>
<Transform
id=
"building_4"
translation=
"-3 0 0"
>
<Group>
<Shape
USE=
"roof"
>
</Shape>
<Shape
USE=
"wall"
>
</Shape>
<Shape
USE=
"ground"
>
</Shape>
</Group>
</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>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/transform.html
0 → 100644
View file @
7018135a
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Transformation
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Transformation
</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"
style=
"float:left"
>
<Scene>
<background
transparency=
'0'
skyColor=
'1 1 1'
>
</background>
<Shape>
<Appearance>
<Material
diffuseColor=
'1 0 0'
></Material>
</Appearance>
<Box></Box>
</Shape>
<Transform
translation=
'-3 0 0'
>
<Shape>
<Appearance>
<Material
diffuseColor=
'0 1 0'
></Material>
</Appearance>
<Cone></Cone>
</Shape>
</Transform>
<Transform
translation=
'3 0 0'
>
<Shape>
<Appearance>
<Material
diffuseColor=
'0 0 1'
></Material>
</Appearance>
<Sphere></Sphere>
</Shape>
</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
size of the shape can be modified,
but the location is always centered at (0,0,0). To move a shape to another location, a transformation needs to
be applied. See slides for
the different kinds of affine transformations: translation, rotation, and scaling.
<br>
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
background transparency='0' skyColor='1 1 1'
>
<
/background
>
<
Shape
>
<
Appearance
>
<
Material diffuseColor='1 0 0'
><
/Material
>
<
/Appearance
>
<
Box
><
/Box
>
<
/Shape
>
<
Transform translation='-3 0 0'
>
<
Shape
>
<
Appearance
>
<
Material diffuseColor='0 1 0'
><
/Material
>
<
/Appearance
>
<
Cone
><
/Cone
>
<
/Shape
>
<
/Transform
>
<
Transform translation='3 0 0'
>
<
Shape
>
<
Appearance
>
<
Material diffuseColor='0 0 1'
><
/Material
>
<
/Appearance
>
<
Sphere
><
/Sphere
>
<
/Shape
>
<
/Transform
>
<
/Scene
>
<
/X3D
>
</pre>
<br>
This example illustrates how to move shapes to another location.
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/x3dom.css
0 → 100644
View file @
7018135a
/*
* X3DOM JavaScript Library
* http://www.x3dom.org
*
* (C)2009 Fraunhofer IGD, Darmstadt, Germany
* Dual licensed under the MIT and GPL
*
* Based on code originally provided by
* Philip Taylor: http://philip.html5.org
*/
body
{
background-color
:
white
;
font-family
:
Helvetica
,
sans-serif
;
font-size
:
12px
;
}
X3D
,
x3d
{
position
:
relative
;
/* in order to be able to position stat-div within X3D */
float
:
left
;
/* float the element so it has the same size like the canvas */
cursor
:
pointer
;
margin
:
0
;
padding
:
0
;
border
:
1px
solid
#000
;
}
object
{
margin
:
0
;
padding
:
0
;
border
:
none
;
z-index
:
0
;
width
:
100%
;
height
:
100%
;
float
:
left
;
}
X3D
:hover
,
x3d
:hover
,
.x3dom-canvas
:hover
{
-webkit-user-select
:
none
;
-webkit-touch-callout
:
none
;
}
.x3dom-canvas
{
border
:
none
;
cursor
:
pointer
;
cursor
:
-webkit-grab
;
cursor
:
grab
;
width
:
100%
;
height
:
100%
;
float
:
left
;
}
.x3dom-canvas-mousedown
{
cursor
:
-webkit-grabbing
;
cursor
:
grabbing
;
}
.x3dom-canvas
:focus
{
outline
:
none
;
}
.x3dom-progress
{
margin
:
0
;
padding
:
6px
8px
0px
26px
;
left
:
0px
;
top
:
0px
;
position
:
absolute
;
color
:
#0f0
;
font-family
:
Helvetica
,
sans-serif
;
line-height
:
10px
;
font-size
:
10px
;
min-width
:
45px
;
min-height
:
20px
;
border
:
0px
;
background-position
:
4px
4px
;
background-repeat
:
no-repeat
;
background-color
:
#333
;
background-color
:
rgba
(
51
,
51
,
51
,
0.9
);
z-index
:
100
;
background-image
:
url('data:image/gif;base64,R0lGODlhEAAQAPQAADMzM////z4+Po+Pj0pKSsbGxpycnP///7e3t+Hh4XR0dGZmZu7u7oGBgfr6+tLS0qqqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==')
;
}
.x3dom-progress.bar
span
{
position
:
absolute
;
left
:
0
;
top
:
0
;
line-height
:
20px
;
background-color
:
red
;
}
.x3dom-statdiv
{
margin
:
0
;
padding
:
0
;
right
:
10px
;
top
:
10px
;
position
:
absolute
;
color
:
#0f0
;
font-family
:
Helvetica
,
sans-serif
;
line-height
:
10px
;
font-size
:
10px
;
width
:
75px
;
height
:
70px
;
border
:
0px
;
}
#x3dom-state-canvas
{
margin
:
2px
;
padding
:
0
;
right
:
0%
;
top
:
0%
;
position
:
absolute
;
}
#x3dom-state-viewer
{
position
:
absolute
;
margin
:
2px
;
padding
:
5px
;
width
:
135px
;
top
:
0%
;
right
:
0%
;
opacity
:
0.9
;
background-color
:
#323232
;
z-index
:
1000
;
font-family
:
Arial
,
sans-serif
;
color
:
#C8C8C8
;
font-weight
:
bold
;
text-transform
:
uppercase
;
cursor
:
help
;
}
.x3dom-states-head
{
display
:
block
;
font-size
:
26px
;
}
.x3dom-states-head2
{
font-size
:
10px
;
}
.x3dom-states-list
{
float
:
left
;
width
:
100%
;
border-top
:
1px
solid
#C8C8C8
;
list-style
:
none
;
font-size
:
9px
;
line-height
:
16px
;
margin
:
0
;
padding
:
0
;
padding-top
:
2px
;
}
.x3dom-states-item
{
width
:
100%
;
float
:
left
;
}
.x3dom-states-item-title
{
float
:
left
;
margin-left
:
2px
;
}
.x3dom-states-item-value
{
float
:
right
;
margin-right
:
2px
;
}
.x3dom-touch-marker
{
display
:
inline
;
padding
:
5px
;
border-radius
:
10px
;
position
:
absolute
;
font-family
:
Helvetica
,
sans-serif
;
line-height
:
10px
;
font-size
:
10px
;
color
:
darkorange
;
background
:
cornsilk
;
opacity
:
0.6
;
border
:
2px
solid
orange
;
z-index
:
200
;
}
.x3dom-logContainer
{
border
:
2px
solid
olivedrab
;
height
:
200px
;
padding
:
4px
;
overflow
:
auto
;
white-space
:
pre-wrap
;
font-family
:
sans-serif
;
font-size
:
x-small
;
color
:
#00ff00
;
background-color
:
black
;
margin-right
:
10px
;
}
.x3dom-nox3d
{
font-family
:
Helvetica
,
sans-serif
;
font-size
:
14px
;
background-color
:
#eb7a7a
;
padding
:
1em
;
opacity
:
0.75
;
}
.x3dom-nox3d
p
{
color
:
#fff
;
font-size
:
14px
;
}
.x3dom-nox3d
a
{
color
:
#fff
;
font-size
:
14px
;
}
/* self-clearing floats */
.group
:after
{
content
:
"."
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;
}
public/X3DOMTutorial/x3dom.js
0 → 100644
View file @
7018135a
This diff is collapsed.
Click to expand it.
Prev
1
2
Next
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