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

猜你喜欢

转载自www.cnblogs.com/minnong/p/11726023.html