0

I am new with three.js and I trying to modify the position value of Z in Vector3 using Dat.Gui. This is my code, but I am not getting any luck.

var zhighpnts = gui.add(parameters, 'x').min(0).max(400).step(.01).name('High Nodes');
zhighpnts.onChange(function(jar){
        var a = new THREE.Vector3( 400, jar, 400 );
        var b = new THREE.Vector3( 0, 0, 0 );
        var c = new THREE.Vector3( -400, jar, -400 );
    });

Thanks!

RonMarcial
  • 37
  • 5
  • Your question is very confusing. You say about `z`-value, then you add a controller for `x` property of `parameters` and then in its `onChange` listener you set `y`-value of `THREE.Vector3()`. – prisoner849 Feb 13 '17 at 09:29

1 Answers1

1

Seems like you're trying to change vertices of a triangle.

Let's create one:

var geom = new THREE.Geometry();
geom.vertices.push(new THREE.Vector3(-10, 0, 0));
geom.vertices.push(new THREE.Vector3(0, 0, 0));
geom.vertices.push(new THREE.Vector3(10, 0, 0));
geom.faces.push(new THREE.Face3(0, 1, 2)); // CCW - it's important
var tri = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({color: "yellow"}));
scene.add(tri);

then we'll set an object of parameters

var parameters = {y:0};

and get vertices of our triangle:

var a = geom.vertices[geom.faces[0].a]; // face's properties a, b, c 
var b = geom.vertices[geom.faces[0].b]; // contain just indices of related vertices
var c = geom.vertices[geom.faces[0].c]; // thus we'll find them in array of vertices

the rest is not so difficult, so let's create our controller:

var gui = new dat.GUI();        // create instance of dat.GUI();
gui.add(parameters, "y", 0, 20) // add a controller for 'y' property of 'parameters' 
.name("High nodes")             // set controller's name
.onChange(                      // set controller's listener
  function(value) {
    a.y = value;                // we want to change y-value of 'a'
    c.y = value;                // we want to change y-value of 'c'
  }
);

and one more important thing, you have to set

geom.verticesNeedUpdate = true;

in your animation/render loop.

jsfiddle example. I hope it's helpful.

prisoner849
  • 16,894
  • 4
  • 34
  • 68