Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Volker Coors
Visualization
Commits
a97614f8
Commit
a97614f8
authored
Apr 27, 2022
by
Mandic
Browse files
Update hellox3dom.html
parent
2aee5012
Pipeline
#6353
passed with stages
in 11 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/X3DOMTutorial/hellox3dom.html
View file @
a97614f8
...
@@ -5,6 +5,8 @@
...
@@ -5,6 +5,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>
<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>
</head>
</head>
<body>
<body>
...
@@ -23,6 +25,7 @@
...
@@ -23,6 +25,7 @@
</Shape>
</Shape>
</Scene>
</Scene>
</X3D>
</X3D>
</p>
</td>
</td>
<td
width=
"50%"
align=
"left"
valign=
"top"
scope=
"col"
>
<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
In this example, a simple 3D scene is integrated into a web page. This is done by the
<
X3D
>
tag in the
...
@@ -33,16 +36,30 @@
...
@@ -33,16 +36,30 @@
version.
version.
A local copy of the library is useful for development, if you are not always connected.
A local copy of the library is useful for development, if you are not always connected.
<br>
<br>
<pre
class=
"prettyprint"
>
<pre>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<code
class=
"language-html"
>
<
Scene
>
<
html
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
head
>
<
Shape id=box
>
<
title
>
My first X3DOM page
<
/title
>
<
Box
>
<
/Box
>
<
script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'
>
<
/script
>
<
/Shape
>
<
link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'
><
/link
>
<
/Scene
>
<
/head
>
<
/X3D
>
<
body
>
</pre>
<
h1
>
Hello, X3DOM!
<
/h1
>
<
p
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
Scene
>
<
background transparency='0' skyColor='0 0 1'
>
<
/background
>
<
Shape id=box
>
<
Box
>
<
/Box
>
<
/Shape
>
<
/Scene
>
<
/X3D
>
<
/p
>
<
/body
>
<
/html
>
</code>
</pre>
The
<
X3D
>
tag defines the size of the 3D canvas on the web page as well as the scene graph.
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"
An
<a
href=
"http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
target=
"_blank"
>
X3D scene graph
</a>
target=
"_blank"
>
X3D scene graph
</a>
...
@@ -56,31 +73,31 @@
...
@@ -56,31 +73,31 @@
The color of the background can be changed in the attribute skyColor. Currently it is red.
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
The color is defined using
<a
href=
"http://en.wikipedia.org/wiki/RGB_color_model"
target=
"_blank"
>
RGB color
model
</a>
model
</a>
with arithmetic notation (0.0 t
0
1.0 per value).
<br>
with arithmetic notation (0.0 t
o
1.0 per value).
<br>
The color of the Box can be changed by applying an appearance to the shape node.
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
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
node
</a>
associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box.
nodes that define that geometry's appearance. The following example draws a blue box.
<pre
class=
"prettyprint"
>
<pre>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<code
class=
"language-html"
>
<
Scene
>
<
X3D id="shapedata" width="600px" height="600px" style="float:left"
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
Scene
>
<
Shape id=box
>
<
background transparency='0' skyColor='1 0 0'
>
<
/background
>
<
appearance
>
<
Shape id=box
>
<
material diffuseColor='0 0 1'
><
/material
>
<
appearance
>
<
/appearance
>
<
material diffuseColor='0 0 1'
><
/material
>
<
Box
>
<
/Box
>
<
/appearance
>
<
/Shape
>
<
Box
>
<
/Box
>
<
/Scene
>
<
/Shape
>
<
/X3D
>
<
/Scene
>
</pre>
<
/X3D
>
</code>
</pre>
<shape>
<shape>
<box></box>
<box></box>
</shape>
</shape>
</td>
</td>
</tr>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</table>
<script
type=
"text/javascript"
src=
"x3dom.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a 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