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

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;

在你的 animation/render 循环中。

jsfiddle 例子。希望对你有帮助。

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

Three.js How to control position of Vector3 value z using DAT.Gui

three.js

dat.gui