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>

<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 model;
    var renderer;
    var scene;
    var camera;
    var controller;
    var windowH = 956;
    var windowW = 1248;

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

    init();
    animate();

    function init() {

        renderer = new THREE.WebGLRenderer({
            clearAlpha : 1,
            antialias : false,
            alpha: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor( 0x000000, 0 );
        renderer.setSize (1248, 956);
        renderer.domElement.id = 'webgl-renderer';
        document.body.appendChild(renderer.domElement);

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

        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 animate() {
    		i+=0.01;
        model.geometry.verticesNeedUpdate = true;
        /*model.geometry.elementsNeedUpdate = true; // <--I have tried all
        model.geometry.morphTargetsNeedUpdate = true;
        model.geometry.uvsNeedUpdate = true;
        model.geometry.normalsNeedUpdate = true;
        model.geometry.colorsNeedUpdate = true;
        model.geometry.tangentsNeedUpdate = true;
      ...