Skip to content

GitLab

Commit 2c843732 authored by Mandic's avatar Mandic
Browse files

Update indexedfaceset2.html

parent a252d301
Pipeline #6432 passed with stages
in 13 seconds
Hide whitespace changes
Inline Side-by-side
public/X3DOMTutorial/indexedfaceset2.html
View file @ 2c843732
<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>
</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">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.5 0.5 0.5"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;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"&gt;
&lt;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 " &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
</td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<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>
<code class="language-html">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My first X3DOM page&lt;/title&gt;
&lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.5 0.5 0.5"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;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"&gt;
&lt;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 " &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal