Question

我使用TreeJs对表单进行建模，我想在同一滑块中移动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
});

在three.js中，使用带有datGUI的一个滑块的多个参数

1 个答案: