How to use dat - 10 common examples

const wMat = new THREE.Matrix4().compose( boxMesh.position, boxMesh.quaternion, new THREE.Vector3( 1, 1, 1 ) );
	const mat = new THREE.Matrix4();
	mat.getInverse( wMat );

	console.log( mesh.geometry.boundsTree.boxcast( mesh, box, wMat ) );
	box.min.copy( boxMesh.scale ).multiplyScalar( - 0.5 );
	box.max.copy( boxMesh.scale ).multiplyScalar( 0.5 );

	requestAnimationFrame( render );

};

scene.add( window.planeHelpers );

// Run
const gui = new dat.GUI();

const meshfolder = gui.addFolder( 'Mesh' );
meshfolder.add( options.mesh, 'visualizeBounds' ).onChange( () => updateFromOptions() );
meshfolder.add( options.mesh, 'visualBoundsDepth' ).min( 1 ).max( 40 ).step( 1 ).onChange( () => updateFromOptions() );
meshfolder.open();

window.addEventListener( 'resize', function () {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}, false );

updateFromOptions();

constructor () {
    // Create the gui
    this.gui = new dat.GUI()

    this.guiFunctions = {}
  }

// Be sure to see the buildings when starting the example: a zoom level does not translate into
    // the same distance depending on the viewport's height.
    const minDistanceForBuildings =
        Math.ceil(MapViewUtils.calculateDistanceToGroundFromZoomLevel(map, 16.0)) - 500;
    // snippet:harp_gl_camera_orbit_example_1.ts
    const options = { tilt: 25, distance: minDistanceForBuildings, globe: true };
    const dubai = new GeoCoordinates(25.19705, 55.27419);
    let heading = 0;
    map.addEventListener(MapViewEventNames.AfterRender, () => {
        map.lookAt(dubai, options.distance, options.tilt, (heading = (heading + 0.1) % 360));
        map.update();
        updateHTML();
    });
    // end:harp_gl_camera_orbit_example_1.ts

    const gui = new GUI({ width: 300 });
    gui.add(options, "tilt", 0, 80, 0.1);
    gui.add(options, "distance", 300, 60000, 1);
    gui.add(options, "globe").onChange(() => {
        map.projection = options.globe ? sphereProjection : mercatorProjection;
    });

    function createBaseMap(): MapView {
        document.body.innerHTML += getExampleHTML();

        const canvas = document.getElementById("mapCanvas") as HTMLCanvasElement;
        const mapView = new MapView({
            canvas,
            projection: sphereProjection,
            theme: "resources/berlin_tilezen_base_globe.json"
        });
        canvas.addEventListener("contextmenu", e => e.preventDefault());

Object.assign(light.shadow.camera, options);
            light.shadow.camera.updateProjectionMatrix();
        };

        const updateLights = () => {
            map.scene.children.forEach((obj: THREE.Object3D) => {
                if ((obj as any).isDirectionalLight) {
                    const light = obj as THREE.DirectionalLight;
                    updateLightCamera(light);
                }
            });
            map.update();
        };
        promise.then(updateLights);

        const gui = new GUI({ width: 300 });
        gui.add(options, "top", 0, 10000).onChange(updateLights);
        gui.add(options, "left", -10000, 0).onChange(updateLights);
        gui.add(options, "right", 0, 10000).onChange(updateLights);
        gui.add(options, "bottom", -10000, 0).onChange(updateLights);
        gui.add(options, "near", -1000, 100).onChange(updateLights);
        gui.add(options, "far", 0, 10000).onChange(updateLights);

        // const updateLightPosition = () => {
        //     map.scene.children.forEach((obj: THREE.Object3D) => {
        //         if ((obj as any).isDirectionalLight) {
        //             const light = obj as THREE.DirectionalLight;

        //             const time = Date.now() / 1000;
        //             light.position.set(Math.cos(time), Math.sin(time), 1);
        //             map.update();
        //         }

initGUI() {
    // GUI
    const gui = new GUI()
    gui.close()

    // Blend Distance
    gui.add(this.material.uniforms.blendDistance, 'value', 0.001, 5).name('blendDistance').listen()

    // Sinuzoide
    const sinFolder = gui.addFolder('Sinuzoide')
    sinFolder.open()
    sinFolder.add(this.material.uniforms.sinAmpl, 'value', 0, 2).name('Ampl').listen()
    sinFolder.add(this.material.uniforms.sinFrequency, 'value', 0, 10).name('Frequency').listen()
    sinFolder.add(this.speed, 'sin', -0.2, 0.2).name('speed').listen()

    // PerlinNoise
    const perlinNoiseFolder = gui.addFolder('Perlin Noise')
    perlinNoiseFolder.open()
    perlinNoiseFolder.add(this.material.uniforms.pNoiseAmpl, 'value', 0, 2).name('Ampl').listen()

if ( boundsViz ) boundsViz.update();

	rayCasterObjects.forEach( f => f.update() );

	renderer.render( scene, camera );

	lastFrameTime = currTime;

	stats.end();

	requestAnimationFrame( render );

};

// Run
const gui = new dat.GUI();
const rcFolder = gui.addFolder( 'Raycasters' );
rcFolder.add( params.raycasters, 'count' ).min( 1 ).max( 500 ).step( 1 ).onChange( () => updateFromOptions() );
rcFolder.add( params.raycasters, 'speed' ).min( 0 ).max( 20 );
rcFolder.open();

const meshFolder = gui.addFolder( 'Mesh' );
meshFolder.add( params.mesh, 'count' ).min( 1 ).max( 300 ).step( 1 ).onChange( () => updateFromOptions() );
meshFolder.add( params.mesh, 'useBoundsTree' ).onChange( () => updateFromOptions() );
meshFolder.add( params.mesh, 'speed' ).min( 0 ).max( 20 );
meshFolder.add( params.mesh, 'visualizeBounds' ).onChange( () => updateFromOptions() );
meshFolder.add( params.mesh, 'visualBoundsDepth' ).min( 1 ).max( 40 ).step( 1 ).onChange( () => updateFromOptions() );
meshFolder.open();

window.addEventListener( 'resize', function () {

	camera.aspect = window.innerWidth / window.innerHeight;

// Make the light track your mouse
world.interactive = true;
world.on("mousemove", function(event) {
    if (demoOptions.followMouse) {
        shadow.position.copy(event.data.global);
    } else {
        shadow.position.x = demoOptions.shadowX;
        shadow.position.y = demoOptions.shadowY;
    }
});

/* The debug debug/demo code */

// Add settings controls
var gui = new dat.GUI();

// Demo options
var demoGUI = gui.addFolder("Demo options");
demoGUI.open();
demoGUI.add(demoOptions, "followMouse");
demoGUI.add(demoOptions, "shadowX", 0, 800);
demoGUI.add(demoOptions, "shadowY", 0, 600);

// Shadow properties
var shadowGUI = gui.addFolder("Shadow properties");
shadowGUI.open();
shadowGUI.add(shadow, "range", 50, 1000);
shadowGUI.add(shadow, "intensity", 0, 3);
shadowGUI.add(shadow, "pointCount", 1, 50, 1).onChange(showShadowMap);
shadowGUI.add(shadow, "scatterRange", 0, 50);
shadowGUI.add(shadow, "radialResolution", 100, 1500, 1).onChange(showShadowMap);

/* The debug debug/demo code */

// Add fps counter
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.domElement);
stats.domElement.style.position = "absolute";
stats.domElement.style.top = 0;
app.ticker.add(function() {
    stats.begin();
    stats.end();
});

// Add settings controls
var gui = new dat.GUI();

// Demo options
var demoGUI = gui.addFolder("Demo options");
demoGUI.open();
demoGUI.add(demoOptions, "followMouse");
demoGUI.add(demoOptions, "shadowX", 0, 800);
demoGUI.add(demoOptions, "shadowY", 0, 600);

// Shadow properties
var shadowGUI = gui.addFolder("Shadow properties");
shadowGUI.open();
shadowGUI.add(shadow, "range", 50, 1000);
shadowGUI.add(shadow, "intensity", 0, 3);
shadowGUI.add(shadow, "pointCount", 1, 50, 1);
shadowGUI.add(shadow, "scatterRange", 0, 50);
shadowGUI.add(shadow, "radialResolution", 100, 1500, 1);

import {
  WebGLRenderer, Scene, PerspectiveCamera, Mesh, Color,
  Vector3, SplineCurve, Path, Object3D, MeshBasicMaterial, ShapeGeometry,
  FontLoader,
} from 'three';
import { TimelineLite } from 'gsap';
import { GUI } from 'dat.gui';

import CameraMouseControl from 'CameraMouseControl';

import { MeshLine, MeshLineMaterial } from 'three.meshline';
import AnimatedText3D from 'AnimatedText3D';
import { getRandomFloat, getRandomInt } from 'utils';

const gui = new GUI();

/* --------------------------- */
/* ----------- CORE ---------- */
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
class Webgl {
 constructor(w, h) {
   this.meshCount = 0;
   this.meshListeners = [];
   this.renderer = new WebGLRenderer({ antialias: true, alpha: true });
   this.renderer.setPixelRatio(window.devicePixelRatio);
   this.scene = new Scene();
   this.camera = new PerspectiveCamera(50, w / h, 1, 1000);
   this.camera.position.set(0, 0, 10);
   this.dom = this.renderer.domElement;
   this.update = this.update.bind(this);

this.Provider.Initializers.Renderer.call(world, this);
    this.Provider.Initializers.Setup.call(world, this);
    this.Provider.Initializers.Camera.call(world, this);
    this.Provider.Initializers.Canvas.call(world, this);
    this.Provider.Initializers.Scene.call(world, this);

    world.controls.addEventListener('change', function () {
        if (self.frameUpdateHandlers.before.length === 0 && self.frameUpdateHandlers.after.length === 0) {
            self.render();
        }
    });

    currentWindow.addEventListener('resize', this.resizeHelper, false);

    // load toolbars
    this.gui = new dat.GUI({width: 220, autoPlace: false, scrollable: true, closeOnTop: true});

    var guiContainer = currentWindow.document.createElement('div');
    guiContainer.className = 'dg';
    guiContainer.style.cssText = [
        'position: absolute',
        'color: black',
        'top: 0',
        'right: 0',
        'z-index: 20',
        'max-height: ' + targetDOMNode.clientHeight + 'px'
    ].join(';');
    world.targetDOMNode.appendChild(guiContainer);
    guiContainer.appendChild(this.gui.domElement);

    GUI.controls = this.gui.addFolder('Controls');
    GUI.objects = this.gui.addFolder('Objects');