Javascript 3d地球仪随头像旋转

我想要一个上面有头像的地球仪。基本上，这个想法是在地图上定位人物，当地球旋转时，化身应该旋转

我找到了一支笔，但问题是他们使用了名字而不是化身。我想用头像替换这些名字，并移除这些别针

任何形式的帮助或建议都是值得赞赏的

提前谢谢

const标记=[{
名称：“乌鲁鲁”，
拉丁语：-25，
龙：131
},
{
名称：“马丘比丘”，
拉丁语：-13，
长：-70
},
{
名称：“国王谷”，
拉脱维亚：25，
长：32
},
{
名称：“巨石阵”，
拉脱维亚：51，
长：-2
}];
常数$={
画布：空，
ctx:null，
vCenter:820，
滚动：{
纬度：0，
长：20
},
标记：[]，
时间：{
速度：16，
增量：0，
最后:0
},
拖动：{
开始：{x:0，y:0}，
警力:0,，
prevX:0，
IsDraging:错误
},
颜色：{
pushPinBase:“#969799”，
图钉：“#ed5c50”，
土地：“#fac648”、/“#ffc975”，
landShade:“#2c606e”，
海洋：“#2A7B96”
},
复杂形状：{
//把复杂的形状放在这里
}
}
常数lerp=（标准值、最小值、最大值）=>{
返回值（最大值-最小值）*标准值+最小值；
}
常数范数=（值、最小值、最大值）=>{
返回值（最小值）/（最大值-最小值）；
}
常量映射=（值，sourceMin，sourceMax，destMin，destMax）=>{
返回lerp（norm（value，sourceMin，sourceMax），destMin，destMax）；
}
恒德拉格莫夫=（e）=>{
如果（$.drag.IsDraging）{
设long=$.drag.start.long，
clientX=e.targetTouches？e.targetTouches[0]。clientX:e.clientX，
change=clientX-$.drag.start.x，
prevChange=clientX-$.drag.prevX，
canvasWidth=$.canvas.getBoundingClientRect（）.width；
long+=map（改变，0，画布宽度，0，200）；
而（长<0）{
长+=360；
} 
如果（prevChange>0&$.drag.force<0）{
$.drag.force=0；
}否则如果（prevChange<0&$.drag.force>0）{
$.drag.force=0；
}
$.drag.force+=prevChange*（600/画布宽度）；
$.drag.prevX=clientX；
$.scroll.long=Math.abs（长）%360；
}
}
常数dragStart=（e）=>{
如果（如目标触摸）{
e、 预防默认值（）；
$.drag.start={
x:e.targetTouches[0]。客户端，
y:e.targetTouches[0]。客户端，
long:$.scroll.long
};
}否则{
$.drag.start={
x:e.clientX，
y:e.clientY，
long:$.scroll.long
};
}
$.timing.speed=0；
$.drag.isDraging=true；
$.canvas.classList.add（'globe--dragging'）；
}
常数d=（e）=>{
如果（$.drag.IsDraging）{
$.timing.speed=地图（$.drag.force，0,220,0,40）；
$.drag.isDraging=false；
$.canvas.classList.remove（'globe--dragging'）；
}
}
常量getRadius=（纬度）=>{
设yPart=Math.PI*2，
半径=600，
框架=地图（纬度，90，-90,0,1.65）；
返回数学最大值（数学sin（yPart+frame）*半径，0）；
}
常数latLongSphere=（纬度、经度、半径）=>{
设x=900，
y=$.vCenter，
z=0；
lon=-lon；
设φ=（90 lat）*（数学π/180），
teta=（lon+180）*（数学PI/180）；
x-=-（半径*数学正弦（φ）*数学余弦（teta））；
y-=半径*数学cos（φ）；
z=半径*数学sin（φ）*数学sin（teta）；
返回{
x、 y，z
};
}
常量drawGlobe=（ctx，颜色）=>{
ctx.beginPath（）；
ctx.arc（900，$.vCenter，600,0,2*Math.PI）；
ctx.closePath（）；
ctx.fillStyle=颜色；
ctx.fill（）；
}
常量GetLandmassPath=（名称、半径、厚度）=>{
landmassBasic=大陆[名称]，
landmass=null，
第一个=正确，
旋转=假，
路径={
地面：新路径2D（），
顶部：新路径2D（），
章节：[]，
isVisible:false
},
节={
理由：[]，
顶部：[]
};
//复杂化
if（$.complexShapes[名称]）{
landmass=$.complexShapes[name]；
}否则{
landmass=复杂化（landmassBasic，1）；
$.complexShapes[名称]=地块；
}
for（设i=0；i{
设p=latLongSphere（point.lat+$.scroll.lat，point.long+$.scroll.long，radius），
p2=latLongSphere（point.lat+$.scroll.lat，point.long+$.scroll.long，半径+厚度）；
如果（！sectionIsVisible&&p.z>-200）{
sectionIsVisible=true；
}
第1节地面推({
x:p.x，
y:p.y，
z:p.z
});
第三节顶推({
x:p2.x，
y:p2.y，
z:p2.z
});
如果（点边&&！第一个）{
如果（部分可见）{
path.sections.push（Object.assign（{}，section））；
}
节={
地面：[{x:p.x，y:p.y，z:p.z}]，
top:[{x:p2.x，y:p2.y，z:p2.z}]
};
sectionIsVisible=false；
}
第一个=假；
如果（p.z>0）{
if（绘制曲线）{
drawCurve=false；
闭合曲线（路径、地面、曲线起点、p、半径）；
闭合曲线（路径、顶部、曲线起点、p2、半径+厚度）；
}否则{
路径。地面。线路至（p.x，p.y）；
path.top.lineTo（p2.x，p2.y）；
path.isVisible=true；
}
}否则{
//绘制曲线
如果（！drawCurve）{
drawCurve=true；
曲线起点={
x:p.x，
y:p.y，
z:p.z
};
}
}
});
//如果最后一点在曲线中
if（绘制曲线）{
drawCurve=false；
let point=landmass.slice（-1）[0]，
p=latLongSphere（poi