JSFiddle - React, Tailwind, and code Playground

by spacorum

HTML

<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>
<p id="text">The orientation of points : CW </p>

JavaScript

var camera, scene, renderer;
var geometry, material, mesh;
var controller;
init();
animate();

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

  var temp = {
    orientation: 'Sam'
  };
  gui.add(temp, 'orientation');
}

function onFinishChange() {
  var text = document.getElementById('text');
  if (findOrientation() < 0) text.innerHTML = 'The orientation of points : CW';
  else text.innerHTML = 'The orientation of points : 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, 50),
    new THREE.Vector3(92, 68, -50),
    new THREE.Vector3(-105, 180, 290)
  ];
  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...