JSFiddle - React, Tailwind, and code Playground

HTML

<div id="webgl"></div>
<script src="http://threejs.org/build/three.min.js"></script>

CSS

#webgl {
    -webkit-transform:scale(0.1, 0.1);
}

JavaScript

var camera, scene, renderer, geo, mat, mesh;

init();
animate();

function init() {
    
    /* 
    Below 4096 the sphere is still in the center of the black
    viewport, where it should be. If the viewport is made wider
    than 4096, distortion begins, and the camera goes off-center.
    Try 7560. The sphere is almost all the way to the right side
    of the viewport, and appears stretched horizontally.
    */
    
    var width = 6000;
    var height = 6000;
    
    scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(width/-2, width/2, height/2, height/-2, -1000, 1000);
    renderer = new THREE.WebGLRenderer(); // CanvasRenderer does not have this issue
    renderer.setSize(width, height);
    renderer.setClearColor(0xff0000, 1);
    renderer.render(scene, camera); 

    console.log( renderer.getContext().drawingBufferWidth ); // <=======================
    console.log( renderer.getContext().drawingBufferHeight );
    console.log( renderer.getContext().canvas.width );
    console.log( renderer.getContext().canvas.height ); 
    
    // A sphere placed at the center of the viewport
    geo = new THREE.SphereGeometry(200);
    mat = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh(geo, mat);
    scene.add(mesh);
    
    // rendered into a css-scaled container so you can see it
    // (the same thing happens without the scaling)
    var container = document.getElementById('webgl');
    container.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    mesh.rotation.x += 0.01;
    renderer.render(scene, camera);    
}