JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

const fragmentShader = `  
	varying vec3 vPosition;
  
  void main() {
    vec3 point = vec3(-10.0, 0.0, 0.0);
		float d = distance(point, vPosition.xyz);
    float a = pow(d/105.0,4.0);
    gl_FragColor = vec4(vec3(1.0), a);
  }
`

const vertexShader = `
	varying vec3 vPosition;

  void main() {
		vPosition = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
`


let camera, scene, renderer;

init();
animate();


function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 140, 140, 140 );
  
	scene = new THREE.Scene();      
  renderer = new THREE.WebGLRenderer();
	renderer.autoClear = false;
	renderer.setSize( window.innerWidth, window.innerHeight );
  

	document.body.appendChild( renderer.domElement );
	// console.log('vertexShader',vertexShader)
  
  const sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 64, 64 ), new THREE.ShaderMaterial({
	  vertexShader,
		fragmentShader,
	//  color: "blue",
    transparent: true,
  
//  pacity: 0.5,
//  side: THREE.DoubleSide,
  // ***** Clipping setup (material): *****
//  clippingPlanes: [ localPlane ],
  }));
  scene.add(sphere);
  
  const innerSphere = new THREE.Mesh(new THREE.SphereGeometry(80, 64, 64 ), new THREE.MeshBasicMaterial({
	  color: 'red',
  }));
  innerSphere.position.set(0,0,0);
  scene.add(innerSphere);



  
 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 0, 0 );
}


function animate() {
   renderer.render( scene, camera );
  
	requestAnimationFrame( animate );

}