ThreeJS sprite not rendering

by CodeVirtue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<body id="body">
  <canvas id="main"></canvas>  
</body>

CSS

body {
  margin: 0;
  padding: 0;
  border: 0;

}

canvas { 
}

JavaScript

const canvas = document.getElementById('main');
const body = document.getElementById('body');

const w = 100;
const h = 100;

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(0, 0, w, h, 0, 1000);
const renderer = new THREE.WebGLRenderer({canvas});

scene.background = new THREE.Color(0xffff00);
renderer.setSize(w, h);
const sprite = createSprite(w, h);
scene.add(sprite);
camera.lookAt(w / 2, h / 2, 0);

function createSprite(w, h) {
  const material = new THREE.SpriteMaterial({ color: 0xff0000 });
  const sprite = new THREE.Sprite(material);
  sprite.position.set(w / 2, h / 2, 0);
  sprite.scale.set(w, h, 1);
  return sprite;
}

function animate() {
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
}
animate();