I'm facing an issue with rendering two objects in an Orthographic camera using Three.js. The objects are not rendering correctly and I'm unsure of the reason behind it.
The expected look of the two images is as follows:
https://i.sstatic.net/hQVZC.png
However, when rendered within Three.js, they appear like this:
https://i.sstatic.net/94N9D.png
The paddle seems squished in the rendered output. The code snippet below shows how I set up the canvas, renderer, and more for displaying on the page:
import { animationFrames, tap } from 'rxjs';
export class Game {
static renderer = new WebGLRenderer({
alpha: true,
antialias: true
});
static start() {
this.updateRendererSize();
window.addEventListener('resize', this.updateRendererSize.bind(this));
document.querySelector('.container')?.appendChild(this.renderer.domElement);
/* Snipped: Load all objects into the scene. */
animationFrames().pipe(
tap(() => this.renderGame())
).subscribe();
}
private static updateRendererSize() {
const aspect = this.game.aspect; // 1.777
this.renderer.setSize(window.innerWidth, window.innerWidth / aspect);
}
private static renderGame() {
this.renderer.render(this.activeScene.scene, this.activeCamera.camera);
}
}
Below is the code snippet for creating the camera.
export class GameCamera {
camera: Camera;
private aspectRatio = 1.7777777777777777;
private size = 5;
private readonly width = options.size;
private readonly height = this.size / this.aspectRatio;
constructor() {
const dim = this.cameraDimensions();
this.camera = new OrthographicCamera(
dim.left, dim.right,
dim.top, dim.bottom,
0, 100);
}
private cameraDimensions() {
const left = this.width / -2;
const right = this.width / 2;
const top = this.height / 2;
const bottom = this.height / -2;
return { left, right, top, bottom };
}
}
And here is how I am loading the textures:
loadResource() {
const map = new TextureLoader().load(this.resource);
this.material = new SpriteMaterial({
map,
precision: 'highp',
});
this.object = new Sprite(material);
/* Snipped: add sprite to scene. */
}