hw3p helper

Bezier curve

by otorineko6790

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;

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) {// x^2 + y^2 = 10^2
	var n = 30
	let geometry = new THREE.Geometry();
  let theta = Math.PI*2/n;
  for (let i = 0; i <= n; 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);			//畫圓 r = 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);
 ...