时间戳

首页 > 解决方案 > 三.js 如何旋转 CSS2D 文本标签

javascript - 三.js 如何旋转 CSS2D 文本标签

问题描述

我正在使用 CSS2D 来显示官方示例中的文本标签，它工作正常。

现在我想在查看平面中执行一些标签的一次性旋转。

在从 div 中创建 CSS2DObject 之前，我尝试对 div 应用 CSS 转换。

但它似乎不起作用（标签仍然是水平的）。

这是我的代码（对于单个标签）：-

var myDiv = document.createElement( 'div' );
myDiv.className = className;
myDiv.textContent = labelStr;
myDiv.style.marginTop = '-1em';
var degrees = 45;

/* *** These do not work ***

myDiv.style.webkitTransform = 'rotate('+degrees+'deg)'; 
myDiv.style.mozTransform    = 'rotate('+degrees+'deg)'; 
myDiv.style.msTransform     = 'rotate('+degrees+'deg)'; 
myDiv.style.oTransform      = 'rotate('+degrees+'deg)'; 
myDiv.style.transform       = 'rotate('+degrees+'deg)'; 
*/

var myLabel = new CSS2DObject( myDiv );             
myLabel.position.set( dX, dY, dZ ); 
//myLabel.rotateZ( degrees * Math.PI/180 ); //... *** Does not work ***

scene.add( myLabel );

我将不胜感激任何建议！

标签： javascriptcssthree.js

解决方案

如果你看到它正在做什么CSS2DRenderer，你就会明白为什么它不起作用。基本上CSS2DRenderer是在每个渲染循环的样式中重写这些属性。

    var element = object.element;
    var style = 'translate(-50%,-50%) translate(' + (vector.x * _widthHalf + _widthHalf) + 'px,' + (- vector.y * _heightHalf + _heightHalf) + 'px)';
    element.style.WebkitTransform = style;
    element.style.MozTransform = style;
    element.style.oTransform = style;
    element.style.transform = style;

因此，在我看来，您有一个选择，将转换应用于由CSS2DRenderer. 我在我的一个项目中做到了... 在此处输入图像描述

见下文... withclass="label3D"是由CSS2DRenderer（相当于您的myDiv）管理的一个，它的子级是我明确创建以应用转换的一个。html中的结果将是这样的......

    <div class="label3D" style="position: absolute; transform: translate(-50%, -50%) translate(487.583px, 205.32px); z-index: 36;">
        <div style="transform: rotate(45deg)">
            <i class="fas fa-exclamation-triangle text-yellow" title="NOCOMPLIANT"></i>
        </div>
    </div>

因此，在您的代码中，您只需将一个新的子 div 附加到您myDiv的并将转换应用于子级而不是 to myDiv，然后它将被CSS2DRenderer.

推荐阅读