Skip to content

Instantly share code, notes, and snippets.

@sketchpunk
Created August 1, 2018 14:22
Show Gist options
  • Save sketchpunk/a9718566fbcd265dfcb106387cdf50e3 to your computer and use it in GitHub Desktop.
Save sketchpunk/a9718566fbcd265dfcb106387cdf50e3 to your computer and use it in GitHub Desktop.
Plot 3D Circle or Ecllipse onto a Plane in Javascript
/*
Equation Found On : https://math.stackexchange.com/questions/73237/parametric-equation-of-a-circle-in-3d-space
A Plane is defined with a point and direction, so vecCenter is the plane's point. Now you need to calculate two unit
vectors based on the plane's normal direction. With the normal direction being considered as forward, use cross product
to get the UP and Right/Left vector based on that forward vector. Using UP as Y and Right/Left as X, you can then use that
in the following functions to plot out points for a circle or ellipse in 3D space. Its basicly the values you need to create
rotation matrix but you only need up and right/left.
Example:
let vec = new Array(3);
planeCircle([0,0,0], [1,0,0], [0,1,0], Math.PI * 0.5, 1, vec);
*/
//X and Y axis need to be normalized vectors, 90 degrees of eachother.
function planeCircle(vecCenter, xAxis, yAxis, angle, radius, out){
let sin = Math.sin(angle),
cos = Math.cos(angle);
out[0] = vecCenter[0] + radius * cos * xAxis[0] + radius * sin * yAxis[0];
out[1] = vecCenter[1] + radius * cos * xAxis[1] + radius * sin * yAxis[1];
out[2] = vecCenter[2] + radius * cos * xAxis[2] + radius * sin * yAxis[2];
return out;
}
//X and Y axis need to be normalized vectors, 90 degrees of eachother.
function planeEllipse(vecCenter, xAxis, yAxis, angle, xRadius, yRadius, out){
let sin = Math.sin(angle),
cos = Math.cos(angle);
out[0] = vecCenter[0] + xRadius * cos * xAxis[0] + yRadius * sin * yAxis[0];
out[1] = vecCenter[1] + xRadius * cos * xAxis[1] + yRadius * sin * yAxis[1];
out[2] = vecCenter[2] + xRadius * cos * xAxis[2] + yRadius * sin * yAxis[2];
return out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment