From 4ac66f83f748f57ae8248034676cbaaef145dbd0 Mon Sep 17 00:00:00 2001
From: paireks <w.radaczynski@gmail.com>
Date: Mon, 26 Feb 2024 21:26:12 +0100
Subject: [PATCH] Adding example of controlling the position on the CameraPath
 by slider

---
 ...era_CameraPathAnimation_SliderControl.html | 664 ++++++++++++++++++
 examples/navigation/index.html                |   1 +
 2 files changed, 665 insertions(+)
 create mode 100644 examples/navigation/camera_CameraPathAnimation_SliderControl.html
diff --git a/examples/navigation/camera_CameraPathAnimation_SliderControl.html b/examples/navigation/camera_CameraPathAnimation_SliderControl.html
new file mode 100644
index 0000000000..01d183a7ec
--- /dev/null
+++ b/examples/navigation/camera_CameraPathAnimation_SliderControl.html
@@ -0,0 +1,664 @@
+<!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>
+    <script src="../../src/viewer/scene/camera/CameraPathAnimation.js"></script>
+    <style>
+        #sliderContainer {
+            pointer-events: all;
+            height: 100%;
+            /*overflow-y: scroll;*/
+            overflow-x: hidden;
+            position: absolute;
+            background-color: rgba(255, 255, 255, 0.2);
+            color: black;
+            top: 80px;
+            z-index: 200000;
+            float: left;
+            left: 0;
+            padding-left: 10px;
+            font-family: 'Roboto', sans-serif;
+            font-size: 15px;
+            user-select: none;
+            -ms-user-select: none;
+            -moz-user-select: none;
+            -webkit-user-select: none;
+            width: 250px;
+        }
+        input {
+            vertical-align: middle;
+            padding:0px;
+            margin:5px;
+        }
+    </style>
+</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 id="sliderContainer">
+    <p>Sliders</p>
+    <label>
+        Camera path
+        <input id="camera_path" type="range" min="0" max="1" value="0" step="0.0001">
+    </label>
+</div>
+<div class="slideout-sidebar">
+    <img class="info-icon" src="../../assets/images/camera_icon.png"/>
+    <h1>CameraPathAnimation_SliderControl</h1>
+    <h2>Controlling the camera along a path with a slider</h2>
+    <p>In this example, we load a BIM model from the file system, then fly the camera along a pre-defined path that
+        passes
+        through the model using slider.</p>
+    <h3>Stats</h3>
+    <ul>
+        <li>
+            <div id="time">Loading JavaScript modules...</div>
+        </li>
+    </ul>
+    <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>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/camera/CameraPath.js~CameraPath.html"
+               target="_other">CameraPath</a>
+        </li>
+
+        <li>
+            <a href="../../docs/class/src/viewer/scene/camera/CameraPathAnimation.js~CameraPathAnimation.html"
+               target="_other">CameraPathAnimation</a>
+        </li>
+    </ul>
+    <h3>Resources</h3>
+    <ul>
+        <li>
+            <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/301"
+               target="_other">Model source</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {
+        Viewer,
+        CameraPath,
+        CameraPathAnimation,
+        Mesh,
+        ReadableGeometry,
+        buildPlaneGeometry,
+        PhongMaterial,
+        XKTLoaderPlugin,
+        Skybox
+    } from "../../dist/xeokit-sdk.es.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer and arrange camera
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.camera.eye = [10.449999809265137, 17.3799991607666, -98.30999755859375];
+    viewer.camera.look = [43.09000015258789, 0.5, -26.760000228881836];
+    viewer.camera.up = [0.05999999865889549, 0.9599999785423279, 0.1599999964237213];
+
+    viewer.cameraControl.navMode = "firstPerson";
+
+    //----------------------------------------------------------------------------------------------------------------------
+    // Load model and fit it to view
+    //----------------------------------------------------------------------------------------------------------------------
+
+    // Ground plane
+
+    new Mesh(viewer.scene, {
+        geometry: new ReadableGeometry(viewer.scene, buildPlaneGeometry({
+            xSize: 3500,
+            zSize: 3500
+        })),
+        material: new PhongMaterial(viewer.scene, {
+            diffuse: [0.2, 0.7, 0.2],
+            backfaces: true
+        }),
+        position: [0, -8, 0],
+        pickable: false,
+        collidable: false
+    });
+
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v8/ifc/OTCConferenceCenter.ifc.xkt",
+        edges: false,
+        objectDefaults: { // This model has opaque windows / spaces; make them transparent
+            "IfcPlate": {
+                opacity: 0.3 // These are used as windows in this model - make transparent
+            },
+            "IfcWindow": {
+                opacity: 0.4
+            },
+            "IfcSpace": {
+                opacity: 0.4
+            }
+        }
+    });
+
+    // new Skybox(viewer.scene, {
+    //     src: "../../assets/textures/skybox/cloudySkyBox.jpg",
+    //     size: 1000
+    // });
+
+    //----------------------------------------------------------------------------------------------------------------------
+    // When model loaded, fly camera long a path
+    //----------------------------------------------------------------------------------------------------------------------
+
+    const positions = [
+        {
+            "eye": [
+                10.449999809265137,
+                17.3799991607666,
+                -98.30999755859375
+            ],
+            "look": [
+                43.09000015258789,
+                0.5,
+                -26.760000228881836
+            ],
+            "up": [
+                0.05999999865889549,
+                0.9599999785423279,
+                0.1599999964237213
+            ]
+        },
+        {
+            "eye": [
+                49.10879898071289,
+                9.237162590026855,
+                -99.9477310180664
+            ],
+            "look": [
+                49.10879898071289,
+                9.237162590026855,
+                -29.48837661743164
+            ],
+            "up": [
+                0,
+                1,
+                0
+            ]
+        },
+        {
+            "eye": [
+                98.93108367919922,
+                9.237162590026855,
+                -79.31066131591797
+            ],
+            "look": [
+                49.10879898071289,
+                9.237162590026855,
+                -29.48837661743164
+            ],
+            "up": [
+                0,
+                1,
+                0
+            ]
+        },
+        {
+            "eye": [
+                119.56815338134766,
+                9.237162590026855,
+                -29.48837661743164
+            ],
+            "look": [
+                49.10879898071289,
+                9.237162590026855,
+                -29.48837661743164
+            ],
+            "up": [
+                0,
+                1,
+                0
+            ]
+        },
+        {
+            "eye": [
+                98.93108367919922,
+                9.237162590026855,
+                20.33390998840332
+            ],
+            "look": [
+                49.10879898071289,
+                9.237162590026855,
+                -29.48837661743164
+            ],
+            "up": [
+                0,
+                1,
+                0
+            ]
+        },
+        {
+            "eye": [
+                49.10879898071289,
+                9.237162590026855,
+                40.970977783203125
+            ],
+            "look": [
+                49.10879898071289,
+                9.237162590026855,
+                -29.48837661743164
+            ],
+            "up": [
+                0,
+                1,
+                0
+            ]
+        },
+        {
+            "eye": [
+                60.452980041503906,
+                5.4778642654418945,
+                7.06841516494751
+            ],
+            "look": [
+                60.452980041503906,
+                5.4778642654418945,
+                -63.39092254638672
+            ],
+            "up": [
+                0,
+                1,
+                0
+            ]
+        },
+        {
+            "eye": [
+                67.25090789794922,
+                2.1742258071899414,
+                -25.556394577026367
+            ],
+            "look": [
+                67.25090789794922,
+                2.1742258071899414,
+                -96.0157470703125
+            ],
+            "up": [
+                0,
+                1,
+                0
+            ]
+        },
+        {
+            "eye": [
+                68.87596130371094,
+                1.7158464193344116,
+                -42.77796173095703
+            ],
+            "look": [
+                -1.51083242893219,
+                -1.3406599760055542,
+                -43.723968505859375
+            ],
+            "up": [
+                -0.04337577521800995,
+                0.9990599155426025,
+                -0.0005829741712659597
+            ]
+        },
+        {
+            "eye": [
+                75.52992248535156,
+                2.2329771518707275,
+                -58.72169876098633
+            ],
+            "look": [
+                26.099660873413086,
+                -1.021628737449646,
+                -8.616039276123047
+            ],
+            "up": [
+                -0.03243977576494217,
+                0.9989341497421265,
+                0.03288296237587929
+            ]
+        },
+        {
+            "eye": [
+                40.69363784790039,
+                2.919964075088501,
+                -65.05496215820312
+            ],
+            "look": [
+                41.92532730102539,
+                9.625773429870605,
+                5.074016094207764
+            ],
+            "up": [
+                -0.0016713117947801948,
+                0.9954627156257629,
+                -0.0951581671833992
+            ]
+        },
+        {
+            "eye": [
+                18.983766555786133,
+                2.655843496322632,
+                -64.64852142333984
+            ],
+            "look": [
+                20.215457916259766,
+                9.361654281616211,
+                5.480562686920166
+            ],
+            "up": [
+                -0.0016713117947801948,
+                0.9954627156257629,
+                -0.0951581671833992
+            ]
+        },
+        {
+            "eye": [
+                9.118672370910645,
+                6.608935832977295,
+                -56.631927490234375
+            ],
+            "look": [
+                14.692089080810547,
+                10.801454544067383,
+                13.48182487487793
+            ],
+            "up": [
+                -0.004715084098279476,
+                0.9982303977012634,
+                -0.059315573424100876
+            ]
+        },
+        {
+            "eye": [
+                12.325481414794922,
+                6.173153877258301,
+                -38.165767669677734
+            ],
+            "look": [
+                33.274269104003906,
+                9.972784042358398,
+                29.00037384033203
+            ],
+            "up": [
+                -0.016056619584560394,
+                0.9985471963882446,
+                -0.05148075148463249
+            ]
+        },
+        {
+            "eye": [
+                13.830201148986816,
+                6.100258827209473,
+                -32.02607345581055
+            ],
+            "look": [
+                -54.385101318359375,
+                -11.52660083770752,
+                -32.77553176879883
+            ],
+            "up": [
+                -0.2501545250415802,
+                0.9682056307792664,
+                -0.0027484712190926075
+            ]
+        },
+        {
+            "eye": [
+                15.001229286193848,
+                6.177117824554443,
+                -25.8507137298584
+            ],
+            "look": [
+                -53.21399688720703,
+                -11.449746131896973,
+                -26.60016632080078
+            ],
+            "up": [
+                -0.2501545250415802,
+                0.9682056307792664,
+                -0.0027484712190926075
+            ]
+        },
+        {
+            "eye": [
+                13.10634994506836,
+                5.951435089111328,
+                -14.277751922607422
+            ],
+            "look": [
+                72.52796936035156,
+                -4.327131271362305,
+                -50.71895980834961
+            ],
+            "up": [
+                0.12435629218816757,
+                0.9893066883087158,
+                -0.07626304030418396
+            ]
+        },
+        {
+            "eye": [
+                23.32726287841797,
+                5.76120662689209,
+                -15.126765251159668
+            ],
+            "look": [
+                27.343843460083008,
+                -0.392856627702713,
+                -85.20191955566406
+            ],
+            "up": [
+                0.0049982876516878605,
+                0.9961833357810974,
+                -0.08719765394926071
+            ]
+        },
+        {
+            "eye": [
+                29.602476119995117,
+                6.041967868804932,
+                -14.791736602783203
+            ],
+            "look": [
+                33.61904525756836,
+                -0.11209755390882492,
+                -84.86698150634766
+            ],
+            "up": [
+                0.0049982876516878605,
+                0.9961833357810974,
+                -0.08719765394926071
+            ]
+        },
+        {
+            "eye": [
+                29.600866317749023,
+                5.945443630218506,
+                -27.180505752563477
+            ],
+            "look": [
+                -39.207435607910156,
+                0.9682354927062988,
+                -41.505836486816406
+            ],
+            "up": [
+                -0.06915532797574997,
+                0.9975070953369141,
+                -0.014397842809557915
+            ]
+        },
+        {
+            "eye": [
+                14.093534469604492,
+                5.877283096313477,
+                -31.99447250366211
+            ],
+            "look": [
+                -56.21117401123047,
+                1.3034216165542603,
+                -32.95225143432617
+            ],
+            "up": [
+                -0.06490764766931534,
+                0.997896134853363,
+                -0.00088452675845474
+            ]
+        },
+        {
+            "eye": [
+                7.193114757537842,
+                4.652937889099121,
+                -31.983610153198242
+            ],
+            "look": [
+                -1.2233401536941528,
+                -6.07865571975708,
+                37.14375305175781
+            ],
+            "up": [
+                -0.01840820163488388,
+                0.9883388876914978,
+                0.15119116008281708
+            ]
+        },
+        {
+            "eye": [
+                6.993342399597168,
+                3.009431838989258,
+                -25.73332405090332
+            ],
+            "look": [
+                76.40155792236328,
+                -8.766175270080566,
+                -22.826677322387695
+            ],
+            "up": [
+                0.1669786274433136,
+                0.9859421849250793,
+                0.006992913316935301
+            ]
+        },
+        {
+            "eye": [13.389263153076172, 1.4131710529327393, -25.758981704711914],
+            "look": [18.10419273376465, 15.135643005371094, -93.68792724609375],
+            "up": [-0.014205754734575748, 0.9789943099021912, 0.20156574249267578]
+        },
+        {
+            "eye": [13.611207962036133, 1.5050755739212036, -34.05820083618164],
+            "look": [81.58242797851562, 15.643852233886719, -36.27235412597656],
+            "up": [-0.20794743299484253, 0.977740466594696, 0.006559076253324747]
+
+        },
+        {
+            eye: [19.843839645385742, 1.4079610109329224, -32.191192626953125],
+            look: [87.81501770019531, 15.546740531921387, -34.40534973144531],
+            up: [-0.20794743299484253, 0.977740466594696, 0.006559076253324747]
+        },
+        {
+            eye: [28.864267349243164, 1.3526424169540405, -32.30430603027344],
+            look: [26.694440841674805, 12.729364395141602, -100.79373168945312],
+            up: [0.005117665510624647, 0.9853554368019104, 0.16825926303863525]
+        },
+        {
+            eye: [28.845767974853516, 1.061347246170044, -36.44567108154297],
+            look: [26.77190399169922, 12.441847801208496, -104.84442138671875],
+            up: [0.004826159216463566, 0.9853450059890747, 0.1680380254983902]
+        },
+        {
+            eye: [29.34054183959961, 1.1280938386917114, -47.8439826965332],
+            look: [27.266677856445312, 12.508586883544922, -116.24273681640625],
+            up: [0.004826159216463566, 0.9853450059890747, 0.1680380254983902]
+        },
+        {
+            eye: [27.459678649902344, 5.846250534057617, -50.04418182373047],
+            look: [-40.626163482666016, 18.505748748779297, -46.005027770996094],
+            up: [0.18621139228343964, 0.9820269346237183, -0.010777082294225693]
+        },
+        {
+            eye: [15.054696083068848, 5.857889652252197, -49.07149887084961],
+            look: [-38.35358428955078, 23.258678436279297, -8.44588851928711],
+            up: [0.20288139581680298, 0.9665652513504028, -0.15399742126464844]
+        },
+        {
+            eye: [12.04452133178711, 5.952678203582764, -46.265586853027344],
+            look: [7.190267562866211, 28.411527633666992, 19.09758758544922],
+            up: [0.024370994418859482, 0.9443540573120117, -0.32657957077026367]
+        },
+        {
+            eye: [4.546205997467041, 6.01467227935791, -46.91090393066406],
+            look: [-0.6747272610664368, 28.43566131591797, 18.268545150756836],
+            up: [0.02572646364569664, 0.944520890712738, -0.3252857029438019]
+        },
+        {
+            "eye": [
+                10.449999809265137,
+                17.3799991607666,
+                -98.30999755859375
+            ],
+            "look": [
+                43.09000015258789,
+                0.5,
+                -26.760000228881836
+            ],
+            "up": [
+                0.05999999865889549,
+                0.9599999785423279,
+                0.1599999964237213
+            ]
+        }
+    ];
+
+    var cameraPath = new CameraPath(viewer.scene, {
+        frames: positions
+    });
+
+    cameraPath.smoothFrameTimes(1);
+
+    var cameraPathAnimation = new CameraPathAnimation(viewer.scene, {
+        cameraPath: cameraPath,
+        playingRate: 0.015
+    });
+
+    const t0 = performance.now();
+
+    document.getElementById("time").innerHTML = "Loading model...";
+
+    sceneModel.on("loaded", function () {
+        const t1 = performance.now();
+        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+    });
+
+    let cameraPathT = 0.0;
+    document.getElementById("camera_path").oninput = function() {
+        cameraPathT = document.getElementById("camera_path").value;
+        cameraPathAnimation.scrubToT(cameraPathT);
+    };
+
+</script>
+</html>
\ No newline at end of file
diff --git a/examples/navigation/index.html b/examples/navigation/index.html
index f623238522..d03c2f6e6f 100644
--- a/examples/navigation/index.html
+++ b/examples/navigation/index.html
@@ -277,6 +277,7 @@
             ["CameraControl_planView_Schependomlaan", "Plan view navigation"],
             "# Animation",
             ["camera_CameraPathAnimation", "Animating the camera along a path"],
+            ["camera_CameraPathAnimation_SliderControl", "Controlling the camera along a path with a slider"],
             ["camera_fitToModel", "Arranging the camera to fit the model in view"],
             ["camera_CameraFlightAnimation_projection", "Smooth transition between projections"],
             "# Configuration",
