Javascript 用三角形绘制皮拉米克斯

我正在尝试编写一个Pyraminx，它是一个由多个三角形组成的四面体。 我这样做一定不是很准确。这是我的代码，也可以在

问题是我正在手工编写

facesVectors

坐标。黄色和蓝色的那一面似乎还可以。但是设置红色和绿色三角形的位置很困难

有简单的方法吗

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，内宽/内高，1100）；
相机。位置。设置（-2，1，3）；
var renderer=new THREE.WebGLRenderer（）；
设置大小（innerWidth，innerHeight）；
document.body.appendChild（renderer.doElement）；
let controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
//正三角形
常数边长=1
常数x=0
常数y=0
常量几何体=新的三个。几何体（）
几何。顶点。推（新的三个向量3（x，（数学sqrt（3）/2*边长）-（边长/2），0））
几何。顶点。推（新的三个向量3（x-（边长/2），y-（边长/2），0））
几何。顶点。推（新的三个向量3（x+（边长/2），y-（边长/2），0））
几何学.面.推（新的三面3（0，1，2））
常量面颜色=[
0xFFFF00，//黄色
0xFF0000，//红色
0x0000FF，//蓝色
0x008000//绿色
]
//36个三角形组成了皮拉米克斯
//数字是面颜色的索引
常数位置=[
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 3, 1, 1, 1, 2, 2, 2, 3, 3, 3, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3
]
//构成四面体的每个三角形的向量
常量facesVectors=[
[0, 0, -1.5],
[-0.52, 0, -0.6],
[0, 0, -0.48],
[0.52, 0, -0.6],
[-1.04, 0, 0.3],
[-0.52, 0, 0.42],
[0, 0, 0.3],
[0.52, 0, 0.42],
[1.04, 0, 0.3],
[-1.2, -0.16, 0.2],
[-1.04, -0.45, 0.55],
[-0.52, -0.34, 0.62],
[0, -0.45, 0.55],
[0.52, -0.34, 0.62],
[1.04, -0.45, 0.55],
[1.2, -0.16, 0.15],
[-0.6, -0.16, -0.7],
[-0.9, -0.3, -0.1],
[-0.5, -0.5, -0.5]
]
for（设i=0；i{
渲染器。渲染（场景、摄影机）；
});

a的4个角点是：

设s_8_9=Math.sqrt（8/9），s_2_9=Math.sqrt（2/9），s_2_3=Math.sqrt（2/3）；
设v=[
新的三矢量3（0,0,1），
新三矢量3（s_8_9,0，-1/3），
新的三矢量3（-s_2_9，s_2_3，-1/3），
新三矢量3（-s_2_9，-s_2_3，-1/3）
];

用于计算边上的点：

let pointOnEdge=（pt1，pt2，t）=>new THREE.Vector3（）.lerpVectors（pt1，pt2，t）；

以及三角形面的向内偏移点：

let computeOffsetPts=（pts，d）=>{
让offsetPts=[]；
对于（设i=0；i

使用此点构造网格。e、 g:


var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，内宽/内高，1100）；
相机。位置。设置（-2，1，3）；
var renderer=new THREE.WebGLRenderer（）；
设置大小（innerWidth，innerHeight）；
document.body.appendChild（renderer.doElement）；
let controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
常量面颜色=[
0xFFFF00，//黄色
0xFF0000，//红色
0x0000FF，//蓝色
0x008000//绿色
]
设s_8_9=Math.sqrt（8/9），s_2_9=Math.sqrt（2/9），s_2_3=Math.sqrt（2/3）；
设v=[
新的三矢量3（0,0,1），
新三矢量3（s_8_9,0，-1/3），
新的三矢量3（-s_2_9，s_2_3，-1/3），
新三矢量3（-s_2_9，-s_2_3，-1/3）
];
设面=[[0,1,2]，[0,2,3]，[0,3,1]，[1,3,2]]
设pointOnEdge=（pt1，pt2，t）=>new THREE.Vector3（）.lerpVectors（pt1，pt2，t）；
让computeOffsetPts=（pts，d）=>{
让offsetPts=[]；
对于（设i=0；i{
设innerPts=computeOffsetPts（pts，d）；
let material=new THREE.MeshBasicMaterial（{color:color}）
让几何体=新的三个。几何体（）；
geometry.Vertexs.push（…innerPts）；
几何.faces.push（新的三个面3（0,1,2））；
返回新的三个网格（几何体、材质）；
}
常数d=0.05；
for（设i=0；i<4；++i）{
让颜色=脸颜色[i]；
设pts=[v[faces[i][0]、v[faces[i][1]、v[faces[i][2]；
设centerPt=new THREE.Vector3（）.addVectors（pts[0]，pts[1]）.add（pts[2]）.divideScalar（3）；
设六边形=[]；
对于（设j=0；j<3；++j）{
六角推（点边缘（点[j]，点[（j+1）%3]，1/3），点边缘（点[j]，点[（j+1）%3]，2/3））；
}
对于（设j=0；j<3；++j）