JSFiddle - React, Tailwind, and code Playground

by Arnaldo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></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.MeshLambertMaterial({
	color: 0x22A8E7, 
    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);