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

Update transform.html

parent b9fea9e5
Hide whitespace changes
Inline Side-by-side
Showing
with 100 additions and 87 deletions
+100 -87
public/X3DOMTutorial/transform.html
+ 100
- 87
View file @ e0789dce
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Transformation </title> <title> Transformation </title>
<link rel="stylesheet" type="text/css" href="x3dom.css"> <link rel="stylesheet" type="text/css" href="x3dom.css">
</link> </link>
</head> <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>
<body> <script>hljs.highlightAll();</script>
<h1> Transformation </h1> </head>
<table width="100%" height="85%" border="0">
<tr> <body>
<td width="50%" align="center" valign="top" scope="col"> <h1> Transformation </h1>
<X3D id="shapedata" width="600px" height="600px" style="float:left"> <table width="100%" height="85%" border="0">
<Scene> <tr>
<background transparency='0' skyColor='1 1 1'> </background> <td width="50%" align="center" valign="top" scope="col">
<Shape> <X3D id="shapedata" width="600px" height="600px" style="float:left">
<Appearance> <Scene>
<Material diffuseColor='1 0 0'></Material> <background transparency='0' skyColor='1 1 1'> </background>
</Appearance> <Shape>
<Box></Box> <Appearance>
</Shape> <Material diffuseColor='1 0 0'></Material>
<Transform translation='-3 0 0'> </Appearance>
<Shape> <Box></Box>
<Appearance> </Shape>
<Material diffuseColor='0 1 0'></Material> <Transform translation='-3 0 0'>
</Appearance> <Shape>
<Cone></Cone> <Appearance>
</Shape> <Material diffuseColor='0 1 0'></Material>
</Transform> </Appearance>
<Transform translation='3 0 0'> <Cone></Cone>
<Shape> </Shape>
<Appearance> </Transform>
<Material diffuseColor='0 0 1'></Material> <Transform translation='3 0 0'>
</Appearance> <Shape>
<Sphere></Sphere> <Appearance>
</Shape> <Material diffuseColor='0 0 1'></Material>
</Transform> </Appearance>
</Scene> <Sphere></Sphere>
</X3D> </Shape>
</td> </Transform>
<td width="50%" align="left" valign="top" scope="col"> </Scene>
In X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The </X3D>
size of the shape can be modified, </p>
but the location is always centered at (0,0,0). To move a shape to another location, a transformation needs to </td>
be applied. See slides for <td width="50%" align="left" valign="top" scope="col">
the different kinds of affine transformations: translation, rotation, and scaling. In X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The
<br> size of the shape can be modified,
<pre class="prettyprint"> but the location is always centered at (0,0,0). To move a shape to another location, a transformation needs to
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; be applied. See slides for
&lt;Scene&gt; the different kinds of affine transformations: translation, rotation, and scaling.
&lt;background transparency='0' skyColor='1 1 1'&gt; &lt;/background&gt; <br>
&lt;Shape&gt; <pre>
&lt;Appearance&gt; <code class="language-html">
&lt;Material diffuseColor='1 0 0'&gt;&lt;/Material&gt; &lt;html&gt;
&lt;/Appearance&gt; &lt;head&gt;
&lt;Box&gt;&lt;/Box&gt; &lt;title&gt; Transformation &lt;/title&gt;
&lt;/Shape&gt; &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt;
&lt;Transform translation='-3 0 0'&gt; &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt;
&lt;Shape&gt; &lt;/head&gt;
&lt;Appearance&gt; &lt;body&gt;
&lt;Material diffuseColor='0 1 0'&gt;&lt;/Material&gt; &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;/Appearance&gt; &lt;Scene&gt;
&lt;Cone&gt;&lt;/Cone&gt; &lt;background transparency='0' skyColor='1 1 1'&gt; &lt;/background&gt;
&lt;/Shape&gt; &lt;Shape&gt;
&lt;/Transform&gt; &lt;Appearance&gt;
&lt;Transform translation='3 0 0'&gt; &lt;Material diffuseColor='1 0 0'&gt;&lt;/Material&gt;
&lt;Shape&gt; &lt;/Appearance&gt;
&lt;Appearance&gt; &lt;Box&gt;&lt;/Box&gt;
&lt;Material diffuseColor='0 0 1'&gt;&lt;/Material&gt; &lt;/Shape&gt;
&lt;/Appearance&gt; &lt;Transform translation='-3 0 0'&gt;
&lt;Sphere&gt;&lt;/Sphere&gt; &lt;Shape&gt;
&lt;/Shape&gt; &lt;Appearance&gt;
&lt;/Transform&gt; &lt;Material diffuseColor='0 1 0'&gt;&lt;/Material&gt;
&lt;/Scene&gt; &lt;/Appearance&gt;
&lt;/X3D&gt; &lt;Cone&gt;&lt;/Cone&gt;
</pre> &lt;/Shape&gt;
<br> &lt;/Transform&gt;
This example illustrates how to move shapes to another location. &lt;Transform translation='3 0 0'&gt;
</td> &lt;Shape&gt;
</tr> &lt;Appearance&gt;
</table> &lt;Material diffuseColor='0 0 1'&gt;&lt;/Material&gt;
<script type="text/javascript" src="x3dom.js"></script> &lt;/Appearance&gt;
</body> &lt;Sphere&gt;&lt;/Sphere&gt;
&lt;/Shape&gt;
</html> &lt;/Transform&gt;
\ No newline at end of file &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>
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