@giro3d/piero 25.10.0-beta.3 → 25.10.0-beta.5
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/README.md +128 -0
- package/dist/index.cjs.js +8 -8
- package/dist/index.es.js +279 -272
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://piero.giro3d.org">
|
|
3
|
+
<img src="https://piero.giro3d.org/piero_logo.svg" height="120" alt="Piero">
|
|
4
|
+
</a>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div align="center">
|
|
8
|
+
A versatile web library to visualize 3D geospatial data in the browser.
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<br>
|
|
12
|
+
|
|
13
|
+
<div align="center">
|
|
14
|
+
<a href="https://gitlab.com/giro3d/piero/badges/main/pipeline.svg"><img src="https://gitlab.com/giro3d/piero/badges/main/pipeline.svg" alt="Pipeline status"></a>
|
|
15
|
+
<a href="https://www.npmjs.com/package/@giro3d/piero"><img alt="NPMJS latest package badge" src="https://img.shields.io/npm/v/@giro3d/piero?color=blue"></a>
|
|
16
|
+
<a href="https://matrix.to/#/#giro3d:matrix.org"><img src="https://img.shields.io/matrix/giro3d:matrix.org" alt="Matrix chat"></a>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
## The Piero library
|
|
20
|
+
|
|
21
|
+
This is the library version of the [Piero web application](https://giro3d.org/piero.html). The library version allows you to customize and use your own modules and plugins.
|
|
22
|
+
|
|
23
|
+
## Getting started
|
|
24
|
+
|
|
25
|
+
This library is built with Vue.js, but you don't need Vue to use the library (unless you want to write your own components).
|
|
26
|
+
|
|
27
|
+
```shell
|
|
28
|
+
npm install @giro3d/piero
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Then create an `index.html` file
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<!doctype html>
|
|
35
|
+
<html lang="en">
|
|
36
|
+
<head>
|
|
37
|
+
<meta charset="UTF-8" />
|
|
38
|
+
<title>My custom Piero app</title>
|
|
39
|
+
</head>
|
|
40
|
+
<body>
|
|
41
|
+
<div id="app"></div>
|
|
42
|
+
<script type="module" src="./index.ts"></script>
|
|
43
|
+
</body>
|
|
44
|
+
</html>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
And an `index.ts` file:
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
// index.ts
|
|
51
|
+
import { createPieroApp } from '@giro3d/piero';
|
|
52
|
+
|
|
53
|
+
import configuration from './config';
|
|
54
|
+
|
|
55
|
+
createPieroApp({
|
|
56
|
+
container: '#app',
|
|
57
|
+
baseUrl: 'http://localhost:8080/',
|
|
58
|
+
configuration,
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Create the `config.ts` file in the same folder as `index.ts`, and fill it with your configuration (you can use the [sample configuration](https://gitlab.com/giro3d/piero/-/blob/main/config.ts.sample) as a starting point).
|
|
63
|
+
|
|
64
|
+
Bundle your application and run it. For example with Vite:
|
|
65
|
+
|
|
66
|
+
```shell
|
|
67
|
+
vite --port 8080
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Then open your browser at <http://localhost:8080>.
|
|
71
|
+
|
|
72
|
+
This is the minimal configuration to use the Piero library.
|
|
73
|
+
|
|
74
|
+
### Using a remote configuration
|
|
75
|
+
|
|
76
|
+
Alternatively, you can pass a URL to a remote JSON configuration
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
// index.ts
|
|
80
|
+
import { createPieroApp } from '@giro3d/piero';
|
|
81
|
+
|
|
82
|
+
createPieroApp({
|
|
83
|
+
container: '#app',
|
|
84
|
+
baseUrl: 'http://localhost:8080/',
|
|
85
|
+
configuration: 'https://example.com/config.json',
|
|
86
|
+
});
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Deploying
|
|
90
|
+
|
|
91
|
+
To deploy your app, update the `baseUrl` to be the URL from which the app is served. For example, if you want your app to be accessible from `https://example.com/piero`, the base URL would be (don't forget the slash):
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
// index.ts
|
|
95
|
+
import { createPieroApp } from '@giro3d/piero';
|
|
96
|
+
|
|
97
|
+
createPieroApp({
|
|
98
|
+
container: '#app',
|
|
99
|
+
baseUrl: 'https://example.com/piero/',
|
|
100
|
+
configuration: 'https://example.com/config.json',
|
|
101
|
+
});
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Register custom modules
|
|
105
|
+
|
|
106
|
+
You can register your own modules (classes that implement the `Module` interface) at startup:
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
// index.ts
|
|
110
|
+
import { createPieroApp, Module } from '@giro3d/piero';
|
|
111
|
+
|
|
112
|
+
class MyCustomModule implements Module {
|
|
113
|
+
name = 'A custom module';
|
|
114
|
+
|
|
115
|
+
initialize(context: PieroContext) {
|
|
116
|
+
console.log('hello, world!');
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
createPieroApp({
|
|
121
|
+
container: '#app',
|
|
122
|
+
baseUrl: 'https://example.com/piero/',
|
|
123
|
+
configuration: 'https://example.com/config.json',
|
|
124
|
+
modules: [new MyCustomModule()],
|
|
125
|
+
});
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Refer to [CONFIGURATION.md](https://gitlab.com/giro3d/piero/-/blob/main/CONFIGURATION.md) for more information.
|