hw3p helper

Bezier curve

by zx22516969

HTML

<div id="info">THREE.JS 2D
  <br>cubic Bezier curve
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var halfSize = 25;
var bezier, ctrlPolygon, ctrlPtMesh, ctrlPts;
var intersect;
var dots = new Array(10);
init();
animate();

function makeBezier() {

  var curve = new THREE.CubicBezierCurve3(ctrlPts[0], ctrlPts[1], ctrlPts[2], ctrlPts[3]);

  var geometry = new THREE.Geometry();
  geometry.vertices = curve.getSpacedPoints(26);
  var material = new THREE.LineBasicMaterial({
    color: 0xffff00
  });

  bezier = new THREE.Line(geometry, material);
  return bezier;
}

function makeCircle(r) {
  let geometry = new THREE.Geometry();
  let theta = Math.PI * 2 / 10;
  for (let i = 0; i <= 10; i++) {
    geometry.vertices.push(
      new THREE.Vector3(r * Math.cos(theta * i), r * Math.sin(theta * i), 0));
  }
  return new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: 0xffff00
  }));
}

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-halfSize, halfSize, halfSize, -halfSize, 10, 100);
  camera.position.z = 20;

  var gridHelper = new THREE.GridHelper(halfSize * 2, 10, 'red', 'white');
  scene.add(gridHelper);
  gridHelper.rotation.x = -Math.PI / 2;

  // initialize the bezier object
  bezier = null;
  ctrlPolygon = new THREE.Object3D();
  scene.add(ctrlPolygon);
  ctrlPtMesh = new THREE.Mesh(new THREE.PlaneGeometry(1.5, 1.5), new THREE.MeshBasicMaterial());
  ctrlPts = [];

  let circle = makeCircle(10);
  scene.add(circle);

  // for intersection point
  intersect = new THREE.Mesh(new THREE.CircleGeometry(1, 20, 20), new THREE.MeshBasicMaterial({
    color: 0xff0000
  }));
  scene.add(intersect);

  window.addEventListener('resize', onWindowResize, false);
  window.addEventListener('mousedown', onWindowMouseDown, false);
}

function...