Basic 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( 5, 5, 0 )
);


// create curve mesh

const geometry = new THREE.BufferGeometry().setFromPoints( cubicBezierCurve.getPoints( 100 ) );

const material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
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( 20 );

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

// renderer

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x20252f );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

animate();

window.addEventListener( 'resize', onResize, false );

function onResize() {

	camera.aspect = window.innerWidth /...