JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

//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);
}