-
Notifications
You must be signed in to change notification settings - Fork 1
/
x3d-viewer-002.html
150 lines (133 loc) · 5.49 KB
/
x3d-viewer-002.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>My X3DOM Page with Proper Rotation</title>
<script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'></script>
<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'></link>
<script type="text/javascript">
navigationInfo = null;
function loadX3DFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var content = e.target.result;
var parser = new DOMParser();
x3dDoc = parser.parseFromString(content, "text/xml");
// Corregge i percorsi delle texture
var imageTextures = x3dDoc.querySelectorAll("ImageTexture, TextureProperties");
imageTextures.forEach(function(texture) {
var url = texture.getAttribute("url");
if (!url || url === "") {
texture.removeAttribute("url");
}
});
sourceScene = x3dDoc.querySelector("Scene") || x3dDoc.querySelector("scene");
if (sourceScene) {
// Configura NavigationInfo per la modalità EXAMINE
navigationInfo = sourceScene.querySelector("NavigationInfo");
if (!navigationInfo) {
navigationInfo = x3dDoc.createElement("NavigationInfo");
sourceScene.appendChild(navigationInfo);
}
navigationInfo.setAttribute("type", '"EXAMINE" "ANY"');
// Inserisce la scena nel documento
targetScene = document.getElementById("modelScene");
targetScene.innerHTML = ''; // Pulisci solo la scena del modello
// Configura o crea il Viewpoint
viewpoint = targetScene.querySelector("Viewpoint");
if (!viewpoint) {
viewpoint = x3dDoc.createElement("Viewpoint");
targetScene.insertBefore(viewpoint, targetScene.firstChild); // Aggiungi Viewpoint all'inizio della scena
}
// Imposta posizione e zoom
viewpoint.setAttribute("position", "20 20 0"); // Cambia 0 0 10 con la posizione desiderata
viewpoint.setAttribute("orientation", "0 1 0 0"); // Cambia orientamento se necessario
viewpoint.setAttribute("fieldOfView", "1.7"); // Cambia questo valore per regolare lo zoom
Array.from(sourceScene.children).forEach(function(child) {
var importedNode = document.importNode(child, true);
targetScene.appendChild(importedNode);
});
console.log("Scene content loaded:", targetScene.innerHTML.length);
x3dom.reload(); // Ricarica x3dom per aggiornare il viewpoint
} else {
console.error("Nessuna scena trovata nel file X3D");
}
};
reader.readAsText(input.files[0]);
}
}
</script>
</head>
<body>
<p>Select an X3D file to load (.PNG textures will be automatically searched in its folder):</p>
<input type="file" accept=".x3d" onchange="loadX3DFile(this)">
<br><br>
<table>
<tr>
<td>
<x3d width='800px' height='600px'>
<scene>
<!-- Definisce il punto di vista fisso con rotazione centrata all'origine -->
<Viewpoint
position="0 0 10"
centerOfRotation="0 0 0"
orientation="0 1 0 0"
fieldOfView="0.785"
bind="true">
</Viewpoint>
<!-- Assi persistenti -->
<Transform translation="0 0 0">
<!-- Asse X (Rosso) -->
<Shape>
<Appearance><Material diffuseColor="1 0 0" /></Appearance>
<LineSet vertexCount="2">
<Coordinate point="0 0 0 5 0 0" />
</LineSet>
</Shape>
<!-- Asse Y (Verde) -->
<Shape>
<Appearance><Material diffuseColor="0 1 0" /></Appearance>
<LineSet vertexCount="2">
<Coordinate point="0 0 0 0 5 0" />
</LineSet>
</Shape>
<!-- Asse Z (Blu) -->
<Shape>
<Appearance><Material diffuseColor="0 0 1" /></Appearance>
<LineSet vertexCount="2">
<Coordinate point="0 0 0 0 0 5" />
</LineSet>
</Shape>
</Transform>
<!-- Area per il modello caricato -->
<Transform id="modelScene">
<!-- Modello di default per quando nessun file è caricato -->
<Shape>
<Appearance>
<Material diffuseColor='1 0 0'></Material>
</Appearance>
</Shape>
</Transform>
</scene>
</x3d>
</td>
<td valign="top">
<ul>
<li>A = Full model view
<li>W = Walk mode (with mouse)
<li>E = Examine mode (rotate around origin)
<li>I = "Look at" mode
<li>R = Reset view
<li>O = Strange view mode
<li>D = Debug mode
<li>G = Immediate pan mode
<li>F = flight mode
<li>U = Reset flight mode
</ul>
<a href="https://www.x3dom.org/documentation/interaction/">Official X3DOM help</a><br>
</td>
</tr>
</table>
</body>
</html>