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

Question

我正在使用 CSS2D 来显示文本标签，就像 official example 一样，它工作正常。

现在我想对视图平面中的一些标签执行一次性旋转。

在从 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 );

如有任何建议，我将不胜感激！

Answer 1

如果您看到 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 管理的 div 中的一个 div。我在我的一个项目中做到了...

见下文...带有class="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 并将转换应用于子代而不是 myDiv，然后它将被 CSS2DRenderer“尊重”。