1. 首页
  2. three.js

three.js使3D地球旋转,以及CSS2D对象

three.jsn我有一个3D地球,上面添加了特定位置的标记/标签。我想让我的地球旋转,它确实如此。但是,所有CSS2D对象(标记/标签)都会随着地球旋转而开始晃动。我猜这是由于物体被添加到地球的顶部,而它们实际上并不是地球旋转的一部分?这是我的代码:n(函数($){$(文档).ready(函数(){/*在这里更新/添加站点值,它们将显示在地球视图==new=new)3.网眼布(星几何,星材料);scene.add(starField);//创建组以容纳sphere=new三、基本材料({map:texture//overdraw:0.5,//transparent:true,//opacity:0.9});//使用球体===状态==“FMC”创建新网格绿色“:状态==“PMC”?”黄色“:“红色”;//创建要附加到每个站点的标签“s=”BU“| | name=”COD“=”FGA“| | name==”PAFB“| | name=”MDIOC“=======函数(){警报(“单击站点!”)};var==“BO”){siteDot.position.set(站点位置[0]-1,站点位置[1]+1,数学abs(sitePosition[2]);}else如果(name==“CMD”){siteDot.position.set(站点位置[0]-1,站点位置[1]-1,数学abs(sitePosition[2]);}如果(name==“PAFB”){siteDot.position.set(站点位置[0]+1,站点位置[1]-6,数学abs(位置[2]);}否则如果(名称=“MDIOC”){siteDot.position.set(站点位置[0]+5,站点位置[1]+4,数学abs(sitePosition[2]);}else如果(name==“BU”){siteDot.position.set(站点位置[0]+2,站点位置[1]+3,数学abs(sitePosition[2]);}else{siteDot.position.set(位置[0],=0;document.body.appendChild(Labely.DomeElement);//对于旋转和鼠标=-((半径)*数学·辛(phi)>n}(jQuery));n嗯,代码看起来还不错。请尝试通过以下现场演示重现该问题:https://jsfiddle.net/56df7mxs/146n我使用了官方示例中的代码。只需应用您的更改,单击“保存”,然后在本主题中共享更新的小提琴。n查看您刚刚发布的示例中的月亮标签,它也会有点摇晃。也许只是文字震动了?标签下面的点对我来说不会抖动……我的标签似乎比示例中抖动得更多,下面是一张GIF(由于某种原因,GIF中的点颜色看起来很乱):n编辑:n链接到GIF:https://imgur.com/SvD96WI55n嗯,我看不到使用Chrome和Firefox的iMac有任何震动。可能与您的浏览器有关?n无论如何,动画GIF中的抖动看起来肯定很奇怪。请试着把这个小毛病再现出来,否则恐怕我们在这个问题上不会取得进展。这个问题可能是由各种原因引起的…nhttps://jsfiddle.net/d4ja0v6m/9/101n我已经更新了我的项目,去掉了地图和星体纹理图像,我仍然可以看到标签随着地球自转而晃动。n编辑:我还将其推到了功能更强大的windows服务器上,并且仍然显示晃动。这可能是因为我的球体的大小或其他原因吗?也许是我的相机定位?我只是在玩弄这些东西,直到一切看起来都很好……n这种震动在我的Chrome和Firefox中都发生了,在Firefox中可能更糟n Make 3D earth spin, along with CSS2DObjectsn

three.js使3D地球旋转,以及CSS2D对象 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e4%bd%bf3d%e5%9c%b0%e7%90%83%e6%97%8b%e8%bd%ac%ef%bc%8c%e4%bb%a5%e5%8f%8acss2d%e5%af%b9%e8%b1%a1/