Detect Sharp Curves

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>

CSS

body {
	margin: 0;
}
canvas {
	display: block;
}

JavaScript

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 30;

const cubicBezierCurve = new THREE.CubicBezierCurve3(
	new THREE.Vector3( -10, -5, 0 ),
	new THREE.Vector3( -5, 10, 0 ),
	new THREE.Vector3( 0, -10, 0 ),
	new THREE.Vector3( 15, 5, 0 )
);


// create curve mesh
const numOfPoints = 10;
 console.log(curveHasSharpCorners(cubicBezierCurve.getPoints( numOfPoints ), .95));
const geometry = new THREE.BufferGeometry().setFromPoints( cubicBezierCurve.getPoints( 100 ) );

const material = new THREE.LineBasicMaterial( { color : 0xffff00 } );
const curveObject = new THREE.Line( geometry, material );
scene.add( curveObject );

// visualize spaced points 

const sphereGeomtry = new THREE.SphereBufferGeometry( 0.1 );
const sphereMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

const spacedPoints = cubicBezierCurve.getPoints( numOfPoints );

for ( let point of spacedPoints ) {
	const helper = new THREE.Mesh( sphereGeomtry, sphereMaterial );
	helper.position.copy( point );
	scene.add( helper );
}

elipseCurve();

function elipseCurve(){
	const curve = new THREE.EllipseCurve(
    0,  0,            // ax, aY
    10, 10,           // xRadius, yRadius
    0,  Math.PI,  // aStartAngle, aEndAngle
    false,            // aClockwise
    0                 // aRotation
  );

  const points = curve.getPoints( 18 );
  const geometry = new THREE.BufferGeometry().setFromPoints( points );

  const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

  // Create the final object to add to the scene
  const ellipse = new THREE.Line( geometry, material );
  scene.add(ellipse);
}

function curveHasSharpCorners(point3ds, epsilon = .5) {
	let isSharp = false;
	if(point3ds && point3ds.length) {
  	for(let i=0; i<point3ds.length; i+=4) {
    
    	const p1 = point3ds[i];
      const p2 = point3ds[i+1];
      const p3 = point3ds[i+2];
    	const p4 = point3ds[i+3];
     ...