GUI 上 3 个顶点的方向

Question

我试图在 space 中找到 3 个有序点的方向。我正在使用从该站点找到的算法。 https://www.geeksforgeeks.org/orientation-3-ordered-points/

当我通过滑块玩坐标时，我想打印出在 GUI 上更新的方向，无论是顺时针还是逆时针。

您可以在下面查看我到目前为止所做的事情 fiddle。

所以为了实现这个，我添加了这个功能。

function findOrientation(){

var Orientation;

var x1=geometry.vertices[0].x;
var y1=geometry.vertices[0].y;
var x2=geometry.vertices[1].x;
var y2=geometry.vertices[1].y;
var x3=geometry.vertices[2].x;
var y3=geometry.vertices[2].y;

Orientation=(y2 - y1)*(x3 - x2) - (y3 - y2)*(x2 - x1); 

}

但我不知道如何刷新文本控制器。我的问题是，每当我移动滑块时，如何在温度控制器上将方向显示为 CW 或 CCW？

Answer 1

我认为dat.GUI是一个改变变量的界面而不是显示变量的界面，还有很多其他方式来显示文本，例如<a>,<p> HTML 标签。

您可以在 dat.GUI 个控制器上监听事件：

gui.add(geometry.vertices[0], 'x').name("v1.x").min(-800).max(800).step(5).onChange(function() {
    var text = document.getElementById('text');
    if (findOrientation() < 0) text.innerHTML = 'The orientation of points : CW';
    else text.innerHTML = 'The orientation of points : CCW';
});

这是我的example。

Answer 2

您可以使用控制器的 .listen() 来显示其值的变化：

var camera, scene, renderer;
var geometry, material, mesh;
var controller;
var orientation = {
  value: 'Sam'
};

init();
animate();

function findOrientation() {

  let Orientation = 0;

  var x1 = geometry.vertices[0].x;
  var y1 = geometry.vertices[0].y;
  var x2 = geometry.vertices[1].x;
  var y2 = geometry.vertices[1].y;
  var x3 = geometry.vertices[2].x;
  var y3 = geometry.vertices[2].y;

  Orientation = (y2 - y1) * (x3 - x2) - (y3 - y2) * (x2 - x1);
  return Orientation;
}

function addDatGui() {
  var gui = new dat.GUI();

  gui.add(geometry.vertices[0], 'x').name("v1.x").min(-800).max(800).step(5).onChange(onFinishChange);
  gui.add(geometry.vertices[0], 'y').name("v1.y").min(-800).max(800).step(5).onChange(onFinishChange);
  gui.add(geometry.vertices[1], 'x').name("v2.x").min(-800).max(800).step(5).onChange(onFinishChange);
  gui.add(geometry.vertices[1], 'y').name("v2.y").min(-800).max(800).step(5).onChange(onFinishChange);
  gui.add(geometry.vertices[2], 'x').name("v3.x").min(-800).max(800).step(5).onChange(onFinishChange);
  gui.add(geometry.vertices[2], 'y').name("v3.y").min(-800).max(800).step(5).onChange(onFinishChange);


  gui.add(orientation, 'value').name("orientation").listen();
}

function onFinishChange() {
  if (findOrientation() < 0) {
    orientation.value = 'CW';
  } else {
    orientation.value = 'CCW';
  }
}

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,
    wireframe: true
  }));
  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.09;
  mesh.geometry.verticesNeedUpdate = true;
  //if(resultOfOrientation<0) text.val='cw';
  // else text.val='wc';

  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>

GUI 上 3 个顶点的方向

Orientation of 3 vertices on GUI

javascript

three.js

dat.gui