正交相机将渲染场景切成两半

Question

我有一个正在使用

Orthographic camera

和

MapControls

的项目，并且我的场景正在按预期渲染，

但是相机将渲染场景切成两半，如下所示

我正在像这样初始化我的正交相机

export class OrthoCamera extends THREE.OrthographicCamera {

  constructor(
    renderingContext: HTMLCanvasElement,

  ) {
    super(
      renderingContext.offsetWidth / -2,
      renderingContext.offsetWidth / 2,

      renderingContext.offsetHeight /2,
      renderingContext.offsetHeight / - 2,

      0.1,
    );
    this.move(2, 2, 2);

  }

此外，我正在创建地图控件，如下所示

export class Controls extends MapControls {
  constructor(camera: OrthoCamera, renderingContext: HTMLCanvasElement) {
    super(camera, renderingContext);
    this.enablePan = true;
    this.enableRotate = true;
    this.target.set(40.0, 3.0, 40.0);
    this.update(0.1);
    this.maxDistance = 240;
    this.maxPolarAngle = Math.PI / 3.2;
    this.minPolarAngle = Math.PI / 3.2;
  }
}

最后我像这样把所有东西放在一起

this.camera = new OrthoCamera(renderingContext);    
this.controls = new Controls(this.camera, renderingContext);

Answer 1

我建议您使用不同的方式设置正交相机：

export class OrthoCamera extends THREE.OrthographicCamera {

  constructor( renderingContext: HTMLCanvasElement ) {
  
    const aspect =  renderingContext.offsetWidth / renderingContext.offsetHeight;
    const frustumSize = 25;
  
    super( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1, 1000 );

  }

}

如果您使用单独的变量甚至参数，您可以更轻松地调整视锥体大小。

frustumSize

的值取决于场景的大小。