Orientation of 3 vertices on GUI

Question

I am trying to find the orientation of 3 ordered points in space. I am using the algorithm that I found from this site. https://www.geeksforgeeks.org/orientation-3-ordered-points/

I want to print out the orientation updated on GUI whether it is Clockwise or CounterClockwise when I play with coordinates by slider.

You can view what I did so far in below fiddle.

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

So to implement this, I added this function.

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

}

But I do not know how to refresh a text controller. My question is how can I display orientation as CW or CCW on temp controller whenever I move slider?

score 1 · Answer 1 · answered Oct 17 '18 at 08:51

I think dat.GUI is a interface for changing variables not for showing variables, there are many other ways to show the text, e.g. <a>,<p> HTML tag.

You can listen events on dat.GUI controllers:

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

Here is my example.

thank you for the answer. This is a great way to show something on the screen. — Applik, Oct 17 '18 at 14:05

score 1 · Accepted Answer · answered Oct 17 '18 at 09:21

You can use .listen() of a controller to display changes of its value:

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>

@Applik You're welcome :) Mark the answer as accepted if it solved your problem. — prisoner849, Oct 17 '18 at 14:12

Orientation of 3 vertices on GUI

2 Answers2