Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Volker Coors
Visualization
Commits
e62ed849
Commit
e62ed849
authored
Jun 20, 2020
by
Volker Coors
Browse files
Add new file
parent
c562b557
Pipeline
#870
passed with stage
in 17 seconds
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
X3DOMTutorial/index.html
0 → 100644
View file @
e62ed849
<html
xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Hello X3DOM
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"https://x3dom.org/download/1.8.1/x3dom.css"
></link>
<script
type=
"text/javascript"
src =
"https://x3dom.org/download/1.8.1/x3dom.js"
></script>
<script
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
></script>
</head>
<body>
<font
size=
"4"
>
Hello X3DOM
</font>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<th
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
style=
"float:left"
>
<Scene>
<background
transparency=
'0'
skyColor=
'0 1 0'
>
</background>
<Shape>
<Box>
</Box>
</Shape>
</Scene>
</X3D>
</p>
</th>
<th
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
In this example, a simple 3D scene is integrated into a web page. This is done by the
<
X3D
>
tag in the HTML document.
The
<
X3D
>
tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the library or use it
from the server. It is recommended to use the library from the server to ensure that you always have the latest version.
A local copy of the library is useful for development, if you are not always connected.
<br>
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
Shape id=box
>
<
Box
>
<
/Box
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
The
<
X3D
>
tag defines the size of the 3D canvas on the web page as well as the scene graph.
An
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
target=
"_blank"
>
X3D scene graph
</a>
is defined as a directed acyclic graph.
The nodes of the scene graph will be rendered on the screen from a given camera position.
The default camera position is (0,0,10) pointing to the negative z-Axis.
So objects at the center of the coordinate system will be displayed on the screen.
A shape node contains a geometry. In this example, it is a simple box. The center of the box is at (0,0,0) with default size 2 in all dimensions
<br>
The color of the background can be changed in the attribute skyColor. Currently it is red.
The color is defined using
<a
href=
"http://en.wikipedia.org/wiki/RGB_color_model"
target=
"_blank"
>
RGB color model
</a>
with arithmetic notation (0.0 t0 1.0 per value).
<br>
The color of the Box can be changed by applying an appearance to the shape node.
In X3D, the
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/index.html"
target=
"_blank"
>
Shape node
</a>
associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box.
<pre
class=
"prettyprint"
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
Shape id=box
>
<
appearance
>
<
material diffuseColor='0 0 1'
><
/material
>
<
/appearance
>
<
Box
>
<
/Box
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
</pre>
<shape>
<box></box>
</shape>
</th>
</body>
</html>
\ No newline at end of file
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