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

三角形の頂点を変更しようとしているようです。

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

と1より重要なことは、あなたのアニメーション/レンダリングループで

geom.verticesNeedUpdate = true; 

を設定する必要があります。

jsfiddle例。それが役に立ちそうです。