@xeokit/xeokit-sdk 2.2.1-beta.3 → 2.2.3
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 +14 -2
- package/dist/xeokit-sdk.es.js +14 -2
- 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,7 +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.
|
|
13614
|
+
const MARKER_SPRITE_CLIPZ_OFFSET = -0.001; // Amount that we offset sprite clip Z coords to raise them from surfaces
|
|
13615
13615
|
|
|
13616
13616
|
const tempVec3a$$ = math.vec3();
|
|
13617
13617
|
|
|
@@ -13830,7 +13830,7 @@ class OcclusionTester {
|
|
|
13830
13830
|
src.push("clipPos.z *= clipPos.w;");
|
|
13831
13831
|
}
|
|
13832
13832
|
} else {
|
|
13833
|
-
src.push("clipPos.z
|
|
13833
|
+
src.push("clipPos.z += " + MARKER_SPRITE_CLIPZ_OFFSET + ";");
|
|
13834
13834
|
}
|
|
13835
13835
|
src.push(" gl_Position = clipPos;");
|
|
13836
13836
|
src.push("}");
|
|
@@ -15447,6 +15447,14 @@ const Renderer = function (scene, options) {
|
|
|
15447
15447
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
15448
15448
|
};
|
|
15449
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
|
+
|
|
15450
15458
|
/**
|
|
15451
15459
|
* Renders inserted drawables.
|
|
15452
15460
|
* @private
|
|
@@ -26430,6 +26438,10 @@ class Scene extends Component {
|
|
|
26430
26438
|
this._needRecompile = false;
|
|
26431
26439
|
}
|
|
26432
26440
|
|
|
26441
|
+
if (!forceRender && !this._renderer.needsRender()) {
|
|
26442
|
+
return;
|
|
26443
|
+
}
|
|
26444
|
+
|
|
26433
26445
|
renderEvent.sceneId = this.id;
|
|
26434
26446
|
|
|
26435
26447
|
const passes = this._passes;
|
package/dist/xeokit-sdk.es.js
CHANGED
|
@@ -13607,7 +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.
|
|
13610
|
+
const MARKER_SPRITE_CLIPZ_OFFSET = -0.001; // Amount that we offset sprite clip Z coords to raise them from surfaces
|
|
13611
13611
|
|
|
13612
13612
|
const tempVec3a$$ = math.vec3();
|
|
13613
13613
|
|
|
@@ -13826,7 +13826,7 @@ class OcclusionTester {
|
|
|
13826
13826
|
src.push("clipPos.z *= clipPos.w;");
|
|
13827
13827
|
}
|
|
13828
13828
|
} else {
|
|
13829
|
-
src.push("clipPos.z
|
|
13829
|
+
src.push("clipPos.z += " + MARKER_SPRITE_CLIPZ_OFFSET + ";");
|
|
13830
13830
|
}
|
|
13831
13831
|
src.push(" gl_Position = clipPos;");
|
|
13832
13832
|
src.push("}");
|
|
@@ -15443,6 +15443,14 @@ const Renderer = function (scene, options) {
|
|
|
15443
15443
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
15444
15444
|
};
|
|
15445
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
|
+
|
|
15446
15454
|
/**
|
|
15447
15455
|
* Renders inserted drawables.
|
|
15448
15456
|
* @private
|
|
@@ -26426,6 +26434,10 @@ class Scene extends Component {
|
|
|
26426
26434
|
this._needRecompile = false;
|
|
26427
26435
|
}
|
|
26428
26436
|
|
|
26437
|
+
if (!forceRender && !this._renderer.needsRender()) {
|
|
26438
|
+
return;
|
|
26439
|
+
}
|
|
26440
|
+
|
|
26429
26441
|
renderEvent.sceneId = this.id;
|
|
26430
26442
|
|
|
26431
26443
|
const passes = this._passes;
|