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>