THREE.js 如何旋转 CSS2D 文本标签 [英] THREE.js How to rotate CSS2D Text Labels

问题描述

我正在使用 CSS2D 来显示文本标签，如

见下文...带有 class="label3D" 的那个是由 CSS2DRenderer 管理的那个(相当于你的 myDiv)，其子级是我明确创建以应用转换的子级.html 中的结果将是这样的...

 
<div style="transform:rotate(45deg)"><i class="fas fa-exclamation-triangle text-yellow";title=NOCOMPLIANT"></i>

所以在你的代码中，你只需要在你的 myDiv 中附加一个新的 children div 并将转换应用到 children 而不是 myDiv，然后它就会被尊重"通过 CSS2DRenderer.

I am using CSS2D to display text labels as in the official example and it works OK.

Now I want to perform a one-off rotation of some of the labels in the viewing plane.

I have tried applying a CSS transform to the div before making a CSS2DObject out of the div.

But it doesnt seem to be working (the labels are still horizontal).

Here is my code (for a single label):-

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

I'd be grateful for any suggestions!

解决方案

If you see what it's being done by CSS2DRenderer, you´ll understand why it´s not working. Basically CSS2DRenderer is rewriting exactly those properties in the style every render loop.

    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;

So you have one option in my humble opinion, apply the transformation to a div inside the one that is managed by CSS2DRenderer. I did it in one of my projects...

See below... The one with class="label3D" is the one managed by CSS2DRenderer (equivalent to your myDiv), and its children is the one that I create explicitly to apply the transformation. The result in the html would be like this...

    <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>

So in your code, you only need to append a new children div to your myDiv and apply the transformation to the children instead of to myDiv, and then it will be "respected" by CSS2DRenderer.

这篇关于THREE.js 如何旋转 CSS2D 文本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！