Question

我正在尝试更改三角形的第一个顶点的x和y位置，我想通过调整datgui上的滑块在屏幕上动态更新它。下面是我的代码。你能指出我正确的方向吗？我真的很努力。当我在animate（）中分配变量时怎么办？

我认为问题出在这里。

function animate() {

requestAnimationFrame( animate );


params.xposv1=mesh.geometry.vertices[0].x; 
params.yposv1=mesh.geometry.vertices[0].y; 

mesh.geometry.verticesNeedUpdate = true;

    renderer.render( scene, camera );

}

Answer 1

您有一个全局变量geometry。在GUI中将其属性vertices与索引0一起使用。

您可以这样做：

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function addDatGui() {
  var gui = new dat.GUI();

  gui.add(geometry.vertices[0], 'x').min(-800).max(800).step(5);
  gui.add(geometry.vertices[0], 'y').min(-800).max(800).step(5);

}

function init() {

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 1000;

  scene = new THREE.Scene();

  geometry = new THREE.Geometry();
  geometry.vertices = [
    new THREE.Vector3(-94, -200, 0),
    new THREE.Vector3(92, 68, 0),
    new THREE.Vector3(-105, 180, 0)
  ];
  geometry.faces = [new THREE.Face3(0, 1, 2)];
  mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: 0xffff00,
    side: THREE.DoubleSide
  }));
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);
  renderer.render(scene, camera);
  addDatGui();

}

function animate() {

  requestAnimationFrame(animate);
  mesh.rotation.y += 0.01;

  mesh.geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);

}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>

使用滑块更改顶点坐标

1 个答案: