Skip to content
GitLab
Explore
Projects
Groups
Snippets
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Mir
Visualization
Commits
e0789dce
Commit
e0789dce
authored
2 years ago
by
Mandic
Browse files
Options
Download
Email Patches
Plain Diff
Update transform.html
parent
b9fea9e5
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/X3DOMTutorial/transform.html
+100
-87
public/X3DOMTutorial/transform.html
with
100 additions
and
87 deletions
+100
-87
public/X3DOMTutorial/transform.html
+
100
-
87
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"
>
<
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>
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Explore
Projects
Groups
Snippets