THREE.js文本上下倒置问题技术求助

核心原因 #

文本上下倒置的直接原因是正交相机的视口参数设置错误。WebGL的屏幕坐标系Y轴向下，而Three.js的3D空间默认Y轴向上。你设置top=0、bottom=this.rendererHeight，相当于将相机的上边界对齐屏幕顶部，下边界对齐屏幕底部，这会导致整个场景（包括Troika文本网格）的Y轴方向反转，最终表现为文本上下倒置。

解决方案 #

修改正交相机的top和bottom参数，将top设为渲染器高度，bottom设为0，即可修正坐标系方向：

public setCameraViewport(near: number = this.__cameraViewportNear, far: number = this.__cameraViewportFar) {
    this.getCamera().left = 0;
    this.getCamera().right = this.rendererWidth;
    this.getCamera().top = this.rendererHeight; // 修正为渲染器高度
    this.getCamera().bottom = 0; // 修正为0
    this.getCamera().near = near; 
    this.getCamera().far = far; 
    this.getCamera().updateProjectionMatrix();
}

补充说明 #

Troika的TextMesh基于Three.js标准3D坐标系渲染，文本朝向依赖相机投影矩阵方向。当相机视口参数导致坐标系反转时，文本会跟着倒置。调整参数后，相机投影矩阵会正确映射3D空间到屏幕空间，文本就能正常显示。

问题背景信息 #

请注意，我无法提供完整准确的源代码。

渲染出的文本出现了上下倒置的情况，请问这是什么原因导致的？

相机类型

THREE.OrthographicCamera

渲染器设置片段

constructor() {
    this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        depth: false
    });

    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.autoClear = false;
    this.renderer.autoClearColor = true;
    this.renderer.autoClearStencil = true;
    this.renderer.autoClearDepth = true;
}

相机视口设置片段

__cameraViewportNear 值为0.1
__cameraViewportFar 值为100

public setCameraViewport(near: number = this.__cameraViewportNear, far: number = this.__cameraViewportFar) {
    this.getCamera().left = 0;
    this.getCamera().right = this.rendererWidth;
    this.getCamera().top = 0;
    this.getCamera().bottom = this.rendererHeight;
    this.getCamera().near = near; 
    this.getCamera().far = far; 
    this.getCamera().updateProjectionMatrix();
}

网格创建片段

var extrudeSettings = {
    steps: 2,
    depth: 2,
    bevelEnabled: false,
};

//xxx2
let xxx_shape = self.draws().createShape();
xxx_shape.moveTo( 34, 16.8421);
xxx_shape.bezierCurveTo( 34, 29.4737, 17, 40, 17, 40 );
xxx_shape.bezierCurveTo( 17, 40, 0, 29.4737, 0, 16.8421 );
xxx_shape.bezierCurveTo( 0, 7.54047, 7.61116, 0, 17, 0 );
xxx_shape.bezierCurveTo( 26.3888, 0, 34, 7.54047, 34, 16.8421);
xxx_shape.closePath();

//xxx3
let xxx_geo = self.draws().createExtrudeGeometry(xxx_shape, extrudeSettings); // 等价于 new THREE.ExtrudeGeometry
let xxx_material = self.draws().createMeshBaiscMeterial({color:0x4fff82}); // 等价于 new THREE.MeshBasicMaterial
let xxx_mesh = self.draws().createMesh(xxx_geo, xxx_material); // 等价于 new THREE.Mesh


//xxx4
const xxx_text = self.draws().createTextMesh(); // 使用Troika文本库
xxx_text.text = "HeLp1_23";
xxx_text.fontSize = 24;
xxx_text.position.z = 1;
xxx_text.color = 0xff0000;
xxx_mesh.add(xxx_text);

//xxx5
setTimeout(()=>{
    xxx_text.sync(()=>{
        self.events().emit("@render");
    });
}, 0);

内容的提问来源于stack exchange，提问作者lIIlIllIIlllIIlI