diff --git a/emphasising/colorize.html b/emphasising/colorize.html
new file mode 100644
index 0000000..18b417f
--- /dev/null
+++ b/emphasising/colorize.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Colirizing Objects</h1>
+    <h2>Click objects to colorize them</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas"
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model and fit it to view
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Click Entities to colorize them
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        var pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.colorize = [0.0, 1.0, 0.0];
+        }
+    });
+
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/highlight.html b/emphasising/highlight.html
new file mode 100644
index 0000000..5a9a92f
--- /dev/null
+++ b/emphasising/highlight.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Set Objects Highlighted</h1>
+    <h2>Click objects to highlight them</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.scene.highlightMaterial.alpha = 0.5;
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Click Entities to highlight them
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.highlighted = true;
+        }
+    });
+
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/highlight_glowThroughFalse.html b/emphasising/highlight_glowThroughFalse.html
new file mode 100644
index 0000000..8de3e0c
--- /dev/null
+++ b/emphasising/highlight_glowThroughFalse.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Picking Objects</h1>
+    <h2>Hover over objects to highlight them</h2>
+    <p>In this example, we've set glowThrough:false on the Scene's HighlightMaterial. This disables the usual "glow-through" behaviour for highlighted objects.</p>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Disable glow-through effect on the highlight material.
+    // It also seems best to make objects opaque when highlighted.
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.highlightMaterial.glowThrough = false;
+    viewer.scene.highlightMaterial.fillAlpha = 1.0;
+    viewer.scene.highlightMaterial.edgeAlpha = 1.0;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Click Entities to highlight them
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.highlighted = true;
+        }
+    });
+
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/highlight_transparentCanvas.html b/emphasising/highlight_transparentCanvas.html
new file mode 100644
index 0000000..da1a269
--- /dev/null
+++ b/emphasising/highlight_transparentCanvas.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Picking Objects</h1>
+    <h2>Hover objects to highlight them</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Mouse over Entities to highlight them
+    //------------------------------------------------------------------------------------------------------------------
+
+    var lastEntity = null;
+
+    viewer.scene.input.on("mousemove", function (coords) {
+
+        var hit = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (hit) {
+
+            if (!lastEntity || hit.entity.id !== lastEntity.id) {
+
+                if (lastEntity) {
+                    lastEntity.highlighted = false;
+                }
+
+                lastEntity = hit.entity;
+                hit.entity.highlighted = true;
+            }
+        } else {
+
+            if (lastEntity) {
+                lastEntity.highlighted = false;
+                lastEntity = null;
+            }
+        }
+    });
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/index.html b/emphasising/index.html
new file mode 100644
index 0000000..e235d94
--- /dev/null
+++ b/emphasising/index.html
@@ -0,0 +1,463 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Examples</title>
+    <link href='https://fonts.googleapis.com/css?family=Exo+2:400,800,900,700,600,500|Roboto:100,300,400,500,700,900'
+          rel='stylesheet' type='text/css'>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+    
+
+    <style>
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            font-size: 1rem;
+            line-height: 1.50;
+            color: #212529;
+            background-color: #000000;
+            text-decoration: none;
+            word-spacing: normal;
+            text-align: left;
+            letter-spacing: 0;
+            -webkit-font-smoothing: antialiased;
+            overflow-y: hidden;
+            overflow-x: hidden;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #index {
+            position: absolute;
+            height: 100%;
+            background: #fdfdfd;
+            overflow: auto;
+            border-right: 2px solid #212529;
+            padding: 20px;
+            padding-bottom: 100px;
+            user-select: none;
+        }
+
+        #index a {
+            /*text-decoration: none;*/
+        }
+
+        #index h1 {
+            margin-top: 0;
+            margin-bottom: 0;
+            font-size: 1.8rem;
+            font-weight: normal;
+            text-decoration: none !important;
+        }
+
+        #index h1 a {
+            color: #212529;
+        }
+
+        #index h2 {
+            font-size: 1.4rem;
+            font-weight: normal;
+            padding-top: 20px;
+            padding-bottom: 10px;
+            text-decoration: none;
+        }
+
+        #index .link {
+            margin-left: 0 !important;
+            padding-left: 0 !important;
+            padding-top: 1px;
+            text-decoration: none;
+            font-weight: normal;
+            background: #fdfdfd;
+            cursor: pointer;
+            line-height: 1.5em;
+        }
+
+        #index .selected {
+            margin-left: -5px !important;
+            padding-left: 5px !important;
+            padding-top: 0;
+            padding-bottom: 0;
+            border: 1px solid #676767;
+            background: #FFFF44;
+        }
+
+
+        #index .commentFirst {
+            margin-left: 0 !important;
+            padding-left: 0 !important;
+            padding-top: 1px;
+            text-decoration: none;
+            font-weight: normal;
+            font-style: italic;
+            color: #8b8b8b;
+            cursor: pointer;
+            line-height: 1.5em;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+
+        #index .comment {
+            color: #8b8b8b;
+            margin-left: 0 !important;
+            padding-left: 0 !important;
+            padding-top: 1px;
+            text-decoration: none;
+            font-weight: normal;
+            font-style: italic;
+            cursor: pointer;
+            line-height: 1.5em;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+
+        #index .link:hover {
+            text-decoration: underline;
+        }
+
+        .content-container {
+            position: absolute;
+            z-index: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
+            overflow: hidden;
+            opacity: 1.0;
+            pointer-events: all;
+            transition: all 300ms ease-in-out;
+            background: lightblue;
+        }
+
+        .content-overlay {
+            position: absolute;
+            z-index: 7;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
+            overflow: hidden;
+            opacity: 1.0;
+            pointer-events: none;
+            transition: all 300ms ease-in-out;
+        }
+
+        .slideout-sidebar {
+            position: fixed;
+            top: 0;
+            left: -600px;
+            z-index: 10;
+            width: 560px;
+            height: 100%;
+            padding: 0;
+            transition: all 300ms ease-in-out;
+        }
+
+        #index_toggle {
+            display: none;
+        }
+
+        #index_toggle:hover {
+            cursor: pointer;
+        }
+
+        .index-button {
+            position: absolute;
+            font-size: 18px;
+            top: 15px;
+            left: 20px;
+            text-align: center;
+            vertical-align: middle;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            z-index: 5;
+            transition: all 300ms ease-in-out;
+        }
+
+        .index-button:hover {
+            cursor: pointer;
+            color: black;
+        }
+
+        .page-title {
+            position: absolute;
+            font-size: 1.6rem;
+            top: 17px;
+            left: 75px;
+            text-align: left;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            z-index: 5;
+            transition: all 300ms ease-in-out;
+            max-width: calc(100% - 550px);
+            pointer-events: none;
+        }
+
+        .viewSourceButton {
+            position: absolute;
+            left: 20px;
+            bottom: 15px;
+            z-index: 200;
+            transition: all 300ms ease-in-out;
+        }
+
+        .viewSourceButton:hover {
+            cursor: pointer;
+            opacity: 1;
+            color: black;
+        }
+
+        #index_toggle:checked ~ .slideout-sidebar {
+            left: 0;
+        }
+
+        #index_toggle:checked + .index-button {
+            left: 585px;
+            color: white;
+        }
+
+        #index_toggle:checked ~ .page-title {
+            left: 530px;
+            color: white;
+        }
+
+        #index_toggle:checked ~ .viewSourceButton {
+            left: 570px;
+        }
+
+        #index_toggle:checked ~ .content-container {
+            opacity: 0.4;
+            pointer-events: none;
+        }
+
+        #index_toggle:checked ~ .content-overlay {
+            pointer-events: all;
+        }
+
+    </style>
+</head>
+<body>
+<input type="checkbox" id="index_toggle"/>
+<label for="index_toggle" class="index-button"><i class="fas fa-2x fa-bars"></i></label>
+<div class="page-title" id="page-title"></div>
+<div class="viewSourceButton" id="viewSourceButton"><i class="fas fa-2x fa-code"></i></div>
+<div class="content-overlay" id="viewer-overlay"></div>
+<iframe class="content-container" id="viewer" src="../default.html"></iframe>
+<div class="slideout-sidebar">
+    <div id="index"><h1><a href="https://xeokit.io">xeokit</a> / <a href="../">Examples</a> / Emphasising</h1></div>
+</div>
+</body>
+<script>
+
+    const files = {
+
+        "Emphasis Effects": [
+            ["colorize", "Click objects to colorize them"],
+            ["opacity", "Click objects to make them transparent"],
+            ["highlight", "Click objects to highlight them"],
+            ["highlight_glowThroughFalse", "Click objects to highlight them (with glowThroughFalse)"],
+            ["highlight_transparentCanvas", "Click objects to highlight them (with transparent canvas)"],
+            ["select", "Click objects to make them appear selected"],
+            ["select_glowThroughFalse", "Click objects to select them (with glowThroughFalse)"],
+            ["select_glowThroughFalse_dtx", "Click objects to select them (with glowThroughFalse, dtx)"],
+            ["select_transparentCanvas", "Click objects to select them (with transparent canvas)"],
+            ["xray", "Click objects to X-ray them"],
+            ["xray_transparentCanvas", "Click objects to X-ray them (with transparent canvas)"]
+        ],
+    };
+
+    const list = document.getElementById('index');
+    const viewer = document.getElementById('viewer');
+    const viewerOverlay = document.getElementById('viewer-overlay');
+
+    const container = document.createElement('div');
+    list.appendChild(container);
+
+    const viewSourceButton = document.getElementById('viewSourceButton');
+    viewSourceButton.addEventListener('click', function (event) {
+        window.open('https://github.com/xeokit/xeokit-sdk/blob/master/examples/emphasising/' + selected + '.html');
+    }, false);
+
+    const indexToggle = document.getElementById("index_toggle");
+    const pageTitle = document.getElementById('page-title');
+
+    viewerOverlay.addEventListener('click', function (event) {
+        indexToggle.checked = false;
+    }, false);
+
+    // indexToggle.addEventListener('click', function (event) {
+    //     viewer.src="default.html";
+    // }, false);
+
+    const sectionDivs = {};
+    const divs = {};
+    const fileDescriptions = {};
+    let selected = null;
+    let index = 1;
+    var indexStr;
+
+    // Index
+
+    let div = document.createElement('h2');
+    div.textContent = "Index";
+
+    container.appendChild(div);
+    container.appendChild(document.createElement('hr'));
+
+    const sectionNames = Object.keys(files);
+    // sectionNames.sort((a, b) => {
+    //     if (a < b) {
+    //         return -1;
+    //     }
+    //     if (a > b) {
+    //         return 1;
+    //     }
+    //     return 0;
+    // });
+
+    for (let i = 0, len = sectionNames.length; i < len; i++) {
+        const sectionName = sectionNames[i];
+        const sectionFiles = files[sectionName];
+        var sectionDiv = document.createElement('div');
+        sectionDiv.className = 'link';
+        indexStr = "" + index++ + ".";
+        for (let i = indexStr.length, len = 5; i < len; i++) {
+            indexStr += ".";
+        }
+        sectionDiv.textContent = indexStr + sectionName;
+        sectionDiv.addEventListener('click', (function () {
+            const _sectionName = sectionName;
+            return function () {
+                sectionDivs[_sectionName].scrollIntoView();
+            }
+        })());
+        container.appendChild(sectionDiv);
+    }
+
+    container.appendChild(document.createElement('hr'));
+
+    _index = 1;
+
+    let clickedFile = null;
+
+    for (let i = 0, len = sectionNames.length; i < len; i++) {
+        const sectionName = sectionNames[i];
+        const sectionFiles = files[sectionName];
+        const sectionDiv = document.createElement('h2');
+        sectionDiv.textContent = _index++ + ". " + sectionName;
+        container.appendChild(sectionDiv);
+        sectionDivs[sectionName] = sectionDiv;
+        container.appendChild(document.createElement('hr'));
+
+        for (let i = 0; i < sectionFiles.length; i++) {
+
+            let sectionFile = sectionFiles[i];
+            let fileName;
+            let fileDesc;
+
+            if (!isString(sectionFile)) {
+                fileName = sectionFile[0];
+                fileDesc = sectionFile[1];
+            } else {
+                fileName = sectionFile;
+                fileDesc = sectionFile;
+            }
+
+            if (fileDesc.charAt(0) === "#") {
+                const commentDiv = document.createElement('div');
+                commentDiv.textContent = "// " + fileDesc.substring(1);
+                commentDiv.className = (i === 0 ? 'commentFirst' : 'comment');
+                container.appendChild(commentDiv);
+                continue;
+            }
+
+            const fileNameComponents = fileName.split('_');
+            //    fileNameComponents.shift();
+            const fileNamePath = fileNameComponents.join(' / ');
+            const fileNameDiv = document.createElement('div');
+            fileNameDiv.className = 'link';
+            fileNameDiv.textContent = fileNamePath; // expandCamel(name);
+            fileNameDiv.addEventListener('click', (function () {
+                const _file = fileName;
+                return function () {
+                    clickedFile = _file;
+                    window.location.hash = "#" + _file;
+                    viewer.src = "";
+                }
+            })());
+            container.appendChild(fileNameDiv);
+            divs[fileName] = fileNameDiv;
+            fileDescriptions[fileName] = fileDesc;
+        }
+    }
+
+    const paddingDiv = document.createElement('div');
+    paddingDiv.style["height"] = "50px";
+    container.appendChild(paddingDiv);
+
+    function expandCamel(str) {
+        return str.replace(/([A-Z])/g, function ($1) {
+            return " " + $1.toLowerCase();
+        });
+    }
+
+    if (window.location.hash !== '') {
+        load(window.location.hash.substring(1));
+    } else {
+        indexToggle.checked = true;
+    }
+
+    var hash = window.location.hash;
+
+    window.setInterval(function () {
+        if (window.location.hash !== hash || viewer.src === "") {
+            setTimeout(() => {
+                load(window.location.hash.substring(1));
+                hash = window.location.hash;
+            }, 300)
+
+            indexToggle.checked = false;
+        }
+    }, 70);
+
+    function scrollIntoView(div) {
+        document.getElementById("index").scrollTop = documentOffsetTop(div) - (window.innerHeight / 6);
+    }
+
+    function documentOffsetTop(div) {
+        return div.offsetTop + (div.offsetParent ? documentOffsetTop(div.offsetParent) : 0);
+    }
+
+    function load(file) {
+
+        pageTitle.innerText = fileDescriptions[file] || "Example not found - perhaps renamed?";
+
+        if (file.indexOf(".html", file.length - 5) !== -1) {
+            window.location = "./" + file + ".html";
+            return;
+        }
+
+        if (selected !== null) divs[selected].className = 'link';
+        divs[file].className = 'link selected';
+        window.location.hash = file;
+        viewer.src = file + '.html';
+        viewer.focus();
+        viewSourceButton.style.display = '';
+        selected = file;
+        if (clickedFile !== file) {
+            scrollIntoView(divs[file]);
+        }
+        clickedFile = null;
+    }
+
+    function isString(value) {
+        return (typeof value === 'string' || value instanceof String);
+    }
+
+</script>
+</html>
diff --git a/emphasising/opacity.html b/emphasising/opacity.html
new file mode 100644
index 0000000..79b16a1
--- /dev/null
+++ b/emphasising/opacity.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Set Object Opacities</h1>
+    <h2>Click objects to change their opacity</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas"
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model and fit it to view
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Mouse over Entities to set them transparent
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.opacity = 0.6;
+        }
+    });
+
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/select.html b/emphasising/select.html
new file mode 100644
index 0000000..48e5e79
--- /dev/null
+++ b/emphasising/select.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Set Objects Selected</h1>
+    <h2>Click objects to select them</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas"
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt", // Creates a MetaObject instances in scene.metaScene.metaObjects
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    //Click Entities to make them appear selected
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.selected = true;
+        }
+    });
+
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/select_glowThroughFalse.html b/emphasising/select_glowThroughFalse.html
new file mode 100644
index 0000000..44f5d76
--- /dev/null
+++ b/emphasising/select_glowThroughFalse.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Picking Objects</h1>
+    <h2>Hover over objects to select them</h2>
+    <p>In this example, we've set glowThrough:false on the Scene's HighlightMaterial. This disables the usual "glow-through" behaviour for selected objects.</p>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true,
+        dtxEnabled: true
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Disable glow-through effect on the "selected" effect material.
+    // It also seems best to make objects opaque when selected.
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.selectedMaterial.glowThrough = false;
+    viewer.scene.selectedMaterial.fillAlpha = 1.0;
+    viewer.scene.selectedMaterial.edgeAlpha = 1.0;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    //Click Entities to make them appear selected
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.selected = true;
+        }
+    });
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/select_glowThroughFalse_dtx.html b/emphasising/select_glowThroughFalse_dtx.html
new file mode 100644
index 0000000..741f50f
--- /dev/null
+++ b/emphasising/select_glowThroughFalse_dtx.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Picking Objects</h1>
+    <h2>Hover over objects to select them</h2>
+    <p>In this example, we've set glowThrough:false on the Scene's HighlightMaterial. This disables the usual "glow-through" behaviour for selected objects.</p>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true,
+        dtxEnabled: true
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Disable glow-through effect on the "selected" effect material.
+    // It also seems best to make objects opaque when selected.
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.selectedMaterial.glowThrough = false;
+    viewer.scene.selectedMaterial.fillAlpha = 1.0;
+    viewer.scene.selectedMaterial.edgeColor = [0,0,0];
+    viewer.scene.selectedMaterial.edgeAlpha = 1.0;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    //Click Entities to make them appear selected
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.selected = true;
+        }
+    });
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/select_transparentCanvas.html b/emphasising/select_transparentCanvas.html
new file mode 100644
index 0000000..c868d25
--- /dev/null
+++ b/emphasising/select_transparentCanvas.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>Picking Objects</h1>
+    <h2>Hover objects to select them</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Mouse over Entities to select them
+    //------------------------------------------------------------------------------------------------------------------
+
+    var lastEntity = null;
+
+    viewer.scene.input.on("mousemove", function (coords) {
+
+        var hit = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (hit) {
+
+            if (!lastEntity || hit.entity.id !== lastEntity.id) {
+
+                if (lastEntity) {
+                    lastEntity.selected = false;
+                }
+
+                lastEntity = hit.entity;
+                hit.entity.selected = true;
+            }
+        } else {
+
+            if (lastEntity) {
+                lastEntity.selected = false;
+                lastEntity = null;
+            }
+        }
+    });
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/xray.html b/emphasising/xray.html
new file mode 100644
index 0000000..9c6d440
--- /dev/null
+++ b/emphasising/xray.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>X-Raying Objects</h1>
+    <h2>Click objects to X-ray them</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas"
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    viewer.scene.xrayMaterial.fillColor = [1.0, 0.0, 0.0];
+    viewer.scene.xrayMaterial.fillAlpha = 0.5;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    //Click Entities to make them appear X-rayed
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.xrayed = true;
+        }
+    });
+
+</script>
+</html>
\ No newline at end of file
diff --git a/emphasising/xray_transparentCanvas.html b/emphasising/xray_transparentCanvas.html
new file mode 100644
index 0000000..d682c07
--- /dev/null
+++ b/emphasising/xray_transparentCanvas.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <h1>X-Raying Objects on a Transparent Canvas</h1>
+    <h2>Click objects to X-ray them</h2>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, XKTLoaderPlugin} from "../dist/xeokit-sdk.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.camera.eye = [-3.93, 2.85, 27.01];
+    viewer.camera.look = [4.40, 3.72, 8.89];
+    viewer.camera.up = [-0.01, 0.99, 0.039];
+
+    viewer.scene.xrayMaterial.fillColor = [1.0, 0.0, 0.0];
+    viewer.scene.xrayMaterial.fillAlpha = 0.5;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    //Click Entities to make them appear X-rayed
+    //------------------------------------------------------------------------------------------------------------------
+
+    viewer.scene.input.on("mousedown", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+            console.log(pickResult.entity.id);
+            pickResult.entity.xrayed = true;
+        }
+    });
+
+</script>
+</html>
\ No newline at end of file
