Threejs標簽顯示一般有兩種方式,Sprite精靈和CSS2DRenderer,Sprite精靈的話顯示效果會有些模糊,CSS2DRenderer繪制標簽是之接將dom掛載到三維對象上,渲染時其實是將dom直接根據對象位置位置實時渲染,可以在開發者模式中審查元素。
在mac機中,因為mac機的設備像素比DPR為2,而window的設備像素比為1,該值可以通過window.devicePixelRatio獲取。css2DRenderer計算對象位置是默認設備像素比為1的情況,如果想要適配蘋果機,需要做一次轉換:
var element = object.element; let xOffset = ( vector.x * _widthHalf + _widthHalf ); let yOffset = ( - vector.y * _heightHalf + _heightHalf ); let scale = window.devicePixelRatio; var style = 'translate(-50%,-50%) translate(' + xOffset*scale + 'px,' + yOffset*scale + 'px)';