JSFiddle - React, Tailwind, and code Playground

by meji

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<body>
<canvas id="one"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
    uniform float extraSize;

	void main(void) {
		vec3 newPosition = position + extraSize*normal;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
	}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
	void main(void) {
    	gl_FragColor = vec4(vec3(0.0,0.0,0.0), 1.0);
	}

</script>

</body>

JavaScript

var clearColor = 0xFFFFFF;
    var model;
    var renderer;
    var scene;
    var camera;
    var controller;
    var windowH = 956;
    var windowW = 1248;
    var one = document.getElementById("one").getContext("bitmaprenderer");

    var offscreen = new OffscreenCanvas(256, 256); //<<ERROR
    var gl = offscreen.getContext('webgl');

    var uniforms = {
        extraSize: { type: "f", value: 0 }
    };

    init();
    animate();

    function init() {

        renderer = new THREE.WebGLRenderer({
            clearAlpha : 1,
            antialias : false,
            alpha: true,
            canvas: offscreen,
            context: gl
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor( 0x000000, 0 );
        //renderer.setSize (1248, 956);

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(55, windowW / windowH, 0.1, 5000);
        camera.position.fromArray([ 0, 0, 25 ]);
        camera.aspect = windowW / windowH;
        camera.updateProjectionMatrix();

        //MODEL
        var modelGeo = new THREE.SphereGeometry(6, 130, 130); //Sphere geometry
        modelGeo.mergeVertices();
        modelGeo.dynamic = true;

        //SHADERS
        /*var modelMat = new THREE.ShaderMaterial( {
            uniforms:     uniforms,
            vertexShader: document.getElementById( 'vertexShader' ).textContent,
            fragmentShader: document.getElementById( 'fragmentShader' ).textContent
        });*/
        var modelMat = new THREE.MeshLambertMaterial({ //Model material
            color : clearColor,
            side : THREE.DoubleSide,
            vertexColors : THREE.VertexColors,
            overdraw : 0.001
        });

        model = new THREE.Mesh(modelGeo, modelMat);
        model.geometry.computeBoundingSphere();
        model.geometry.dynamic = true;
        model.position.set(0, 0, 0);
        scene.add(model);
    }

    var i = 0.0;
    //i = 2.0;

    function...