I’ve went through similar questions on this site, and I have seen all the things that are recommended. Like, camera positioning (not inside the mesh), calling the render function, setting the (ambient) light. Each and every thing I’ve found so far in the forum I’ve tried, but nothing is working.

Can anyone please look at this fiddle and guide me as to what I am doing wrong?

https://jsfiddle.net/4mxybs5h/1/

// HTML
  <main>
  <div id="threeContainer">
    hi
    <canvas #canvas id="canvas"></canvas>
  </div>
</main>

// JS
//this.animate(null);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
boxGeometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshBasicMaterial({color: 0xff0000});
mesh = new THREE.Mesh( boxGeometry, material );
  canva = document.getElementById("canvas");
     renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva });

startScene();
animate();

function startScene() {

  //let scene = new THREE.Scene();
  //let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  let light = new THREE.AmbientLight( 0xffaaff ); 
 

    scene.add( mesh );
    light.position.set(10,10,10)
    scene.add( light );
    camera.position.set(500, 500, 500);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    
    //this.renderer.setClearColor('#E5E5E5')
    renderer.setClearColor(0xEEEEEE);
    //this.renderer.setSize(window.innerWidth, window.innerHeight)
    //this.renderer.render(this.scene, this.camera)
    //this.renderer.setAnimationLoop(this.animate.bind(this))
    //document.body.appendChild(this.renderer.domElement)

    // window.addEventListener('resize', () => {
    //   this.renderer.setSize(window.innerWidth, window.innerHeight)
    //   this.camera.aspect = window.innerWidth / innerHeight
    //   this.camera.updateProjectionMatrix();
    // })
} 

function animate() {
 camera.aspect = window.innerWidth / innerHeight
    camera.updateProjectionMatrix();
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    //this.mesh.rotation.y += 1;
    //document.body.appendChild(this.renderer.domElement)

    renderer.render(scene, camera);
}

I feel like it must be something small or obvious, but I am not able to be figure out. Any help is appreciated.