JSFiddle - React, Tailwind, and code Playground

by Arnaldo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
	void main()
	{
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
	uniform vec3 color;
	void main()
	{
		gl_FragColor = vec4(color, 1.0 );
	}
</script>

CSS

body {margin: 0}
canvas { width: 100%; height: 100% }

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 30000 );
camera.position.set(0, 200, 800);
camera.lookAt(new THREE.Vector3(0,0,0));

var renderer = new THREE.WebGLRenderer({logarithmicDepthBuffer: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// PLANE
var material1 = new THREE.ShaderMaterial( { 
	uniforms: {
        color: { type: "c", value: new THREE.Color( 0x22A8E7 ) }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent, 
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent, 
	opacity: 0.5, 
    transparent: true, 
} );
var plane = new THREE.PlaneBufferGeometry( 128*8, 128*8, 128, 128);
var mesh1 = new THREE.Mesh( plane, material1 );
mesh1.rotation.x = -Math.PI/2;
scene.add( mesh1 );

// SPHERE
var material2 = new THREE.MeshLambertMaterial({
	color: 0x455A5D
});
var sphere = new THREE.SphereGeometry( 100, 32, 32 );
var mesh2 = new THREE.Mesh( sphere, material2 );
scene.add( mesh2 );


dirLight = new THREE.DirectionalLight( 0xffffff, 2 );
dirLight.position.set( 1, 1, 0 );
dirLight.position.multiplyScalar( 500 );
scene.add( dirLight );

// RENDER
renderer.render(scene, camera);