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
ef5784fe
Commit
ef5784fe
authored
May 19, 2021
by
Koukofikis
Browse files
Update hellox3dom.html
parent
5fab4255
Pipeline
#3789
passed with stages
in 19 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/X3DOMTutorial/hellox3dom.html
View file @
ef5784fe
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Hello X3DOM
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Hello X3DOM
</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=
'0 1 0'
>
</background>
<Shape>
<Box>
</Box>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td
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>
</td>
<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>
Hello X3DOM
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</head>
<body>
<h1>
Hello X3DOM
</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=
'0.1 0.2 0'
>
</background>
<Shape>
<appearance
>
<material
diffuseColor=
'1 0 0'
></material>
</appearance>
<Box>
</Box>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td
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>
</td>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</html>
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