Skip to Content

Wiki source code of 3D-Objekte einbinden

Last modified by Anna Paul-Hasenfuss on 30.06.2024
Show last authors
1 {{layout}}
2 {{layout-section ac:type="two_right_sidebar"}}
3 {{layout-cell}}
4 You can include interactive 3D models into all tests and tasks. This is possible thanks to the integration of [[x3dom>>url:https://www.x3dom.org/||rel="nofollow" shape="rect" class="external-link"]], an XML-based description language.
5
6 X3dom enables the creation and visualisation of three-dimensional objects. Learners can work interactively with these, e.g. move objects or perform actions specified by the author. This functionality is particularly attractive for practice and self-study scenarios.
7
8
9 (% style="text-align: justify;" %)
10 [[image:attach:Editor - 3D Objekt bewegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
11
12 (% style="text-align: justify;" %)
13 //(All images are based on content examples kindly provided by the Chair of Virtual Reality and Multimedia at TU Freiberg. //You can find the examples for download on the page// [[3D Content examples>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Medien%20einbinden/3D-Objekte%20einbinden/Beispielinhalte/]])//
14
15 (% style="text-align: justify;" %)
16 X3dom is a licence-free and open file format.
17 {{/layout-cell}}
18
19 {{layout-cell}}
20 {{panel borderColor="#ddd" bgColor="#f0f0f0" borderStyle="solid" title="Content"}}
21 {{toc start="2"/}}
22
23 **Related Topics**
24
25 * [[x3dom project>>url:https://www.x3dom.org||shape="rect"]]
26
27 **Content examples**
28
29 * [[3D content examples>>doc:.Beispielinhalte.WebHome]]
30
31
32 {{/panel}}
33
34
35 {{/layout-cell}}
36 {{/layout-section}}
37
38 {{layout-section ac:type="single"}}
39 {{layout-cell}}
40 == How to integrate 3D objects in the editor ==
41
42 You can integrate 3D objects in all areas where the HTML editor is available and the 3D icon [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_3D.png||data-xwiki-image-style="img-icon"]] is visible.
43
44
45 (% class="wrapped" %)
46 |(% style="width:622px" %)(((
47 (% class="content-wrapper" %)
48 (((
49 Open the task or test in which you want to integrate a 3D model. Click on [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_3D.png||data-xwiki-image-style="img-icon"]] in the header section of the HTML editor.
50
51
52 )))
53 )))|(% style="width:611px" %)(((
54 (% class="content-wrapper" %)
55 (((
56 [[image:attach:Editor - 3D Objekt einfügen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
57 )))
58 )))
59 |(% colspan="1" style="width:622px" %)(% colspan="1" %)
60 (((
61 Clicking this icon opens a dialogue to enter the x3dom description. A simple example is the x3d description of a simple cube representation in the text field.
62
63
64
65 )))|(% colspan="1" style="width:611px" %)(% colspan="1" %)
66 (((
67 (% class="content-wrapper" %)
68 (((
69 [[image:attach:Editor - x3D Würfelbeschreibung_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
70 )))
71 )))
72 |(% colspan="1" style="width:622px" %)(% colspan="1" %)
73 (((
74 Replace this content with your own x3dom description. If you want more information on creating 3D elements in x3dom visit [[x3dom>>url:https://www.x3dom.org||shape="rect"]].
75
76 Once you click on the Finish button, the object is inserted.
77
78
79
80 )))|(% colspan="1" style="width:611px" %)(% colspan="1" %)
81 (((
82 (% class="content-wrapper" %)
83 (((
84 [[image:attach:Editor - 3D Objekt Änderungen speichern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
85 )))
86 )))
87 |(% colspan="1" style="width:622px" %)(% colspan="1" %)
88 (((
89 (% class="content-wrapper" %)
90 (((
91 In the HTML editor, an inserted 3D object is marked with the symbol [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_eingefügtes 3D Objekt.png||data-xwiki-image-style="img-icon" height="25" width="23"]].
92
93
94
95 )))
96 )))|(% colspan="1" style="width:611px" %)(% colspan="1" %)
97 (((
98 (% class="content-wrapper" %)
99 (((
100 [[image:attach:Editor - 3D Objekt im Editor_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
101 )))
102 )))
103 |(% colspan="1" style="width:622px" %)(% colspan="1" %)
104 (((
105 If you want to upload additional content, you can do so in the "Options" tab in the form of external files. CSS and JavaScript content is automatically loaded for display. Media content can be referenced via the path "media/filename" in x3dom.
106
107
108 )))|(% colspan="1" style="width:611px" %)(% colspan="1" %)
109 (((
110 (% class="content-wrapper" %)
111 (((
112 [[image:attach:Editor - zusätzliche Inhalte für 3D Objekt einfügen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
113 )))
114 )))
115
116 == How to test the interactivity of 3D objects ==
117
118 As soon as the object is configured in the editor, you will see a scaled-down preview in the dialogue below the x3dom description. A detailed one with all possible additional media content is available by opening the preview of the created task or test. To move the 3D object, hold it with you mouse pointer and then move it in the direction of your choice.
119
120
121 [[image:attach:Editor - 3D Objekt bewegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
122
123 == How to edit an existing 3D object ==
124
125 You can edit an already integrated 3D object as follows:
126
127 (% class="wrapped" %)
128 |(% style="width:630px" %)(((
129 (% class="content-wrapper" %)
130 (((
131 Open the relevant task in the editor. Click on the [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_eingefügtes 3D Objekt.png||data-xwiki-image-style="img-icon" height="34" width="31"]] symbol for the 3D object in the editor and then select the button [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_3D.png||data-xwiki-image-style="img-icon"]] for editing a 3D object.
132
133
134
135 )))
136 )))|(% style="width:604px" %)(((
137 (% class="content-wrapper" %)
138 (((
139 [[image:attach:Editor - 3D Objekt bearbeiten_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
140 )))
141 )))
142 |(% colspan="1" style="width:630px" %)(% colspan="1" %)
143 (((
144 This opens the "Edit x3dom" dialogue for you to make your adjustments. Click on "Finish" to save and apply the changes.
145
146
147 )))|(% colspan="1" style="width:604px" %)(% colspan="1" %)
148 (((
149 (% class="content-wrapper" %)
150 (((
151 [[image:attach:Editor - 3D Objekt Änderungen speichern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
152 )))
153 )))
154
155 == 3D objects in PDF documents ==
156
157 Please note that a 3D element **cannot **be displayed in a PDF document. In its place, you will find a standard icon.
158
159 [[image:attach:Pdf - 3D Objekt_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="218" width="223"]]
160 {{/layout-cell}}
161 {{/layout-section}}
162 {{/layout}}