Estoy tratando de encontrar la orientación de 3 puntos ordenados en el espacio. Estoy usando el algoritmo que encontré en este sitio. https://www.geeksforgeeks.org/orientation-3-ordered-points/

Quiero imprimir la orientación actualizada en la GUI, ya sea en sentido horario o antihorario cuando juego con las coordenadas mediante el control deslizante.

Puedes ver lo que hice hasta ahora en el siguiente violín.

https://jsfiddle.net/ewLkta45/48/

Entonces, para implementar esto, agregué esta función.

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); 

}

Pero no sé cómo actualizar un controlador de texto. Mi pregunta es ¿cómo puedo mostrar la orientación como CW o CCW en el controlador de temperatura cada vez que muevo el control deslizante?

0
Applik 17 oct. 2018 a las 01:53

2 respuestas

La mejor respuesta

Puede usar .listen() de un controlador para mostrar cambios de su valor:

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>
1
prisoner849 17 oct. 2018 a las 09:21

Creo que dat.GUI es una interfaz para cambiar variables, no para mostrar variables, hay muchas otras formas de mostrar el texto, p. <a>, <p> etiqueta HTML.

Puede escuchar eventos en los controladores 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';
});

Aquí está mi ejemplo.

1
Craig.Li 17 oct. 2018 a las 08:51