lessons/05/demo.js
function gui() {
    var gui = new dat.GUI({ autoPlace: false });
    var customContainer = document.getElementById('my-gui-container');
    customContainer.appendChild(gui.domElement);

    // of course we can do everything from lesson 01!
    var stackFolder = gui.addFolder('Stack');
    var indexUpdate = stackFolder
        .add(stackHelper0, 'index', 0, stackHelper0.stack.dimensionsIJK.z - 1)
        .step(1)
        .listen();
    indexUpdate.onChange(function() {
        // IJK
        window.console.log('IJK Base');
        window.console.log(stackHelper0.slice.planePosition);
        window.console.log(stackHelper0.slice.planeDirection);

        // TO LPS
        var worldPosition = new THREE.Vector3().copy(stackHelper0.slice.planePosition).applyMatrix4(stack0.ijk2LPS);
        var worldDirection = new THREE.Vector3().copy(stackHelper0.slice.planeDirection).applyMatrix4(stack0.ijk2LPS);
        var worldDirection0 = new THREE.Vector3(0, 0, 0).applyMatrix4(stack0.ijk2LPS);

        window.console.log('LPS Base');
        window.console.log(worldPosition);
        window.console.log(worldDirection0);
        window.console.log(worldDirection);

        // TO IJK
        var dataPosition = worldPosition.applyMatrix4(stack1.lps2IJK);
        var dataDirection = worldDirection.applyMatrix4(stack1.lps2IJK);
        var dataDirection0 = worldDirection0.applyMatrix4(stack1.lps2IJK);

        window.console.log('IJK Layer');
        window.console.log(dataPosition);
        window.console.log(dataDirection);
        window.console.log(dataDirection0);

        // back to LPS for testing...
        var worldPosition1 = new THREE.Vector3().copy(dataPosition).applyMatrix4(stack1.ijk2LPS);
        var worldDirection1 = new THREE.Vector3().copy(dataDirection).applyMatrix4(stack1.ijk2LPS);

        window.console.log('LPS Layer');
        window.console.log(worldPosition1);
        window.console.log(worldDirection1);

        // update slice and THEN its border
        stackHelper1.slice.planePosition = dataPosition;
        stackHelper1.slice.planeDirection = dataDirection.sub(dataDirection0);
        // update border with new slice
        stackHelper1.border.helpersSlice = stackHelper1.slice;
    });
    var interpolation = stackFolder
        .add(stackHelper0.slice, 'interpolation', 0, 1)
        .step(1)
        .listen();
    interpolation.onChange(function() {
        stackHelper1.slice.interpolation = stackHelper0.slice.interpolation;
    });
    stackFolder.open();
}
function gui() {
    var gui = new dat.GUI({ autoPlace: false });
    var customContainer = document.getElementById('my-gui-container');
    customContainer.appendChild(gui.domElement);

    // of course we can do everything from lesson 01!
    var stackFolder = gui.addFolder('Stack');
    var indexUpdate = stackFolder
        .add(stackHelper0, 'index', 0, stackHelper0.stack.dimensionsIJK.z - 1)
        .step(1)
        .listen();
    indexUpdate.onChange(function() {
        // IJK
        window.console.log('IJK Base');
        window.console.log(stackHelper0.slice.planePosition);
        window.console.log(stackHelper0.slice.planeDirection);

        // TO LPS
        var worldPosition = new THREE.Vector3().copy(stackHelper0.slice.planePosition).applyMatrix4(stack0.ijk2LPS);
        var worldDirection = new THREE.Vector3().copy(stackHelper0.slice.planeDirection).applyMatrix4(stack0.ijk2LPS);
        var worldDirection0 = new THREE.Vector3(0, 0, 0).applyMatrix4(stack0.ijk2LPS);

        window.console.log('LPS Base');
        window.console.log(worldPosition);
        window.console.log(worldDirection0);
        window.console.log(worldDirection);

        // TO IJK
        var dataPosition = worldPosition.applyMatrix4(stack1.lps2IJK);
        var dataDirection = worldDirection.applyMatrix4(stack1.lps2IJK);
        var dataDirection0 = worldDirection0.applyMatrix4(stack1.lps2IJK);

        window.console.log('IJK Layer');
        window.console.log(dataPosition);
        window.console.log(dataDirection);
        window.console.log(dataDirection0);

        // back to LPS for testing...
        var worldPosition1 = new THREE.Vector3().copy(dataPosition).applyMatrix4(stack1.ijk2LPS);
        var worldDirection1 = new THREE.Vector3().copy(dataDirection).applyMatrix4(stack1.ijk2LPS);

        window.console.log('LPS Layer');
        window.console.log(worldPosition1);
        window.console.log(worldDirection1);

        // update slice and THEN its border
        stackHelper1.slice.planePosition = dataPosition;
        stackHelper1.slice.planeDirection = dataDirection.sub(dataDirection0);
        // update border with new slice
        stackHelper1.border.helpersSlice = stackHelper1.slice;
    });
    var interpolation = stackFolder
        .add(stackHelper0.slice, 'interpolation', 0, 1)
        .step(1)
        .listen();
    interpolation.onChange(function() {
        stackHelper1.slice.interpolation = stackHelper0.slice.interpolation;
    });
    stackFolder.open();
}
build GUI