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 onmouseout="onDocumentMouseDown(this)">
<footer>
click the sphere
</footer>

<script id="vertexShader" type="x-shader/x-vertex">
    uniform float extraSize;
    uniform vec3 intersectPoint;
    varying vec3 vColor;

	void main(void) {
    vec3 pointLightPosition = vec3(1.0,2.0,-1.0);
    vec3 pointLightDirection = normalize(vec3(pointLightPosition.xyz - position.xyz));

		vec3 L = vec3(projectionMatrix * modelViewMatrix * vec4(pointLightDirection, 1.0));
		vec3 N = normalMatrix * normal;
	  float lambert = max(dot(normalize(N), normalize(L)), 0.0);
		vColor = vec3(1.0,1.0,1.0) * lambert;
    
  	float displacement2 = max(0.3-(length((normalize(intersectPoint)-normalize(position)))),0.0);
    displacement2 = displacement2*10.0;
		vec3 newPosition = position + normal * vec3(displacement2);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
	}
</script>

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

</script>

</body>

JavaScript

var model;
    var renderer;
    var scene;
    var camera;
    var controller;
    var windowH = 600;
    var windowW = 800;
    var mouse = new THREE.Vector2(0, 0);
    var raycaster = new THREE.Raycaster();
    var uniforms = {
        extraSize: { type: "f", value: 0 },
        intersectPoint: { type: "v3", value: new THREE.Vector3(0.0,0.0,0.0) }
    };
    document.addEventListener('mousedown', onDocumentMouseDown, false);
    
    function onDocumentMouseDown(event) {
			event.preventDefault();
			mouse.x = (event.clientX / windowW) * 2 - 1;
			mouse.y = -(event.clientY / windowH) * 2 + 1;
      var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
			vector = vector.unproject(camera);
			raycaster.set(camera.position, vector.sub(camera.position).normalize());
      var intersects = raycaster.intersectObject(model);
      console.log(intersects);
      if (intersects.length > 0) {
      	uniforms.intersectPoint.value = intersects[0].point;
      	console.log(uniforms.intersectPoint.value);
      }
		}

    init();
    animate();

    function init() {

        renderer = new THREE.WebGLRenderer({
            clearAlpha : 1,
            antialias : false,
            alpha: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor( 0x000000, 0 );
        renderer.setSize (800, 600);
        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,
           ...