JSFiddle - React, Tailwind, and code Playground

by EliasHasle

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

img {
  display: hidden;
}

JavaScript

// Simple three.js example

var balls, source, renderer, scene, camera, controls;

init();
requestAnimationFrame(animate);

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );

	  //Cube texture
    var cubeMap = new THREE.CubeTextureLoader()
					.setPath( 'https://threejs.org/examples/textures/cube/pisa/' )
					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );

    //Projection source
    let sourceMaterial = new THREE.ShaderMaterial({
    	vertexShader: `
      varying vec3 vPos;
      void main() {
      	gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.);
        vPos = position;
        }`,
      fragmentShader: `
      varying vec3 vPos;
      uniform samplerCube cubeMap;
      void main() {
      	gl_FragColor = saturate(2.*textureCube(cubeMap, normalize(vPos)));
      }`,
      uniforms: {cubeMap: {value: cubeMap}}
    });
    source = new THREE.Mesh(new THREE.SphereBufferGeometry(1,24,36), sourceMaterial);//new THREE.MeshBasicMaterial({color:"white"}));
    scene.add(source);

    // geometry
    var geometry = new THREE.SphereGeometry( 2, 12, 8 );
    
    // material

    
    var material = new THREE.ShaderMaterial( {
    	vertexShader: `
      //uniform mat4 projectionMatrix;
      //uniform mat4 modelViewMatrix;
      //uniform mat4 modelMatrix;
      //uniform mat3 normalMatrix;
      //attribute vec3 position;
      //attribute vec3 normal;
      uniform mat3 globalNormalMatrix;
      varying vec3 vWorldPos;
      varying vec3 vWorldNorm;
      
      void main() {
      	gl_Position =...