f3d 2.5.0 → 3.3.0-RC1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +31 -0
- package/README.md +106 -0
- package/dist/f3d.js +14 -0
- package/dist/f3d.wasm +0 -0
- package/package.json +15 -21
- package/f3d.data +0 -0
- package/f3d.js +0 -19
- package/f3d.wasm +0 -0
- package/favicon.ico +0 -0
- package/index.html +0 -231
package/index.html
DELETED
|
@@ -1,231 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html class="theme-dark">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
-
<title>F3D Web</title>
|
|
8
|
-
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
|
9
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">
|
|
11
|
-
<style>
|
|
12
|
-
#main {
|
|
13
|
-
min-height: 70vh;
|
|
14
|
-
}
|
|
15
|
-
</style>
|
|
16
|
-
</head>
|
|
17
|
-
|
|
18
|
-
<body>
|
|
19
|
-
<section class="section">
|
|
20
|
-
<div class="columns">
|
|
21
|
-
<div class="column">
|
|
22
|
-
<h1 class="title">F3D Web</h1>
|
|
23
|
-
<p class="subtitle">
|
|
24
|
-
A WebAssembly application using libf3d
|
|
25
|
-
</p>
|
|
26
|
-
</div>
|
|
27
|
-
<div class="column">
|
|
28
|
-
<div class="field is-pulled-right">
|
|
29
|
-
<input id="dark" type="checkbox" name="dark" class="switch is-rounded" checked>
|
|
30
|
-
<label for="dark">Dark theme</label>
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</section>
|
|
35
|
-
<section class="section">
|
|
36
|
-
<div class="columns">
|
|
37
|
-
<aside class="menu">
|
|
38
|
-
<div class="file has-name">
|
|
39
|
-
<label class="file-label">
|
|
40
|
-
<input class="file-input" type="file" id="file-selector" accept=".gml,.gltf,.glb,.obj,.ply,.pts,.stl,.vtk,.vtp,.vtu,.3ds,.wrl,.vrml" />
|
|
41
|
-
<span class="file-cta">
|
|
42
|
-
<span class="file-label">Open a file...</span>
|
|
43
|
-
</span>
|
|
44
|
-
<span class="file-name" id="file-name"></span>
|
|
45
|
-
</label>
|
|
46
|
-
</div>
|
|
47
|
-
<div class="is-flex is-flex-direction-row is-align-items-center">
|
|
48
|
-
<button id="y-up" class="button mx-1 is-small">+Y</button>
|
|
49
|
-
<button id="z-up" class="button mx-1 is-small is-active">+Z</button>
|
|
50
|
-
<label class="mx-1">Up</label>
|
|
51
|
-
</div>
|
|
52
|
-
<p class="menu-label">Widgets</p>
|
|
53
|
-
<div class="field">
|
|
54
|
-
<input id="grid" type="checkbox" name="grid" class="switch is-rounded" checked>
|
|
55
|
-
<label for="grid">Grid</label>
|
|
56
|
-
</div>
|
|
57
|
-
<div class="field">
|
|
58
|
-
<input id="axis" type="checkbox" name="axis" class="switch is-rounded" checked>
|
|
59
|
-
<label for="axis">Axis</label>
|
|
60
|
-
</div>
|
|
61
|
-
<p class="menu-label">Rendering</p>
|
|
62
|
-
<div class="field">
|
|
63
|
-
<input id="fxaa" type="checkbox" name="fxaa" class="switch is-rounded" checked>
|
|
64
|
-
<label for="fxaa">Anti-aliasing</label>
|
|
65
|
-
</div>
|
|
66
|
-
<div class="field">
|
|
67
|
-
<input id="tone" type="checkbox" name="tone" class="switch is-rounded" checked>
|
|
68
|
-
<label for="tone">Tone mapping</label>
|
|
69
|
-
</div>
|
|
70
|
-
<div class="field">
|
|
71
|
-
<input id="ssao" type="checkbox" name="ssao" class="switch is-rounded" checked>
|
|
72
|
-
<label for="ssao">Ambient occlusion</label>
|
|
73
|
-
</div>
|
|
74
|
-
<p class="menu-label">Lighting</p>
|
|
75
|
-
<div class="field">
|
|
76
|
-
<input id="ambient" type="checkbox" name="ambient" class="switch is-rounded" checked>
|
|
77
|
-
<label for="ambient">Ambient light</label>
|
|
78
|
-
</div>
|
|
79
|
-
</aside>
|
|
80
|
-
<div class="column">
|
|
81
|
-
<div class="container" id="main">
|
|
82
|
-
<canvas id="canvas"></canvas>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
</section>
|
|
87
|
-
<script type="text/javascript" src="f3d.js"></script>
|
|
88
|
-
<script type="text/javascript">
|
|
89
|
-
|
|
90
|
-
const settings = {
|
|
91
|
-
canvas: document.getElementById("canvas"),
|
|
92
|
-
setupOptions: (options) => {
|
|
93
|
-
// background must be set to black for proper blending with transparent canvas
|
|
94
|
-
options.set_color('render.background.color', 0, 0, 0);
|
|
95
|
-
|
|
96
|
-
// setup coloring
|
|
97
|
-
options.set_string('model.scivis.array-name', 'Colors');
|
|
98
|
-
options.set_integer('model.scivis.component', -2);
|
|
99
|
-
options.toggle('model.scivis.cells');
|
|
100
|
-
|
|
101
|
-
// make it look nice
|
|
102
|
-
options.toggle('render.effect.anti-aliasing');
|
|
103
|
-
options.toggle('render.effect.tone-mapping');
|
|
104
|
-
options.toggle('render.effect.ambient-occlusion');
|
|
105
|
-
options.toggle('render.hdri.ambient');
|
|
106
|
-
|
|
107
|
-
// display widgets
|
|
108
|
-
options.toggle('interactor.axis');
|
|
109
|
-
options.toggle('render.grid.enable');
|
|
110
|
-
|
|
111
|
-
// default to +Z
|
|
112
|
-
options.set_string('scene.up-direction', '+Z');
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
f3d(settings)
|
|
117
|
-
.then((Module) => {
|
|
118
|
-
// automatically load all supported file format readers
|
|
119
|
-
Module.Engine.autoloadPlugins();
|
|
120
|
-
|
|
121
|
-
Module.engineInstance = new Module.Engine();
|
|
122
|
-
|
|
123
|
-
const openFile = (name) => {
|
|
124
|
-
document.getElementById('file-name').innerHTML = name;
|
|
125
|
-
const filePath = '/' + name;
|
|
126
|
-
const loader = Module.engineInstance.getLoader();
|
|
127
|
-
if (loader.hasSceneReader(filePath))
|
|
128
|
-
{
|
|
129
|
-
loader.loadScene(filePath);
|
|
130
|
-
}
|
|
131
|
-
else if (loader.hasGeometryReader(filePath))
|
|
132
|
-
{
|
|
133
|
-
loader.loadGeometry(filePath);
|
|
134
|
-
}
|
|
135
|
-
else
|
|
136
|
-
{
|
|
137
|
-
console.error('File ' + filePath + ' cannot be opened');
|
|
138
|
-
}
|
|
139
|
-
Module.engineInstance.getWindow().resetCamera();
|
|
140
|
-
Module.engineInstance.getWindow().render();
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
// setup file open event
|
|
144
|
-
document.querySelector('#file-selector')
|
|
145
|
-
.addEventListener('change', (evt) => {
|
|
146
|
-
for (const file of evt.target.files) {
|
|
147
|
-
const reader = new FileReader();
|
|
148
|
-
reader.addEventListener('loadend', (e) => {
|
|
149
|
-
Module.FS.writeFile(file.name, new Uint8Array(reader.result));
|
|
150
|
-
openFile(file.name);
|
|
151
|
-
});
|
|
152
|
-
reader.readAsArrayBuffer(file);
|
|
153
|
-
}
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
Module.setupOptions(Module.engineInstance.getOptions());
|
|
157
|
-
|
|
158
|
-
// toggle callback
|
|
159
|
-
const mapToggleIdToOption = (id, option) => {
|
|
160
|
-
document.querySelector('#' + id)
|
|
161
|
-
.addEventListener('change', (evt) => {
|
|
162
|
-
Module.engineInstance.getOptions().toggle(option);
|
|
163
|
-
Module.engineInstance.getWindow().render();
|
|
164
|
-
});
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
mapToggleIdToOption('grid', 'render.grid.enable');
|
|
168
|
-
mapToggleIdToOption('axis', 'interactor.axis');
|
|
169
|
-
mapToggleIdToOption('fxaa', 'render.effect.anti-aliasing');
|
|
170
|
-
mapToggleIdToOption('tone', 'render.effect.tone-mapping');
|
|
171
|
-
mapToggleIdToOption('ssao', 'render.effect.ambient-occlusion');
|
|
172
|
-
mapToggleIdToOption('ambient', 'render.hdri.ambient');
|
|
173
|
-
|
|
174
|
-
switchDark = () => {
|
|
175
|
-
document.documentElement.classList.add('theme-dark');
|
|
176
|
-
document.documentElement.classList.remove('theme-light');
|
|
177
|
-
Module.engineInstance.getOptions().set_color('render.grid.color', 0.25, 0.27, 0.33);
|
|
178
|
-
Module.engineInstance.getWindow().render();
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
switchLight = () => {
|
|
182
|
-
document.documentElement.classList.add('theme-light');
|
|
183
|
-
document.documentElement.classList.remove('theme-dark');
|
|
184
|
-
Module.engineInstance.getOptions().set_color('render.grid.color', 0.67, 0.69, 0.75);
|
|
185
|
-
Module.engineInstance.getWindow().render();
|
|
186
|
-
};
|
|
187
|
-
|
|
188
|
-
// theme switch
|
|
189
|
-
document.querySelector('#dark').addEventListener('change', (evt) => {
|
|
190
|
-
if (evt.target.checked)
|
|
191
|
-
switchDark();
|
|
192
|
-
else
|
|
193
|
-
switchLight();
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
switchDark();
|
|
197
|
-
|
|
198
|
-
// up callback
|
|
199
|
-
document.querySelector('#z-up')
|
|
200
|
-
.addEventListener('click', (evt) => {
|
|
201
|
-
Module.engineInstance.getOptions().set_string('scene.up-direction', '+Z');
|
|
202
|
-
document.getElementById('z-up').classList.add('is-active');
|
|
203
|
-
document.getElementById('y-up').classList.remove('is-active');
|
|
204
|
-
openFile(document.getElementById('file-name').innerHTML);
|
|
205
|
-
});
|
|
206
|
-
|
|
207
|
-
document.querySelector('#y-up')
|
|
208
|
-
.addEventListener('click', (evt) => {
|
|
209
|
-
Module.engineInstance.getOptions().set_string('scene.up-direction', '+Y');
|
|
210
|
-
document.getElementById('y-up').classList.add('is-active');
|
|
211
|
-
document.getElementById('z-up').classList.remove('is-active');
|
|
212
|
-
openFile(document.getElementById('file-name').innerHTML);
|
|
213
|
-
});
|
|
214
|
-
|
|
215
|
-
// load the file located in the virtual filesystem
|
|
216
|
-
openFile('f3d.vtp');
|
|
217
|
-
|
|
218
|
-
// setup the window size based on the canvas size
|
|
219
|
-
const main = document.getElementById('main');
|
|
220
|
-
const scale = window.devicePixelRatio;
|
|
221
|
-
Module.engineInstance.getWindow().setSize(scale * main.clientWidth, scale * main.clientHeight);
|
|
222
|
-
|
|
223
|
-
// do a first render and start the interactor
|
|
224
|
-
Module.engineInstance.getWindow().render();
|
|
225
|
-
Module.engineInstance.getInteractor().start();
|
|
226
|
-
})
|
|
227
|
-
.catch(error => console.error("Internal exception: " + error));
|
|
228
|
-
</script>
|
|
229
|
-
</body>
|
|
230
|
-
|
|
231
|
-
</html>
|