I want to to enable dat-gui controls for the threejs camera in the basic threejs example on this page:

.js/

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}

I've tried the following code:

var params = {
    z: 100
}

var gui = new dat.GUI();

gui.add(params, 'z', -500,500).step(5).onChange(function(value){
        changeCameraZ(value);
    });
function changeCameraZ(value){
    camera.position.z = value;
}

which works, but it means that I have to write a new function: changeBlah();

for each three.js variable I wish to change from the GUI. Is there a better, cleaner way of achieving this?

I want to to enable dat-gui controls for the threejs camera in the basic threejs example on this page:

https://github./mrdoob/three.js/

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}

I've tried the following code:

var params = {
    z: 100
}

var gui = new dat.GUI();

gui.add(params, 'z', -500,500).step(5).onChange(function(value){
        changeCameraZ(value);
    });
function changeCameraZ(value){
    camera.position.z = value;
}

which works, but it means that I have to write a new function: changeBlah();

for each three.js variable I wish to change from the GUI. Is there a better, cleaner way of achieving this?

• javascript
• three.js
• dat.gui

3 Answers 3

You could also make use of how DAT.gui makes use of references.

gui.add( camera.position , 'z', -500, 500 ).step(5)

and an example

http://jsfiddle/2WKqL/2/

This one-liner should work.

gui.add( params, 'z', -500, 500 ).step(5).onChange( function( value ){ camera.position.z = value; } );

I have created a TypeScript class to handle this scenario.

import type { PerspectiveCamera } from "three";
import * as dat from "dat.gui";

export class CameraHelper {
    private camera: PerspectiveCamera;
    private gui: dat.GUI;

    constructor(camera: PerspectiveCamera) {
        this.camera = camera;
        this.gui = new dat.GUI();

        this.initGUI();
    }

    private initGUI(): void {
        const cameraFolder = this.gui.addFolder("Camera Settings");
        if ("fov" in this.camera) {
            cameraFolder.add(this.camera, "fov", 10, 120).onChange(() => {
                this.camera.updateProjectionMatrix();
            });
        }

        cameraFolder.add(this.camera, "near", 0.1, 100).onChange(() => {
            this.camera.updateProjectionMatrix();
        });

        cameraFolder.add(this.camera, "far", 1, 5000).onChange(() => {
            this.camera.updateProjectionMatrix();
        });

        const rotationFolder = cameraFolder.addFolder("Rotation");
        rotationFolder.add(this.camera.rotation, "x", -Math.PI, Math.PI);
        rotationFolder.add(this.camera.rotation, "y", -Math.PI, Math.PI);
        rotationFolder.add(this.camera.rotation, "z", -Math.PI, Math.PI);

        const positionFolder = cameraFolder.addFolder("Position");
        positionFolder.add(this.camera.position, "x", 0, 100);
        positionFolder.add(this.camera.position, "y", 0, 100);
        positionFolder.add(this.camera.position, "z", 0, 100);

        cameraFolder.open();
        rotationFolder.open();
        positionFolder.open();
    }
}

which gets camera from my cameraManager class and changes fov, far/near and position/rotation of the camera in the GUI. Note that,