transform.html

<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>
    <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> 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>
<code class="language-html">
&lt;html&gt; 
	&lt;head&gt;
	&lt;title&gt; Transformation &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;background transparency='0' skyColor='1 1 1'&gt; &lt;/background&gt;
				&lt;Shape&gt; 
				&lt;Appearance&gt; 
				&lt;Material diffuseColor='1 0 0'&gt;&lt;/Material&gt; 
				&lt;/Appearance&gt; 
				&lt;Box&gt;&lt;/Box&gt; 
			&lt;/Shape&gt; 
			&lt;Transform translation='-3 0 0'&gt; 
				&lt;Shape&gt; 
				&lt;Appearance&gt; 
					&lt;Material diffuseColor='0 1 0'&gt;&lt;/Material&gt; 
				&lt;/Appearance&gt; 
				&lt;Cone&gt;&lt;/Cone&gt; 
				&lt;/Shape&gt; 
			&lt;/Transform&gt; 
			&lt;Transform translation='3 0 0'&gt; 
				&lt;Shape&gt; 
				&lt;Appearance&gt; 
					&lt;Material diffuseColor='0 0 1'&gt;&lt;/Material&gt; 
				&lt;/Appearance&gt; 
				&lt;Sphere&gt;&lt;/Sphere&gt;
				&lt;/Shape&gt; 
			&lt;/Transform&gt; 
		&lt;/Scene&gt;
		&lt;/X3D&gt;
	&lt;/body&gt; 
&lt;/html&gt;
</code>
</pre>
				<br>
				This example illustrates how to move shapes to another location.
			</td>
			<script type="text/javascript" src="x3dom.js"></script>
</body>

</html>