Вот способ, которым вы можете нарисовать треугольник Безье (фрагмент ниже) - алгоритм в классе Geometry.Количество треугольников на одной стороне треугольника, которое вы установили в constructor.В коде я сделал жесткое разделение между алгоритмом / вычислениями (Geometry класс) и чертежным кодом (Draw класс).
Для треугольника Безье нам нужно использовать 10 контрольных точек (9 для ребер и одна для "плоскость "), как показано на рисунке ниже (src здесь ):
В этом коде мы не используем нормали,и b имена точек изменены на p (например, b003 на p003).Мы используем следующую формулу (для кубических треугольников Безье n = 3 )
Где p_ijk является контролемточка (для n = 3 выше сумма имеет 10 элементов, поэтому у нас есть 10 контрольных точек), и где B ^ n_ijk (r, s, t) - полиномы Бернштейна, определенные для i, j, k> = 0 и i + j + k= n
или 0 в другом случае.Область r, s, t в барицентрических координатах (где r, s, t - действительные числа из [0, 1] и r + s + t = 1) и где r = (r = 1, s = t = 0), s = (s = 1, r = t = 0), t = (t = 1, r = s = 0) выглядит следующим образом(черные точки - мы делим каждую сторону треугольника на 5 частей - но мы можем изменить ее на любое число)
Мы рассчитываем это регулярное положение длячерные доменные точки в методе barycentricCoords(n) и мы определяем, какие точки создают какие треугольники в методе genTrianglesIndexes(n) в Geometry классе.Однако вы можете изменить положение точек и их плотность на любой (внутри треугольника), чтобы получить другое деление поверхности на треугольник.Ниже приведен фрагмент, который показывает домен в 2D
let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()
cr=[255,0,0,255];
cg=[0,255,0,255];
cb=[0,0,255,255];
w=400;
h=400;
const p1=[0,h-1];
const p2=[w-1,h-1];
const p3=[w/2,0];
mainTriangle=[p1,p2,p3];
//mainTriangle.map(p => pp(...p,...cr));
let n=5;
let points=[];
function calcPoint(p1,p2,p3,r,s,t) {
const px=p1[0]*r + p2[0]*s + p3[0]*t;
const py=p1[1]*r + p2[1]*s + p3[1]*t;
return [px,py];
}
// barycentric coordinates r,s,t of point in triangle
// the points given from triangle bottom to top line by line
// first line has n+1 pojnts, second has n, third n-1
// coordinates has property r+s+t=1
function barycentricCoords(n) {
let rst=[];
for(let i=0; i<=n; i++) for(let j=0; j<=n-i; j++) {
s=(j/n);
t=(i/n);
r=1-s-t;
rst.push([r,s,t]);
}
return rst;
}
// Procedure calc indexes for each triangle from
// points list (in format returned by barycentricCoords(n) )
function genTrianglesIndexes(n) {
let st=0;
let m=n;
let triangles=[];
for(let j=n; j>0; j--) {
for(let i=0; i<m; i++) {
triangles.push([st+i, st+i+1, st+m+i+1]);
if(i<m-1) triangles.push([st+i+1, st+m+i+2, st+m+i+1 ]);
}
m--;
st+=j+1;
}
return triangles;
}
function drawLine(p1,p2,c) {
let n=Math.max(Math.abs(p1[0]-p2[0]),Math.abs(p1[1]-p2[1]))/2;
for(let i=0; i<=n; i++) {
let s=i/n;
let x=p1[0]*s + p2[0]*(1-s);
let y=p1[1]*s + p2[1]*(1-s);
pp(x,y,...c);
}
}
function drawTriangle(p1,p2,p3,c) {
drawLine(p1,p2,c);
drawLine(p2,p3,c);
drawLine(p3,p1,c);
}
// Bernstein Polynomial, i+j+k=n
function bp(n,i,j,k, r,s,t) {
const f=x=>x?f(x-1)*x:1 // number fractional f(4)=1*2*3*4=24
return r**i * s**j * t**k * f(n) / (f(i)*f(j)*f(k));
}
//drawTriangle(...mainTriangle,cr); // draw main triangle
let bar=barycentricCoords(n); // each domain point barycentric coordinates
let ti=genTrianglesIndexes(n); // indexes in bar for each triangle
// triangles calculated to cartesian coordinate system
let triangles = ti.map(tr=> tr.map(x=>calcPoint(...mainTriangle,...bar[x]) ) );
triangles.map(t => drawTriangle(...t, cg));
// domain points calculated to cartesian coordinate system (for draw)
let dp = bar.map(x=> calcPoint(...mainTriangle,...x) );
// draw black dots (4 pixels for each dot)
dp.map(x=> pp(x[0],x[1]) )
dp.map(x=> pp(x[0],x[1]-1) )
dp.map(x=> pp(x[0]-1,x[1]) )
dp.map(x=> pp(x[0]-1,x[1]-1) )
<canvas class="myCanvas" width=400 height=400 style="background: white"></canvas>
Ниже приведен последний фрагмент с кубическим треугольником Безье 3D (алгоритм начинается в методе genTrianglesForCubicBezierTriangle(n, controlPoints) в Geometry классе) - (предупреждение:странно, но в SO фрагментах после первого запуска вы НЕ увидите линий, и вам нужно перезагрузить страницу и запустить ее снова, чтобы увидеть треугольники-строки)
///////////////////////////////////////////////////////
// THIS PART/CLASS IS FOR ALGORITHMS AND CALCULATIONS
///////////////////////////////////////////////////////
class Geometry {
constructor() { this.init(); }
init(n) {
this.pts = [
{ x:-16, y: -8, z:0, color:0xcc0000 }, // p003 RED
{ x:8, y:-12, z:0, color:0x888888 }, // p201
{ x:-8, y:-12, z:0, color:0x999999 }, // p102
{ x:16, y:-8, z:0, color:0x00cc00 }, // p300 GREEN
{ x:12, y:-6, z:-8, color:0x777777 }, // p210
{ x:8, y:6, z:-8, color:0x666666 }, // p120
{ x:0, y:12, z:0, color:0x0000cc }, // p030 BLUE
{ x:-8, y:6, z:-8, color:0x555555 }, // p021
{ x:-12, y:-6, z:-8, color:0x444444 }, // p012
{ x:0, y:0, z:8, color:0xffff00 }, // p111 YELLOW (plane control point)
];
this.mainTriangle = [this.pts[0],this.pts[3],this.pts[6]];
this.bezierCurvesPoints = [
[ this.pts[0], this.pts[2], this.pts[1], this.pts[3] ],
[ this.pts[3], this.pts[4], this.pts[5], this.pts[6] ],
[ this.pts[6], this.pts[7], this.pts[8], this.pts[0] ]
];
//this.triangles = [
// { points: [this.pts[0], this.pts[1], this.pts[2]], color: null }, // wireframe
// { points: [this.pts[1], this.pts[2], this.pts[3]], color: 0xffff00 } // yellow
//]
this.triangles = this.genTrianglesForCubicBezierTriangle(25, this.pts);
}
// n = number of triangles per triangle side
genTrianglesForCubicBezierTriangle(n, controlPoints) {
let bar= this.barycentricCoords(n); // domain in barycentric coordinats
let ti = this.genTrianglesIndexes(n); // indexes of triangles (in bar array)
let val= bar.map(x => this.calcCubicBezierTriangleValue(controlPoints,...x)); // Calc Bezier triangle vertex for each domain (bar) point
let tv= ti.map(tr=> tr.map(x=>val[x]) ); // generate triangles using their indexes (ti) and val
return tv.map(t=> ({ points: t, color: null}) ); // map triangles to proper format (color=null gives wireframe)
// Generate domain triangles
//let td= ti.map(tr=> tr.map(x=>this.calcPointFromBar(...this.mainTriangle,...bar[x]) ) );
//this.trianglesDomain = td.map(t=> ({ points: t, color: null}) );
}
// more: https://www.mdpi.com/2073-8994/8/3/13/pdf
// Bézier Triangles with G2 Continuity across Boundaries
// Chang-Ki Lee, Hae-Do Hwang and Seung-Hyun Yoon
calcCubicBezierTriangleValue(controlPoints, r,s,t ) {
let p = controlPoints, b=[];
b[0]= this.bp(0,0,3,r,s,t); // p[0]=p003
b[1]= this.bp(2,0,1,r,s,t); // p[1]=p201
b[2]= this.bp(1,0,2,r,s,t); // p[2]=p102
b[3]= this.bp(3,0,0,r,s,t); // p[3]=p300
b[4]= this.bp(2,1,0,r,s,t); // p[4]=p210
b[5]= this.bp(1,2,0,r,s,t); // p[5]=p120
b[6]= this.bp(0,3,0,r,s,t); // p[6]=p030
b[7]= this.bp(0,2,1,r,s,t); // p[7]=p021
b[8]= this.bp(0,1,2,r,s,t); // p[8]=p012
b[9]= this.bp(1,1,1,r,s,t); // p[9]=p111
let x=0, y=0, z=0;
for(let i=0; i<=9; i++) {
x+=p[i].x*b[i];
y+=p[i].y*b[i];
z+=p[i].z*b[i];
}
return { x:x, y:y, z:z };
}
// Bernstein Polynomial degree n, i+j+k=n
bp(i,j,k, r,s,t, n=3) {
const f=x=>x?f(x-1)*x:1 // number fractional f(4)=1*2*3*4=24
return r**i * s**j * t**k * f(n) / (f(i)*f(j)*f(k));
}
coordArrToObj(p) { return { x:p[0], y:p[1], z:p[2] } }
// Calc cartesian point from barycentric coords system
calcPointFromBar(p1,p2,p3,r,s,t) {
const px=p1.x*r + p2.x*s + p3.x*t;
const py=p1.y*r + p2.y*s + p3.y*t;
const pz=p1.z*r + p2.z*s + p3.z*t;
return { x:px, y:py, z:pz};
}
// barycentric coordinates r,s,t of point in triangle
// the points given from triangle bottom to top line by line
// first line has n+1 pojnts, second has n, third n-1
// coordinates has property r+s+t=1
barycentricCoords(n) {
let rst=[];
for(let i=0; i<=n; i++) for(let j=0; j<=n-i; j++) {
let s=(j/n);
let t=(i/n);
let r=1-s-t;
rst.push([r,s,t]);
}
return rst;
}
// Procedure calc indexes for each triangle from
// points list (in format returned by barycentricCoords(n) )
genTrianglesIndexes(n) {
let st=0;
let m=n;
let triangles=[];
for(let j=n; j>0; j--) {
for(let i=0; i<m; i++) {
triangles.push([st+i, st+i+1, st+m+i+1]);
if(i<m-1) triangles.push([st+i+1, st+m+i+2, st+m+i+1 ]);
}
m--;
st+=j+1;
}
return triangles;
}
// This procedures are interface for Draw class
getPoints() { return this.pts }
getTriangles() { return this.triangles }
getBezierCurves() { return this.bezierCurvesPoints; }
}
///////////////////////////////////////////////
// THIS PART IS FOR DRAWING
///////////////////////////////////////////////
// init tree js and draw geometry objects
class Draw {
constructor(geometry) { this.init(geometry); }
initGeom() {
this.geometry.getPoints().forEach(p=> this.createPoint(p));
this.geometry.getTriangles().forEach(t=> this.createTriangle(t));
this.geometry.getBezierCurves().forEach(c=> this.createEdge(...c));
}
init(geometry) {
this.geometry = geometry;
this.W = 480,
this.H = 400,
this.DISTANCE = 100 ;
this.PI = Math.PI,
this.renderer = new THREE.WebGLRenderer({
canvas : document.querySelector('canvas'),
antialias : true,
alpha : true
}),
this.camera = new THREE.PerspectiveCamera(25, this.W/this.H),
this.scene = new THREE.Scene(),
this.center = new THREE.Vector3(0, 0, 0),
this.pts = [] ;
this.renderer.setClearColor(0x000000, 0) ;
this.renderer.setSize(this.W, this.H) ;
// camera.position.set(-48, 32, 80) ;
this.camera.position.set(0, 0, this.DISTANCE) ;
this.camera.lookAt(this.center) ;
this.initGeom();
this.azimut = 0;
this.pitch = 90;
this.isDown = false;
this.prevEv = null;
this.renderer.domElement.onmousedown = e => this.down(e) ;
window.onmousemove = e => this.move(e) ;
window.onmouseup = e => this.up(e) ;
this.renderer.render(this.scene, this.camera) ;
}
createPoint(p) {
let {x, y, z, color} = p;
let pt = new THREE.Mesh(
new THREE.SphereGeometry(1, 10, 10),
new THREE.MeshBasicMaterial({ color })
) ;
pt.position.set(x, y, z) ;
pt.x = x ;
pt.y = y ;
pt.z = z ;
this.pts.push(pt) ;
this.scene.add(pt) ;
}
createTriangle(t) {
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(t.points[0].x, t.points[0].y, t.points[0].z);
var v2 = new THREE.Vector3(t.points[1].x, t.points[1].y, t.points[1].z);
var v3 = new THREE.Vector3(t.points[2].x, t.points[2].y, t.points[2].z);
geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);
let material = new THREE.MeshNormalMaterial({wireframe: true,})
if(t.color != null) material = new THREE.MeshBasicMaterial( {
color: t.color,
side: THREE.DoubleSide,
} );
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();
var mesh= new THREE.Mesh( geom, material);
this.scene.add(mesh) ;
}
createEdge(pt1, pt2, pt3, pt4) {
let curve = new THREE.CubicBezierCurve3(
new THREE.Vector3(pt1.x, pt1.y, pt1.z),
new THREE.Vector3(pt2.x, pt2.y, pt2.z),
new THREE.Vector3(pt3.x, pt3.y, pt3.z),
new THREE.Vector3(pt4.x, pt4.y, pt4.z),
),
mesh = new THREE.Mesh(
new THREE.TubeGeometry(curve, 8, 0.5, 8, false),
new THREE.MeshBasicMaterial({
color : 0x203040
})
) ;
this.scene.add(mesh) ;
}
down(de) {
this.prevEv = de ;
this.isDown = true ;
}
move(me) {
if (!this.isDown) return ;
this.azimut -= (me.clientX - this.prevEv.clientX) * 0.5 ;
this.azimut %= 360 ;
if (this.azimut < 0) this.azimut = 360 - this.azimut ;
this.pitch -= (me.clientY - this.prevEv.clientY) * 0.5 ;
if (this.pitch < 1) this.pitch = 1 ;
if (this.pitch > 180) this.pitch = 180 ;
this.prevEv = me ;
let theta = this.pitch / 180 * this.PI,
phi = this.azimut / 180 * this.PI,
radius = this.DISTANCE ;
this.camera.position.set(
radius * Math.sin(theta) * Math.sin(phi),
radius * Math.cos(theta),
radius * Math.sin(theta) * Math.cos(phi),
) ;
this.camera.lookAt(this.center) ;
this.renderer.render(this.scene, this.camera) ;
}
up(ue) {
this.isDown = false ;
}
}
// SYSTEM SET UP
let geom= new Geometry();
let draw = new Draw(geom);
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #1c2228;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<canvas></canvas>
Версия Fiddle здесь .Я помещаю информацию в комментарии, но алгоритм сложен, и если у вас есть вопросы - задайте их в качестве комментариев - я отвечу.