Arrangement of 3 points on the graphical user interface

Seeking the orientation of 3 ordered points in space using an algorithm discovered on this site: https://www.geeksforgeeks.org/orientation-3-ordered-points/

Desiring to display the orientation on GUI as Clockwise or CounterClockwise while adjusting coordinates with a slider.

Check out the progress so far in the fiddle link below.

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

Added a function to implement this:

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

}

Struggling with how to update a text controller. Querying how to show orientation as CW or CCW on temp controller while moving the slider?

Answer №1

To display changes of a controller's value, you can utilize the .listen() method:

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>

Answer №2

In my opinion, dat.GUI serves as an interface for altering variables rather than displaying them. There are numerous alternative methods for displaying text, such as using the <a> or <p> HTML tags.

Listeners can be added to dat.GUI controllers for event handling:

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

Check out my sample.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alerting old session data following an AJAX request

After making an AJAX call that updates a $_SESSION variable, my <script> is supposed to echo out the new variable. However, it keeps alerting the old data even though the data is reaching the .php page and being stored in the session. I've attem ...

Designing personalized buttons on React Google Maps

Currently tackling a personal project that involves react-google-maps, but I'm struggling to display custom buttons on the map. My goal is to create a menu button that hovers over the map, similar to the search bar in the top left corner of Google Map ...

Typescript - unexpected behavior when using imported JavaScript types:

I am struggling with headaches trying to integrate an automatically generated JavaScript library into TypeScript... I have packaged the JavaScript library and d.ts file into an npm package, installed the npm package, and the typings modules in the TypeScr ...

How can I change the color of a cube in Three.js?

I'm currently working on developing a basic 3D game using three.js. My goal is to create colored cubes, but I'm encountering an issue where all the cubes are displaying the same color. My cube creation code looks like this: var geometry = new ...

Tips for effectively utilizing Vuelidate to display errors selectively after the user has completed input:

I have implemented a form using Bootstrap-Vue with some Vuelidation code applied to it. <b-form @submit.prevent="onSubmit"> <input type="hidden" name="_token" :value="csrf" /> <transition-group name="fade"> <b-form ...

Tips on preventing the need for null or undefined checks in JS/Typescript singletons that have an initialization function

Is there a way to streamline the process of handling props in an Object literal that is dynamically initialized only once? I'm looking for a pattern that would eliminate the need for repetitive null/undefined checks and throw errors when certain metho ...

Setting the Date in Angular.js: A Step-by-Step Guide

Make maxDate selectable as today at the latest (past days are clickable but not tomorrow). The range between minDay and maxDay should not exceed 365 days, allowing for fewer days to be selected. $scope.dateOptions = { formatYear: " ...

Executing API request from local server for production environment

I recently deployed my application to Heroku using npm run build. However, I encountered an issue where the API calls made in Heroku production are pointing to my localhost. Can anyone provide guidance on how to resolve this? api_axios.js const axios = r ...

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

Exploring the Power of Multiple FindOne Queries in MongoDB

I have been working on expanding the data fields returned by our API. Currently, the API retrieves student information using the find method, and also includes some project details by retrieving the student info and using findOne to obtain information abou ...

Currently, my nextjs project is up and running smoothly in vscode. When I execute `npm run dev` in the terminal, everything seems to be working fine. However

Whenever I run npm run dev in my terminal to start a nextJS project, it shows the following output: > [email protected] dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 but when I try to access it in the browser, ...

Error Encountered with Nested Angular Material Tabs

Is there a way to prevent changes made to the upper tab in md-align-tabs attribute from affecting the inner tab when one tab is nested inside another using md-tabs? If so, how can I achieve this? <md-content layout="column" layout-fill> <md-ta ...

Is it possible to view the list of errors displayed by vscode when opening a JS file exclusively through the terminal?

Is there a default configuration file that vscode uses to display errors and warnings? I want to identify all issues in my JavaScript project. I don't have any jsconfig.json or tsconfig.json files, only using the //@ts-check directive in some files. ...

Update the href attribute with values from the form fields

My current project involves creating a form with 5 input fields: Service type Number of days Number of children Number of adults I want to dynamically change the value of a button based on these variables using JavaScript. Here is my code so far: JS ...

Server-side script for communicating with client-side JavaScript applications

Currently utilizing a JavaScript library that uses a JSON file to display content on the screen in an interactive manner. (::Using D3JS Library) While working with clients, it is easy to delete, edit, and create nodes which are then updated in the JSON fi ...

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

Executing a controller method in Grails using JavaScript

When working in a Grails view, I find myself needing to execute a JavaScript method to retrieve certain information. To achieve this, I have set up a submit action as shown below: <input type="submit" name="submit" class="submit action-button" value="G ...

Exporting the interface for the state of the redux store

After setting up a redux module, I have organized the following files: //state.tsx export default interface State { readonly user: any; readonly isLoggedIn: boolean; } //types.tsx export default { REQUEST: 'authentication/REQUEST', SUC ...

Arrange all absolute divs equidistant from each other

I'm struggling with positioning multiple absolute divs inside a relative container using the CSS 'left' property. I want these inner divs to be evenly spaced regardless of how many there are, without setting fixed values for each. Currently ...

Encountering a problem when trying to submit data on a form in Prisma Nextjs due to an

As I construct an editing feature for objects within my postgres database, I am encountering an issue related to form submission. Specifically, when attempting to update fields defined in the schema, I am receiving an error message: client_fetch_error unde ...