JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<html>
<head>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>
<button onclick="buttonClick();console.log('click');">lose context</button>
<script>
    function buttonClick() {
        renderer.forceContextLoss();
        setTimeout(function () {
            renderer.forceContextRestore();
            test(null);
        }, 1000)
    }

    var scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff, transparent: true, opacity: 0.5});
    var meshMaterial = new THREE.MeshPhongMaterial({
        color: 0x156289,
        emissive: 0x072534,
        side: THREE.DoubleSide,
        flatShading: true
    });
    var lights = [];
    lights[0] = new THREE.PointLight(0xffffff, 1, 0);
    lights[1] = new THREE.PointLight(0xffffff, 1, 0);
    lights[2] = new THREE.PointLight(0xffffff, 1, 0);

    lights[0].position.set(0, 200, 0);
    lights[1].position.set(100, 200, 100);
    lights[2].position.set(-100, -200, -100);

    scene.add(lights[0]);
    scene.add(lights[1]);
    scene.add(lights[2]);
    var geometry = new THREE.SphereBufferGeometry(100, 32, 32);
    var group = new THREE.Group();
    group.add(new THREE.LineSegments(geometry, lineMaterial));
    group.add(new THREE.Mesh(geometry, meshMaterial));
    scene.add(group);
    var camera2 = new THREE.OrthographicCamera(-150, 150, -150, 150, 0, 10000000);
    camera2.position.set(0, 0, 1500);
    camera2.lookAt(new THREE.Vector3(0, 0, 0));
    test = function () {
        requestAnimationFrame(test);
        group.rotation.x += 0.01;
        renderer.setSize(window.innerWidth, window.innerHeight);
       ...