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