@xeokit/xeokit-sdk 2.2.1-beta.2 → 2.2.2
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 +80 -16
- package/dist/xeokit-sdk.cjs.js +16 -1
- package/dist/xeokit-sdk.es.js +16 -1
- package/dist/xeokit-sdk.min.cjs.js +1 -1
- package/dist/xeokit-sdk.min.es.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,30 +4,94 @@
|
|
|
4
4
|
[](https://badge.fury.io/js/%40xeokit%2Fxeokit-sdk)
|
|
5
5
|
[](https://www.jsdelivr.com/package/npm/@xeokit/xeokit-sdk)
|
|
6
6
|
|
|
7
|
-
[xeokit](http://xeokit.io) is a JavaScript software development kit from [xeolabs](http://xeolabs.com) for viewing
|
|
7
|
+
[xeokit](http://xeokit.io) is a JavaScript software development kit from [xeolabs](http://xeolabs.com) for viewing
|
|
8
8
|
high-detail, full-precision 3D engineering and BIM models in the browser.
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
## Installing
|
|
11
|
+
|
|
12
|
+
````bash
|
|
13
|
+
npm i @xeokit/xeokit-sdk
|
|
14
|
+
````
|
|
11
15
|
|
|
12
16
|
## Usage
|
|
13
17
|
|
|
14
|
-
|
|
18
|
+
The xeokit SDK lets us develop our own browser-based BIM viewer, which we can fully customize and extend with
|
|
19
|
+
plugins. Let's create a [Viewer](https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/Viewer.js~Viewer.html) with
|
|
20
|
+
a [WebIFCLoaderPlugin](https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/WebIFCLoaderPlugin/WebIFCLoaderPlugin.js~WebIFCLoaderPlugin.html)
|
|
21
|
+
to view a IFC model in the browser, then view a sample IFC model from
|
|
22
|
+
the [Open IFC Model Database](http://openifcmodel.cs.auckland.ac.nz/Model/Details/274).
|
|
15
23
|
|
|
16
|
-
|
|
17
|
-
|
|
24
|
+
* [Run this example](https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_WebIFCLoaderPlugin_Duplex)
|
|
25
|
+
* [Read the full tutorial](https://www.notion.so/xeokit/Viewing-an-IFC-Model-with-WebIFCLoaderPlugin-9a572b801af949bf87a21c88968bd251)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
````html
|
|
30
|
+
<!doctype html>
|
|
31
|
+
<html>
|
|
32
|
+
<head>
|
|
33
|
+
<meta charset="utf-8">
|
|
34
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
35
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
36
|
+
<title>xeokit Example</title>
|
|
37
|
+
<style>
|
|
38
|
+
body {
|
|
39
|
+
margin: 0;
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 100%;
|
|
42
|
+
user-select: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#myCanvas {
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 100%;
|
|
48
|
+
position: absolute;
|
|
49
|
+
background: lightblue;
|
|
50
|
+
background-image: linear-gradient(lightblue, white);
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
53
|
+
</head>
|
|
54
|
+
<body>
|
|
55
|
+
<canvas id="myCanvas"></canvas>
|
|
56
|
+
</body>
|
|
57
|
+
<script id="source" type="module">
|
|
58
|
+
|
|
59
|
+
import {Viewer, WebIFCLoaderPlugin} from
|
|
60
|
+
"https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.js";
|
|
61
|
+
|
|
62
|
+
const viewer = new Viewer({
|
|
63
|
+
canvasId: "myCanvas",
|
|
64
|
+
transparent: true
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
viewer.camera.eye = [-3.933, 2.855, 27.018];
|
|
68
|
+
viewer.camera.look = [4.400, 3.724, 8.899];
|
|
69
|
+
viewer.camera.up = [-0.018, 0.999, 0.039];
|
|
70
|
+
|
|
71
|
+
const webIFCLoader = new WebIFCLoaderPlugin(viewer, {
|
|
72
|
+
wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
const model = webIFCLoader.load({
|
|
76
|
+
src: "Duplex.ifc",
|
|
77
|
+
edges: true
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
</script>
|
|
81
|
+
</html>
|
|
18
82
|
````
|
|
19
83
|
|
|
20
|
-
## Resources
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
84
|
+
## Resources
|
|
85
|
+
|
|
86
|
+
* [xeokit.io](https://xeokit.io/)
|
|
87
|
+
* [Examples](http://xeokit.github.io/xeokit-sdk/examples/)
|
|
88
|
+
* [Guides](https://www.notion.so/xeokit/xeokit-Documentation-4598591fcedb4889bf8896750651f74e)
|
|
89
|
+
* [API Docs](https://xeokit.github.io/xeokit-sdk/docs/)
|
|
90
|
+
* [Changelog](https://xeokit.github.io/xeokit-sdk/CHANGE_LOG)
|
|
91
|
+
* [Features](https://xeokit.io/index.html?foo=1#features)
|
|
92
|
+
* [FAQ](https://xeokit.io/index.html?foo=1#faq)
|
|
93
|
+
* [Blog](https://xeokit.io/blog.html)
|
|
94
|
+
* [License](https://xeokit.io/index.html#pricing)
|
|
31
95
|
|
|
32
96
|
|
|
33
97
|
|
package/dist/xeokit-sdk.cjs.js
CHANGED
|
@@ -13611,6 +13611,7 @@ class OcclusionLayer {
|
|
|
13611
13611
|
|
|
13612
13612
|
const MARKER_COLOR = math.vec3([1.0, 0.0, 0.0]);
|
|
13613
13613
|
const POINT_SIZE = 20;
|
|
13614
|
+
const MARKER_SPRITE_CLIPZ_OFFSET = -0.001; // Amount that we offset sprite clip Z coords to raise them from surfaces
|
|
13614
13615
|
|
|
13615
13616
|
const tempVec3a$$ = math.vec3();
|
|
13616
13617
|
|
|
@@ -13820,7 +13821,6 @@ class OcclusionTester {
|
|
|
13820
13821
|
src.push(" vWorldPosition = worldPosition;");
|
|
13821
13822
|
}
|
|
13822
13823
|
src.push(" vec4 clipPos = projMatrix * viewPosition;");
|
|
13823
|
-
src.push(" gl_Position = clipPos;");
|
|
13824
13824
|
src.push(" gl_PointSize = " + POINT_SIZE + ".0;");
|
|
13825
13825
|
if (scene.logarithmicDepthBufferEnabled) {
|
|
13826
13826
|
if (WEBGL_INFO$1.SUPPORTED_EXTENSIONS["EXT_frag_depth"]) {
|
|
@@ -13829,7 +13829,10 @@ class OcclusionTester {
|
|
|
13829
13829
|
src.push("clipPos.z = log2( max( 1e-6, clipPos.w + 1.0 ) ) * logDepthBufFC - 1.0;");
|
|
13830
13830
|
src.push("clipPos.z *= clipPos.w;");
|
|
13831
13831
|
}
|
|
13832
|
+
} else {
|
|
13833
|
+
src.push("clipPos.z += " + MARKER_SPRITE_CLIPZ_OFFSET + ";");
|
|
13832
13834
|
}
|
|
13835
|
+
src.push(" gl_Position = clipPos;");
|
|
13833
13836
|
src.push("}");
|
|
13834
13837
|
return src;
|
|
13835
13838
|
}
|
|
@@ -15444,6 +15447,14 @@ const Renderer = function (scene, options) {
|
|
|
15444
15447
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
15445
15448
|
};
|
|
15446
15449
|
|
|
15450
|
+
/**
|
|
15451
|
+
* Returns true if the next call to render() will draw something
|
|
15452
|
+
* @returns {boolean}
|
|
15453
|
+
*/
|
|
15454
|
+
this.needsRender = function () {
|
|
15455
|
+
return (imageDirty || drawableListDirty || stateSortDirty);
|
|
15456
|
+
};
|
|
15457
|
+
|
|
15447
15458
|
/**
|
|
15448
15459
|
* Renders inserted drawables.
|
|
15449
15460
|
* @private
|
|
@@ -26427,6 +26438,10 @@ class Scene extends Component {
|
|
|
26427
26438
|
this._needRecompile = false;
|
|
26428
26439
|
}
|
|
26429
26440
|
|
|
26441
|
+
if (!forceRender && !this._renderer.needsRender()) {
|
|
26442
|
+
return;
|
|
26443
|
+
}
|
|
26444
|
+
|
|
26430
26445
|
renderEvent.sceneId = this.id;
|
|
26431
26446
|
|
|
26432
26447
|
const passes = this._passes;
|
package/dist/xeokit-sdk.es.js
CHANGED
|
@@ -13607,6 +13607,7 @@ class OcclusionLayer {
|
|
|
13607
13607
|
|
|
13608
13608
|
const MARKER_COLOR = math.vec3([1.0, 0.0, 0.0]);
|
|
13609
13609
|
const POINT_SIZE = 20;
|
|
13610
|
+
const MARKER_SPRITE_CLIPZ_OFFSET = -0.001; // Amount that we offset sprite clip Z coords to raise them from surfaces
|
|
13610
13611
|
|
|
13611
13612
|
const tempVec3a$$ = math.vec3();
|
|
13612
13613
|
|
|
@@ -13816,7 +13817,6 @@ class OcclusionTester {
|
|
|
13816
13817
|
src.push(" vWorldPosition = worldPosition;");
|
|
13817
13818
|
}
|
|
13818
13819
|
src.push(" vec4 clipPos = projMatrix * viewPosition;");
|
|
13819
|
-
src.push(" gl_Position = clipPos;");
|
|
13820
13820
|
src.push(" gl_PointSize = " + POINT_SIZE + ".0;");
|
|
13821
13821
|
if (scene.logarithmicDepthBufferEnabled) {
|
|
13822
13822
|
if (WEBGL_INFO$1.SUPPORTED_EXTENSIONS["EXT_frag_depth"]) {
|
|
@@ -13825,7 +13825,10 @@ class OcclusionTester {
|
|
|
13825
13825
|
src.push("clipPos.z = log2( max( 1e-6, clipPos.w + 1.0 ) ) * logDepthBufFC - 1.0;");
|
|
13826
13826
|
src.push("clipPos.z *= clipPos.w;");
|
|
13827
13827
|
}
|
|
13828
|
+
} else {
|
|
13829
|
+
src.push("clipPos.z += " + MARKER_SPRITE_CLIPZ_OFFSET + ";");
|
|
13828
13830
|
}
|
|
13831
|
+
src.push(" gl_Position = clipPos;");
|
|
13829
13832
|
src.push("}");
|
|
13830
13833
|
return src;
|
|
13831
13834
|
}
|
|
@@ -15440,6 +15443,14 @@ const Renderer = function (scene, options) {
|
|
|
15440
15443
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
15441
15444
|
};
|
|
15442
15445
|
|
|
15446
|
+
/**
|
|
15447
|
+
* Returns true if the next call to render() will draw something
|
|
15448
|
+
* @returns {boolean}
|
|
15449
|
+
*/
|
|
15450
|
+
this.needsRender = function () {
|
|
15451
|
+
return (imageDirty || drawableListDirty || stateSortDirty);
|
|
15452
|
+
};
|
|
15453
|
+
|
|
15443
15454
|
/**
|
|
15444
15455
|
* Renders inserted drawables.
|
|
15445
15456
|
* @private
|
|
@@ -26423,6 +26434,10 @@ class Scene extends Component {
|
|
|
26423
26434
|
this._needRecompile = false;
|
|
26424
26435
|
}
|
|
26425
26436
|
|
|
26437
|
+
if (!forceRender && !this._renderer.needsRender()) {
|
|
26438
|
+
return;
|
|
26439
|
+
}
|
|
26440
|
+
|
|
26426
26441
|
renderEvent.sceneId = this.id;
|
|
26427
26442
|
|
|
26428
26443
|
const passes = this._passes;
|