From e0789dce61a8c5126ec797da6c5992dfa47a6a2c Mon Sep 17 00:00:00 2001 From: Mandic <02mami1mma@hft-stuttgart.de> Date: Wed, 27 Apr 2022 14:32:47 +0000 Subject: [PATCH] Update transform.html --- public/X3DOMTutorial/transform.html | 187 +++++++++++++++------------- 1 file changed, 100 insertions(+), 87 deletions(-) diff --git a/public/X3DOMTutorial/transform.html b/public/X3DOMTutorial/transform.html index da4f095..232ed09 100644 --- a/public/X3DOMTutorial/transform.html +++ b/public/X3DOMTutorial/transform.html @@ -1,87 +1,100 @@ -<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"> - <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> - </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"> +<html> + <head> + <title> Transformation </title> + <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> + <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> + </head> + <body> + <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> + </body> +</html> +</code> +</pre> + <br> + This example illustrates how to move shapes to another location. + </td> + <script type="text/javascript" src="x3dom.js"></script> +</body> + +</html> -- GitLab