ifsandmaterial.html 4.19 KB
Newer Older
Mandic's avatar
Mandic committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<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>
	<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>