Threejs Curves

by black strings

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset=utf-8>
    <title>Three.js Curves</title>
    <style>
      body {
        margin: 0;
      }

      canvas {
        width: 100%;
        height: 100%
      }

    </style>
   <script src="https://threejs.org/build/three.min.js"></script>
   <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  </head>

  <body>

  </body>

</html>

JavaScript

var controls, camera, scene, renderer;

init();

function init() {

  let width = window.innerWidth;
  let height = window.innerHeight;

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  // Green Dome shape

  function updateDomeShapeGeometry(shape){
    
  }
 
  var dShape;
  createDome(2);
	function createDome(cpt) {
  
    let shape = new THREE.Shape();

    shape.lineTo(0, 1);
    shape.quadraticCurveTo(1, cpt, 2, 1);
    shape.lineTo(2, 0);
    shape.lineTo(0, 0);

    let dGeo = new THREE.ShapeGeometry(shape);
    let dMat = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
    // wireframe: true
    });
    dShape = new THREE.Mesh(dGeo, dMat);
    
    // Tiny control point at top of dome
    let cpGeo = new THREE.CircleGeometry(0.04, 24);
    let cpMat = new THREE.MeshBasicMaterial({
      color: 0xffff00,
      // wireframe: true
      });
    let cp = new THREE.Mesh(cpGeo, cpMat)
    cp.position.set(1, (cpt + 1) / 2, 0);
    dShape.add(cp);
    cp.name = 'grabSpot';
    return dGeo;
  }
  // dShape.position.set(2, 1, 0);
  scene.add(dShape);
  console.log(dShape);

  // Red Ellipse
  let eCurve = new THREE.EllipseCurve(0, 0, 2.8, 0.6, 0, 2 * Math.PI);
  let pts = eCurve.getPoints(50);
  let eShape = new THREE.Shape(pts);

  let sGeo = new THREE.ShapeGeometry(eShape);
  let ellipse = new THREE.Mesh(sGeo, new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
  }));
  scene.add(ellipse);
  ellipse.position.setY(3);

	// white circle line
  let circ = new THREE.EllipseCurve(0,0,1,1,0,Math.PI * 2);
  let circGeo = new THREE.BufferGeometry();
  let circPoints = [];
  const division = 10;
  circ.getPoints(division).forEach(p => {
  	circPoints.push(new THREE.Vector3(p.x, p.y));
  });
 ...