Skip to content

GitLab

Commit e0789dce authored by Mandic's avatar Mandic
Browse files

Update transform.html

parent b9fea9e5
Pipeline #6360 passed with stages
in 10 seconds
Hide whitespace changes
Inline Side-by-side
public/X3DOMTutorial/transform.html
View file @ e0789dce
<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>
</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>
</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 class="prettyprint">
&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;
</pre>
<br>
This example illustrates how to move shapes to another location.
</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> 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>
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