Is there a way to scale up a three.js renderer without becoming blurry?

Question

I'm finally getting around to building a small game idea I've had. While it might seem odd, the aesthetic of the game requires a crisp, pixelated look.

So far, I've tried to use the built-in setPixelRatio() and setSize() on the renderer. Unfortunately, the scaled-up image appears blurry.

In my index.js

import * as THREE from 'three'

import '@/misc/console'
import Game from '@/game'

const g = new Game()

let geom = new THREE.BoxGeometry(1, 1, 1)
let mat = new THREE.MeshBasicMaterial({ color: 0xffffff })
let cube = new THREE.Mesh(geom, mat)
g.scene.add(cube)
g.camera.position.z = 5

const animate = () => {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.02
  g.renderer.render(g.scene, g.camera)
}
animate()

In my game/index.js

import { Scene, PerspectiveCamera, WebGLRenderer } from 'three'

export default class Game {
  static VIEW_RATIO_X = 16
  static VIEW_RATIO_Y = 9

  scene
  camera
  renderer

  constructor () {
    // Create a new base scene
    this.scene = new Scene()

    // Create the frame and set the size accordingly
    this.camera = new PerspectiveCamera(90, Game.VIEW_RATIO_X / Game.VIEW_RATIO_Y, 0.1, 1000)

    // Create a new renderer and calculate the proper size to make it
    this.renderer = new WebGLRenderer({ antialias: false })
    this.renderer.setPixelRatio(0.5)
    this.renderer.setSize(window.innerHeight / Game.VIEW_RATIO_Y * Game.VIEW_RATIO_X, window.innerHeight)
    document.body.appendChild(this.renderer.domElement)
  }
}

This basic attempt to halve the resolution just makes it blurry. Are there three.js, WebGL, or canvas settings I can use to enforce clear lines on the pixels?