threejs 项目开发中，需要在模型的两个面标注文字，这里使用的是css3d，但是在开发中会出现在另外一个面的文字，在模型的另外一个面页会看到这些文字，客户不喜欢，我们要满足客户的需要，把不让其背面显示出来。

我们增加一段代码js让其背面不显示出来

关键代码

textElement.style.backfaceVisibility = 'hidden';
textElement.style.transformStyle = 'preserve-3d';

完整代码

export function addLabelToChetouNum(num, child) {
    if (
        child.name === 'chetouNum2' || child.name.includes('chetouNum2') ||
        child.name === 'chetouNum3' || child.name.includes('chetouNum3')
    ) {
        console.log(child.name);
        const objectBox = new THREE.Box3().setFromObject(child);
        const objectSize = objectBox.getSize(new THREE.Vector3());

        const textElement = document.createElement('div');
        textElement.className = 'css3d-label';
        textElement.textContent = num;
        textElement.style.color = 'white';
        textElement.style.fontSize = '0.15px';
        textElement.style.textAlign = 'center';
        textElement.style.position = 'absolute';
        textElement.style.whiteSpace = 'nowrap';

        // Prevent backface visibility
        textElement.style.backfaceVisibility = 'hidden';
        textElement.style.transformStyle = 'preserve-3d';

        const textLabel = new CSS3DObject(textElement);
        textLabel.position.set(0.4, objectSize.y / 2 - 0.05, 0.01);
        child.add(textLabel);
    }
}