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

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示例。我希望這有幫助。