How to change properties of a path with GUI?

Questions
1

Hello,

I have this code :

let scene = new THREE.Scene();
    scene.background = new THREE.Color(0x7f7f7f);
    let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
    camera.position.set(8, 5, 13);
    let renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    let controls = new OrbitControls(camera, renderer.domElement);

    let path = new THREE.Path();
    path.absarc(5, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true);
    path.absarc(-5, 0, 1, Math.PI * 1.5, Math.PI * 0.5, true);
    path.closePath();
    console.log(path)
    let basePts = path.getSpacedPoints(200).reverse();

    let g = new THREE.PlaneGeometry(1, 1, 200, 1);
    basePts.forEach((p, idx) => {
        g.attributes.position.setXYZ(idx, p.x, p.y, -2);
    g.attributes.position.setXYZ(idx + 201, p.x, p.y, 2);
    })

    const urlParams = new URLSearchParams(window.location.search);
    const file = urlParams.get('file');

    const m = loadLabel(file);

    let band = new THREE.Mesh(g, m);
    scene.add(band);


    window.addEventListener("resize", () => {
        camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight);
    })



    renderer.setAnimationLoop( () => {
 
        renderer.render(scene, camera);
    });


    function loadLabel (file) {

        const t = file.split('x');
        const width = t[0];
        const height = t[1].replace('.png', '');
        let m = new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide,
            map: new THREE.TextureLoader().load('./' + file)
        });

        return m;

    }


    // GUI DE CONTROLE DEBUG
        var gui = new GUI();

        var options = {
            width: () => {
                console.log('test');
            }
        };

        const labelFolder = gui.addFolder('Label properties')
        labelFolder.add(options, 'width', 0, 100).name('Width')

        gui.open();

I just want modify this path property : path.absarc(5, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true);
by using the GUI. For example a need a slider to change the first value (path.absarc(15, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true));

Is it possible ?

Thanks !

2

Yes, are you referring to the x property of absArc? three.js docs

3

I need to change all of them by dat.gui.

And the path.closePath() too with a checkbox.

My aim is to change the size off the shape and open / close it.

4

If you can provide a minimal working environment on codepen that’d be helpful to help you :slight_smile:

5

Of course, here is the fiddle :

I’m blocked with the GUI…

Thanks

6

try accessing the paths absarcs’s like so… labelFolder.add(path.curves[0], 'aX', 0, 100). path.curves[0] is referencing the first absarc of the path and aX is the first property of the given absarc, you’ll also need to dispose of the previous geometry, recreate it and add it to the scene on every change, i’m sure you can’t do this dynamically…

7

i’ve updated your demo very quickly to demonstrate the use case here…

hope this helps get you in the correct direction :slight_smile:

8

Very thanks @Lawrence3DPK that’s exactly what I need !

I will work on your fiddle to let a full example

1 Like