Использование более одного параметра с одним ползунком с datGUI в three.js

Question

Я использую TreeJ для моделирования формы, и я хочу переместить 2 параметра в одном и том же ползунке, который я хочу знать, если это возможно: например, перемещение позиции x двух разных вершин одновременно, а не только одной.

Я уже использую datGui для перемещения одной вершины, но хочу переместить более одной с тем же ползунком.

<script src="js/three.js"></script>
        <script>
            //camera
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, -2, 10);
                        camera.lookAt( 0, -2, 0 );
            //rendu
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight);
            document.body.appendChild( renderer.domElement );
//coté gauche---------------------------------------------
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
//trait A1 (haut vertical)
            var a1 = new THREE.Geometry();
a1.vertices = [new THREE.Vector3(-2, 0, 0),
               new THREE.Vector3(-2, 2, 0) ];
var A1 = new THREE.Line( a1, material );
//trait A2 (haut horizontal)
            var a2 = new THREE.Geometry();
a2.vertices = [new THREE.Vector3( -2, 0, 0),
               new THREE.Vector3(-4, 0, 0) ];
var A2 = new THREE.Line( a2, material );
//trait A3 (centre vertical)
            var a3 = new THREE.Geometry();
a3.vertices.push(new THREE.Vector3( -4, 0, 0) );
a3.vertices.push(new THREE.Vector3(-4, -2, 0) );
var A3 = new THREE.Line( a3, material );
//trait A4 (bas horizontal)
            var a4 = new THREE.Geometry();
a4.vertices.push(new THREE.Vector3( -4, -2, 0) );
a4.vertices.push(new THREE.Vector3(-2, -2, 0) );
var A4 = new THREE.Line( a4, material );
//trait A5 (bas horizontal)
            var a5 = new THREE.Geometry();
a5.vertices.push(new THREE.Vector3( -2, -2, 0) );
a5.vertices.push(new THREE.Vector3(-2, -4, 0) );
var A5 = new THREE.Line( a5, material );

//render-------------------------------------------------
scene.add(A1,A2,A3,A4,A5);
var render = function () {
requestAnimationFrame( render );
camera.updateProjectionMatrix();
  //maj refresh
  A3.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
};
render();
// dat gui----------------------------------------------
var gui = new dat.GUI();
var cameraGui = gui.addFolder("camera position");
cameraGui.add(camera.position, 'x').min(-20).max(20).step(0.25);
cameraGui.add(camera.position, 'y').min(-20).max(20).step(0.25);
cameraGui.add(camera.position, 'z').min(-20).max(20).step(0.25);
cameraGui.open();

var A3Gui = gui.addFolder("position a3");
A3Gui.add(A3.position,'x');
A3Gui.open();
        </script>

Answer 1

Просто используйте встроенную функцию .onChange(), описанную в их документах: https://workshop.chromeexperiments.com/examples/gui/#7--Events

var A3Gui = gui.addFolder("position a3");
var posSlider = A3Gui.add(A3.position,'x');
posSlider.onChange(function(value){
    // Change all the things you want
    // with 'value' as the new result
});