Skip to content
GitLab
Commit 25257593 authored by Mandic's avatar Mandic
Browse files

Update ifsandmaterial.html

parent 44d6f406
master
No related merge requests found
Pipeline #6370 passed with stages
in 14 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 116 additions and 104 deletions
+116 -104
public/X3DOMTutorial/ifsandmaterial.html
+ 116
- 104
View file @ 25257593
<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>
</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">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;!-- roof --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"&gt;
&lt;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 " &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;Shape&gt;
&lt;!-- wall --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.753, 0.753, 0.753"&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"&gt;
&lt;Coordinate USE="pointset" &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;Shape&gt;
&lt;!-- ground --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.180, 0.280, 0.230"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 3 2 1 -1 "&gt;
&lt;Coordinate USE="pointset" &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 and material </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
<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 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 roof, wall, and ground surfaces.
<br>
<pre>
<code class="language-html">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; indexed face set and material &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;!-- roof --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"&gt;
&lt;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 " &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;Shape&gt;
&lt;!-- wall --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.753, 0.753, 0.753"&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"&gt;
&lt;Coordinate USE="pointset" &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;Shape&gt;
&lt;!-- ground --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.180, 0.280, 0.230"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 3 2 1 -1 "&gt;
&lt;Coordinate USE="pointset" &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>
Supports Markdown
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