Question

我是three.js的新手，我尝试使用Dat.Gui修改Vector3中Z的位置值。这是我的代码，但我没有运气。

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 );
    });

谢谢！

Answer 1

好像你正在尝试更改三角形的顶点。

让我们创建一个：

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);

然后我们设置参数对象

var parameters = {y:0};

并获取三角形的顶点：

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

其余的并不是那么困难，所以让我们创建我们的控制器：

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'
  }
);

还有一件更重要的事情，你必须设置

geom.verticesNeedUpdate = true;

在动画/渲染循环中。

jsfiddle示例。我希望它有所帮助。

Three.js如何使用DAT.Gui控制Vector3值z的位置

1 个答案: