@xeokit/xeokit-sdk 2.4.0-alpha-81 → 2.4.0-alpha-83

package/src/viewer/scene/sectionPlane/SectionPlane.js

@@ -0,0 +1,194 @@
+import {Component} from '../Component.js';
+import {RenderState} from '../webgl/RenderState.js';
+import {math} from "../math/math.js";
+
+/**
+ *  @desc An arbitrarily-aligned World-space clipping plane.
+ *
+ * * Slices portions off objects to create cross-section views or reveal interiors.
+ * * Registered by {@link SectionPlane#id} in {@link Scene#sectionPlanes}.
+ * * Indicates World-space position in {@link SectionPlane#pos} and orientation in {@link SectionPlane#dir}.
+ * * Discards elements from the half-space in the direction of {@link SectionPlane#dir}.
+ * * Can be be enabled or disabled via {@link SectionPlane#active}.
+ *
+ * ## Usage
+ *
+ * In the example below, we'll create two SectionPlanes to slice a model loaded from glTF. Note that we could also create them
+ * using a {@link SectionPlanesPlugin}.
+ *
+ * ````javascript
+ * import {Viewer, GLTFLoaderPlugin, SectionPlane} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *      canvasId: "myCanvas"
+ * });
+ *
+ * const gltfLoaderPlugin = new GLTFModelsPlugin(viewer, {
+ *      id: "GLTFModels"
+ * });
+ *
+ * const model = gltfLoaderPlugin.load({
+ *      id: "myModel",
+ *      src: "./models/gltf/mygltfmodel.gltf"
+ * });
+ *
+ * // Create a SectionPlane on negative diagonal
+ * const sectionPlane1 = new SectionPlane(viewer.scene, {
+ *     pos: [1.0, 1.0, 1.0],
+ *     dir: [-1.0, -1.0, -1.0],
+ *     active: true
+ * }),
+ *
+ * // Create a SectionPlane on positive diagonal
+ * const sectionPlane2 = new SectionPlane(viewer.scene, {
+ *     pos: [-1.0, -1.0, -1.0],
+ *     dir: [1.0, 1.0, 1.0],
+ *     active: true
+ * });
+ * ````
+ */
+class SectionPlane extends Component {
+
+    /**
+     @private
+     */
+    get type() {
+        return "SectionPlane";
+    }
+
+    /**
+     * @constructor
+     * @param {Component} [owner]  Owner component. When destroyed, the owner will destroy this SectionPlane as well.
+     * @param {*} [cfg]  SectionPlane configuration
+     * @param  {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+     * @param {Boolean} [cfg.active=true] Indicates whether or not this SectionPlane is active.
+     * @param {Number[]} [cfg.pos=[0,0,0]] World-space position of the SectionPlane.
+     * @param {Number[]} [cfg.dir=[0,0,-1]] Vector perpendicular to the plane surface, indicating the SectionPlane plane orientation.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this._state = new RenderState({
+            active: true,
+            pos: math.vec3(),
+            dir: math.vec3(),
+            dist: 0
+        });
+
+        this.active = cfg.active;
+        this.pos = cfg.pos;
+        this.dir = cfg.dir;
+
+        this.scene._sectionPlaneCreated(this);
+    }
+
+    /**
+     * Sets if this SectionPlane is active or not.
+     *
+     * Default value is ````true````.
+     *
+     * @param {Boolean} value Set ````true```` to activate else ````false```` to deactivate.
+     */
+    set active(value) {
+        this._state.active = value !== false;
+        this.glRedraw();
+        this.fire("active", this._state.active);
+    }
+
+    /**
+     * Gets if this SectionPlane is active or not.
+     *
+     * Default value is ````true````.
+     *
+     * @returns {Boolean} Returns ````true```` if active.
+     */
+    get active() {
+        return this._state.active;
+    }
+
+    /**
+     * Sets the World-space position of this SectionPlane's plane.
+     *
+     * Default value is ````[0, 0, 0]````.
+     *
+     * @param {Number[]} value New position.
+     */
+    set pos(value) {
+        this._state.pos.set(value || [0, 0, 0]);
+        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
+        this.fire("pos", this._state.pos);
+    }
+
+    /**
+     * Gets the World-space position of this SectionPlane's plane.
+     *
+     * Default value is ````[0, 0, 0]````.
+     *
+     * @returns {Number[]} Current position.
+     */
+    get pos() {
+        return this._state.pos;
+    }
+
+    /**
+     * Sets the direction of this SectionPlane's plane.
+     *
+     * Default value is ````[0, 0, -1]````.
+     *
+     * @param {Number[]} value New direction.
+     */
+    set dir(value) {
+        this._state.dir.set(value || [0, 0, -1]);
+        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
+        this.glRedraw();
+        this.fire("dir", this._state.dir);
+    }
+
+    /**
+     * Gets the direction of this SectionPlane's plane.
+     *
+     * Default value is ````[0, 0, -1]````.
+     *
+     * @returns {Number[]} value Current direction.
+     */
+    get dir() {
+        return this._state.dir;
+    }
+
+    /**
+     * Gets this SectionPlane's distance to the origin of the World-space coordinate system.
+     *
+     * This is the dot product of {@link SectionPlane#pos} and {@link SectionPlane#dir} and is automatically re-calculated
+     * each time either of two properties are updated.
+     *
+     * @returns {Number}
+     */
+    get dist() {
+        return this._state.dist;
+    }
+
+    /**
+     * Inverts the direction of {@link SectionPlane#dir}.
+     */
+    flipDir() {
+        const dir = this._state.dir;
+        dir[0] *= -1.0;
+        dir[1] *= -1.0;
+        dir[2] *= -1.0;
+        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
+        this.fire("dir", this._state.dir);
+        this.glRedraw();
+    }
+
+    /**
+     * @destroy
+     */
+    destroy() {
+        this._state.destroy();
+        this.scene._sectionPlaneDestroyed(this);
+        super.destroy();
+    }
+}
+
+export {SectionPlane};

package/src/viewer/scene/sectionPlane/index.js

@@ -0,0 +1 @@
+export * from "./SectionPlane.js";

package/src/viewer/scene/skybox/Skybox.js

@@ -0,0 +1,123 @@
+import {Component} from "../Component.js";
+import {Mesh} from "../mesh/Mesh.js";
+import {ReadableGeometry} from "../geometry/ReadableGeometry.js";
+import {PhongMaterial} from "../materials/PhongMaterial.js";
+import {Texture} from "../materials/Texture.js";
+
+/**
+ * @desc A Skybox.
+ */
+class Skybox extends Component {
+
+    /**
+     * @constructor
+     * @param {Component} owner Owner component. When destroyed, the owner will destroy this PointLight as well.
+     * @param {*} [cfg]  Skybox configuration
+     * @param {String} [cfg.id] Optional ID, unique among all components in the parent {Scene}, generated automatically when omitted.
+     * @param {String} [cfg.src=null] Path to skybox texture
+     * @param {String} [cfg.encoding="linear"] Texture encoding format.  See the {@link Texture#encoding} property for more info.
+     * @param {Number} [cfg.size=1000] Size of this Skybox, given as the distance from the center at ````[0,0,0]```` to each face.
+     * @param {Boolean} [cfg.active=true] True when this Skybox is visible.
+     */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this._skyboxMesh = new Mesh(this, {
+
+            geometry: new ReadableGeometry(this, { // Box-shaped geometry
+                primitive: "triangles",
+                positions: [
+                    1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
+                    1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v5 right
+                    1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v5-v6-v1 top
+                    -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
+                    -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, // v7-v4-v3-v2 bottom
+                    1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v5 back
+                ],
+                uv: [
+                    0.5, 0.6666, 0.25, 0.6666, 0.25, 0.3333, 0.5, 0.3333, 0.5, 0.6666, 0.5, 0.3333, 0.75, 0.3333, 0.75, 0.6666,
+                    0.5, 0.6666, 0.5, 1, 0.25, 1, 0.25, 0.6666, 0.25, 0.6666, 0.0, 0.6666, 0.0, 0.3333, 0.25, 0.3333,
+                    0.25, 0, 0.50, 0, 0.50, 0.3333, 0.25, 0.3333, 0.75, 0.3333, 1.0, 0.3333, 1.0, 0.6666, 0.75, 0.6666
+                ],
+                indices: [
+                    0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11,
+                    12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
+                ]
+            }),
+            background: true,
+            scale: [2000, 2000, 2000], // Overridden when we initialize the 'size' property, below
+            rotation: [0, -90, 0],
+            material: new PhongMaterial(this, {
+                ambient: [0, 0, 0],
+                diffuse: [0, 0, 0],
+                specular: [0, 0, 0],
+                emissive: [1, 1, 1],
+                emissiveMap: new Texture(this, {
+                    src: cfg.src,
+                    flipY: true,
+                    wrapS: "clampToEdge",
+                    wrapT: "clampToEdge",
+                    encoding: cfg.encoding || "sRGB"
+                }),
+                backfaces: true // Show interior faces of our skybox geometry
+            }),
+            // stationary: true,
+            visible: false,
+            pickable: false,
+            clippable: false,
+            collidable: false
+        });
+
+        this.size = cfg.size; // Sets 'xyz' property on the Mesh's Scale transform
+        this.active = cfg.active;
+    }
+
+
+    /**
+     * Sets the size of this Skybox, given as the distance from the center at [0,0,0] to each face.
+     *
+     * Default value is ````1000````.
+     *
+     * @param {Number} value The size.
+     */
+    set size(value) {
+        this._size = value || 1000;
+        this._skyboxMesh.scale = [this._size, this._size, this._size];
+    }
+
+    /**
+     * Gets the size of this Skybox, given as the distance from the center at [0,0,0] to each face.
+     *
+     * Default value is ````1000````.
+     *
+     * @returns {Number} The size.
+     */
+    get size() {
+        return this._size;
+    }
+
+    /**
+     * Sets whether this Skybox is visible or not.
+     *
+     * Default value is ````true````.
+     *
+     * @param {Boolean} active Whether to make active or not.
+     */
+    set active(active) {
+        this._skyboxMesh.visible = active;
+    }
+
+    /**
+     * Gets if this Skybox is visible or not.
+     *
+     * Default active is ````true````.
+     *
+     * @returns {Boolean} ````true```` if the Skybox is active.
+     */
+    get active() {
+        return this._skyboxMesh.visible;
+    }
+}
+
+export {Skybox}

package/src/viewer/scene/skybox/index.js

@@ -0,0 +1 @@
+export * from "./Skybox.js";

package/src/viewer/scene/stats.js

@@ -0,0 +1,44 @@
+/**
+ * xeokit runtime statistics.
+ * @type {{components: {models: number, objects: number, scenes: number, meshes: number}, memory: {indices: number, uvs: number, textures: number, materials: number, transforms: number, positions: number, programs: number, normals: number, meshes: number, colors: number}, build: {version: string}, client: {browser: string}, frame: {frameCount: number, useProgram: number, bindTexture: number, drawElements: number, bindArray: number, tasksRun: number, fps: number, drawArrays: number, tasksScheduled: number}}}
+ */
+const stats = {
+    build: {
+        version: "0.8"
+    },
+    client: {
+        browser: (navigator && navigator.userAgent) ? navigator.userAgent : "n/a"
+    },
+
+    components: {
+        scenes: 0,
+        models: 0,
+        meshes: 0,
+        objects: 0
+    },
+    memory: {
+        meshes: 0,
+        positions: 0,
+        colors: 0,
+        normals: 0,
+        uvs: 0,
+        indices: 0,
+        textures: 0,
+        transforms: 0,
+        materials: 0,
+        programs: 0
+    },
+    frame: {
+        frameCount: 0,
+        fps: 0,
+        useProgram: 0,
+        bindTexture: 0,
+        bindArray: 0,
+        drawElements: 0,
+        drawArrays: 0,
+        tasksRun: 0,
+        tasksScheduled: 0
+    }
+};
+
+export {stats};

package/src/viewer/scene/utils/Cache.js

@@ -0,0 +1,29 @@
+const Cache = {
+
+    enabled: false,
+    files: {},
+
+    add: function (key, file) {
+        if (this.enabled === false) {
+            return;
+        }
+        this.files[key] = file;
+    },
+
+    get: function (key) {
+        if (this.enabled === false) {
+            return;
+        }
+        return this.files[key];
+    },
+
+    remove: function (key) {
+        delete this.files[key];
+    },
+
+    clear: function () {
+        this.files = {};
+    }
+};
+
+export {Cache};

package/src/viewer/scene/utils/FileLoader.js

@@ -0,0 +1,160 @@
+import {Cache} from './Cache.js';
+import {Loader} from './Loader.js';
+
+const loading = {};
+
+class FileLoader extends Loader {
+
+    constructor(manager) {
+        super(manager);
+    }
+
+    load(url, onLoad, onProgress, onError) {
+        if (url === undefined) {
+            url = '';
+        }
+        if (this.path !== undefined) {
+            url = this.path + url;
+        }
+        url = this.manager.resolveURL(url);
+        const cached = Cache.get(url);
+        if (cached !== undefined) {
+            this.manager.itemStart(url);
+            setTimeout(() => {
+                if (onLoad) {
+                    onLoad(cached);
+                }
+                this.manager.itemEnd(url);
+            }, 0);
+            return cached;
+        }
+        if (loading[url] !== undefined) {
+            loading[url].push({onLoad, onProgress, onError});
+            return;
+        }
+        loading[url] = [];
+        loading[url].push({onLoad, onProgress, onError});
+        const req = new Request(url, {
+            headers: new Headers(this.requestHeader),
+            credentials: this.withCredentials ? 'include' : 'same-origin'
+        });
+        const mimeType = this.mimeType;
+        const responseType = this.responseType;
+        fetch(req).then(response => {
+            if (response.status === 200 || response.status === 0) {
+                // Some browsers return HTTP Status 0 when using non-http protocol
+                // e.g. 'file://' or 'data://'. Handle as success.
+                if (response.status === 0) {
+                    console.warn('FileLoader: HTTP Status 0 received.');
+                }
+                if (typeof ReadableStream === 'undefined' || response.body.getReader === undefined) {
+                    return response;
+                }
+                const callbacks = loading[url];
+                const reader = response.body.getReader();
+                const contentLength = response.headers.get('Content-Length');
+                const total = contentLength ? parseInt(contentLength) : 0;
+                const lengthComputable = total !== 0;
+                let loaded = 0;
+                const stream = new ReadableStream({
+                    start(controller) {
+                        readData();
+
+                        function readData() {
+                            reader.read().then(({done, value}) => {
+                                if (done) {
+                                    controller.close();
+                                } else {
+                                    loaded += value.byteLength;
+                                    const event = new ProgressEvent('progress', {lengthComputable, loaded, total});
+                                    for (let i = 0, il = callbacks.length; i < il; i++) {
+                                        const callback = callbacks[i];
+                                        if (callback.onProgress) {
+                                            callback.onProgress(event);
+                                        }
+                                    }
+                                    controller.enqueue(value);
+                                    readData();
+                                }
+                            });
+                        }
+                    }
+                });
+                return new Response(stream);
+            } else {
+                throw Error(`fetch for "${response.url}" responded with ${response.status}: ${response.statusText}`);
+            }
+        }).then(response => {
+            switch (responseType) {
+                case 'arraybuffer':
+                    return response.arrayBuffer();
+                case 'blob':
+                    return response.blob();
+                case 'document':
+                    return response.text()
+                        .then(text => {
+                            const parser = new DOMParser();
+                            return parser.parseFromString(text, mimeType);
+                        });
+                case 'json':
+                    return response.json();
+                default:
+                    if (mimeType === undefined) {
+                        return response.text();
+                    } else {
+                        // sniff encoding
+                        const re = /charset="?([^;"\s]*)"?/i;
+                        const exec = re.exec(mimeType);
+                        const label = exec && exec[1] ? exec[1].toLowerCase() : undefined;
+                        const decoder = new TextDecoder(label);
+                        return response.arrayBuffer().then(ab => decoder.decode(ab));
+                    }
+            }
+        }).then(data => {
+            // Add to cache only on HTTP success, so that we do not cache
+            // error response bodies as proper responses to requests.
+            Cache.add(url, data);
+            const callbacks = loading[url];
+            delete loading[url];
+            for (let i = 0, il = callbacks.length; i < il; i++) {
+                const callback = callbacks[i];
+                if (callback.onLoad) {
+                    callback.onLoad(data);
+                }
+            }
+        }).catch(err => {
+            // Abort errors and other errors are handled the same
+            const callbacks = loading[url];
+            if (callbacks === undefined) {
+                // When onLoad was called and url was deleted in `loading`
+                this.manager.itemError(url);
+                throw err;
+
+            }
+            delete loading[url];
+            for (let i = 0, il = callbacks.length; i < il; i++) {
+                const callback = callbacks[i];
+                if (callback.onError) {
+                    callback.onError(err);
+                }
+            }
+            this.manager.itemError(url);
+        }).finally(() => {
+            this.manager.itemEnd(url);
+        });
+        this.manager.itemStart(url);
+    }
+
+    setResponseType(value) {
+        this.responseType = value;
+        return this;
+    }
+
+    setMimeType(value) {
+        this.mimeType = value;
+        return this;
+    }
+}
+
+
+export {FileLoader};

package/src/viewer/scene/utils/Loader.js

@@ -0,0 +1,55 @@
+import {DefaultLoadingManager} from './LoadingManager.js';
+
+class Loader {
+
+    constructor(manager) {
+
+        this.manager = (manager !== undefined) ? manager : DefaultLoadingManager;
+
+        this.crossOrigin = 'anonymous';
+        this.withCredentials = false;
+        this.path = '';
+        this.resourcePath = '';
+        this.requestHeader = {};
+    }
+
+    load( /* url, onLoad, onProgress, onError */) {
+    }
+
+    loadAsync(url, onProgress) {
+        const scope = this;
+        return new Promise(function (resolve, reject) {
+            scope.load(url, resolve, onProgress, reject);
+        });
+    }
+
+    parse( /* data */) {
+    }
+
+    setCrossOrigin(crossOrigin) {
+        this.crossOrigin = crossOrigin;
+        return this;
+    }
+
+    setWithCredentials(value) {
+        this.withCredentials = value;
+        return this;
+    }
+
+    setPath(path) {
+        this.path = path;
+        return this;
+    }
+
+    setResourcePath(resourcePath) {
+        this.resourcePath = resourcePath;
+        return this;
+    }
+
+    setRequestHeader(requestHeader) {
+        this.requestHeader = requestHeader;
+        return this;
+    }
+}
+
+export {Loader};

package/src/viewer/scene/utils/LoadingManager.js

@@ -0,0 +1,86 @@
+class LoadingManager {
+
+    constructor(onLoad, onProgress, onError) {
+
+        this.isLoading = false;
+        this.itemsLoaded = 0;
+        this.itemsTotal = 0;
+        this.urlModifier = undefined;
+        this.handlers = [];
+
+        this.onStart = undefined;
+        this.onLoad = onLoad;
+        this.onProgress = onProgress;
+        this.onError = onError;
+    }
+
+    itemStart(url) {
+        this.itemsTotal++;
+        if (this.isLoading === false) {
+            if (this.onStart !== undefined) {
+                this.onStart(url, this.itemsLoaded, this.itemsTotal);
+            }
+        }
+        this.isLoading = true;
+    }
+
+    itemEnd(url) {
+        this.itemsLoaded++;
+        if (this.onProgress !== undefined) {
+            this.onProgress(url, this.itemsLoaded, this.itemsTotal);
+        }
+        if (this.itemsLoaded === this.itemsTotal) {
+            this.isLoading = false;
+            if (this.onLoad !== undefined) {
+                this.onLoad();
+            }
+        }
+    }
+
+    itemError(url) {
+        if (this.onError !== undefined) {
+            this.onError(url);
+        }
+    }
+
+    resolveURL(url) {
+        if (this.urlModifier) {
+            return this.urlModifier(url);
+        }
+        return url;
+    }
+
+    setURLModifier(transform) {
+        this.urlModifier = transform;
+        return this;
+    }
+
+    addHandler(regex, loader) {
+        this.handlers.push(regex, loader);
+        return this;
+    }
+
+    removeHandler(regex) {
+        const index = this.handlers.indexOf(regex);
+        if (index !== -1) {
+            this.handlers.splice(index, 2);
+        }
+        return this;
+    }
+
+    getHandler(file) {
+        for (let i = 0, l = this.handlers.length; i < l; i += 2) {
+            const regex = this.handlers[i];
+            const loader = this.handlers[i + 1];
+            if (regex.global) regex.lastIndex = 0; // see #17920
+            if (regex.test(file)) {
+                return loader;
+            }
+        }
+        return null;
+    }
+}
+
+const DefaultLoadingManager = new LoadingManager();
+
+export {DefaultLoadingManager, LoadingManager};