Threejs CSS2DRenderer mac機顯示標簽位置優化


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)';

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM