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>
<html>
<head>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>
Hello X3DOM
</title>
<title>
Hello X3DOM
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"x3dom.css"
>
</link>
</link>
</head>
</head>
<body>
<body>
<h1>
Hello X3DOM
</h1>
<h1>
Hello X3DOM
</h1>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<table
width=
"100%"
height=
"85%"
border=
"0"
>
<tr>
<tr>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<td
width=
"50%"
align=
"center"
valign=
"top"
scope=
"col"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
style=
"float:left"
>
<X3D
id=
"shapedata"
width=
"600px"
height=
"600px"
style=
"float:left"
>
<Scene>
<Scene>
<background
transparency=
'0'
skyColor=
'0 1 0'
>
</background>
<background
transparency=
'0'
skyColor=
'0.1 0.2 0'
>
</background>
<Shape>
<Shape>
<Box>
</Box>
<appearance
>
</Shape>
<material
diffuseColor=
'1 0 0'
></material>
</Scene>
</appearance>
</X3D>
<Box>
</Box>
</p>
</Shape>
</td>
</Scene>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
</X3D>
In this example, a simple 3D scene is integrated into a web page. This is done by the
<
X3D
>
tag in the
</p>
HTML document.
</td>
The
<
X3D
>
tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
library or use it
In this example, a simple 3D scene is integrated into a web page. This is done by the
<
X3D
>
tag in the
from the server. It is recommended to use the library from the server to ensure that you always have the latest
HTML document.
version.
The
<
X3D
>
tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the
A local copy of the library is useful for development, if you are not always connected.
library or use it
<br>
from the server. It is recommended to use the library from the server to ensure that you always have the latest
<pre
class=
"prettyprint"
>
version.
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
A local copy of the library is useful for development, if you are not always connected.
<
Scene
>
<br>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<pre
class=
"prettyprint"
>
<
Shape id=box
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Box
>
<
/Box
>
<
Scene
>
<
/Shape
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
/Scene
>
<
Shape id=box
>
<
/X3D
>
<
Box
>
<
/Box
>
</pre>
<
/Shape
>
The
<
X3D
>
tag defines the size of the 3D canvas on the web page as well as the scene graph.
<
/Scene
>
An
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
<
/X3D
>
target=
"_blank"
>
X3D scene graph
</a>
</pre>
is defined as a directed acyclic graph.
The
<
X3D
>
tag defines the size of the 3D canvas on the web page as well as the scene graph.
The nodes of the scene graph will be rendered on the screen from a given camera position.
An
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
The default camera position is (0,0,10) pointing to the negative z-Axis.
target=
"_blank"
>
X3D scene graph
</a>
So objects at the center of the coordinate system will be displayed on the screen.
is defined as a directed acyclic graph.
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
The nodes of the scene graph will be rendered on the screen from a given camera position.
default size 2 in all dimensions
The default camera position is (0,0,10) pointing to the negative z-Axis.
<br>
So objects at the center of the coordinate system will be displayed on the screen.
The color of the background can be changed in the attribute skyColor. Currently it is red.
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
The color is defined using
<a
href=
"http://en.wikipedia.org/wiki/RGB_color_model"
target=
"_blank"
>
RGB color
default size 2 in all dimensions
model
</a>
<br>
with arithmetic notation (0.0 t0 1.0 per value).
<br>
The color of the background can be changed in the attribute skyColor. Currently it is red.
The color of the Box can be changed by applying an appearance to the shape node.
The color is defined using
<a
href=
"http://en.wikipedia.org/wiki/RGB_color_model"
target=
"_blank"
>
RGB color
In X3D, the
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/index.html"
target=
"_blank"
>
Shape
model
</a>
node
</a>
associates a geometry node with
with arithmetic notation (0.0 t0 1.0 per value).
<br>
nodes that define that geometry's appearance. The following example draws a blue box.
The color of the Box can be changed by applying an appearance to the shape node.
<pre
class=
"prettyprint"
>
In X3D, the
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/index.html"
target=
"_blank"
>
Shape
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
node
</a>
associates a geometry node with
<
Scene
>
nodes that define that geometry's appearance. The following example draws a blue box.
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<pre
class=
"prettyprint"
>
<
Shape id=box
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
appearance
>
<
Scene
>
<
material diffuseColor='0 0 1'
><
/material
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
/appearance
>
<
Shape id=box
>
<
Box
>
<
/Box
>
<
appearance
>
<
/Shape
>
<
material diffuseColor='0 0 1'
><
/material
>
<
/Scene
>
<
/appearance
>
<
/X3D
>
<
Box
>
<
/Box
>
</pre>
<
/Shape
>
<shape>
<
/Scene
>
<box></box>
<
/X3D
>
</shape>
</pre>
</td>
<shape>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
<box></box>
</body>
</shape>
</td>
</html>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
\ No newline at end of file
</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