As a beginner in JavaScript, Three.js, and Computer Graphics, I have been assigned the task of drawing the Bezier Curve using the de-Casteljau Algorithm. I have written the following code, but it seems to not work properly when viewed in a browser. Can someone please help me identify the error? Thank you very much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Task 1 - Computer Graphics</title>
<style>
body {margin: 0;}
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 20;
camera.lookAt(new THREE.Vector3(0,0,0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee);
document.body.appendChild(renderer.domElement);
var objects = [], plane;
var points = new Array();
points.push(new THREE.Vector3(1, 4, 0));
points.push(new THREE.Vector3(2, 1, 0));
points.push(new THREE.Vector3(5, 2, 0));
points.push(new THREE.Vector3(6, 6, 0));
for(var i=0; i < points.length; i++){
var curvePointsGeo = new THREE.PlaneGeometry(0.5, 0.5, 1, 1);
var pointsMesh = new THREE.Mesh(curvePointsGeo, new THREE.MeshBasicMaterial({color: 0x000000}));
pointsMesh.position.x = points[i].x;
pointsMesh.position.y = points[i].y;
pointsMesh.position.z = points[i].z;
scene.add(pointsMesh);
objects.push(pointsMesh);
}
var line;
var tempPoints;
var temp;
animate();
function animate(){
casteljau();
render();
}
function casteljau(){
var curvePoints = new THREE.Geometry();
for(var i= 0.0; i<=1.0; i+=0.02){
temp = getCasteljauPoint(i);
curvePoints.vertices.push(temp);
}
line = new THREE.Line(curvePoints, new THREE.LineBasicMateria({color: 0xff0000}));
scene.add(line);
}
function getCasteljauPoint(t){
tempPoints = [];
var n = objects.length-1;
for(var i=0; i<=n; i++){
var p = new THREE.Vector2(objects[i].position.x, objects[i].position.y);
tempPoints.push(p);
}
for(var j = 1; j<=n; j++){
for(var k = 0; m <= (n-j); k++){
tempPoints[k].x = t*tempPoints[k].x + (1-t)*tempPoints[(k+1)].x;
tempPoints[k].y = t*tempPoints[k].y + (1-t)*tempPoints[(k+1)].y;
}
}
return new THREE.Vector3(tempPoints[0].x, tempPoints[0].y, 0);
}
</script>
</body>
</html>