JSFiddle - React, Tailwind, and code Playground

by __jee7__

HTML

<script src="http://threejs.org/build/three.min.js"></script>

CSS

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

JavaScript

var renderer, scene, camera;
var light;

init();
animate();

function init() {

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

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

	// MeshLambertMaterial with flat shading false
	var geometry = new THREE.SphereBufferGeometry(10, 10, 10);
	var material = new THREE.MeshLambertMaterial( { 
  	color: 0xff0000,
    flatShading: false
  } );
	mesh = new THREE.Mesh( geometry,  material );
  mesh.position.set(-30, 0, 0);
  scene.add(mesh);

	// MeshLambertMaterial with flat shading true NOT working!
	var geometry = new THREE.SphereBufferGeometry(10, 10, 10);
	var material = new THREE.MeshLambertMaterial( { 
  	color: 0xff0000,
    flatShading: true
  } );
	mesh = new THREE.Mesh( geometry,  material );
  mesh.position.set(-10, 0, 0);
  scene.add(mesh);

	// MeshPhongMaterial with flat shading
  var geometry = new THREE.SphereBufferGeometry(10, 10, 10);
	var material = new THREE.MeshPhongMaterial( { 
  	color: 0xff0000,
    flatShading: true
  } );
  mesh = new THREE.Mesh( geometry,  material );
  mesh.position.set(10, 0, 0);
  scene.add(mesh);
  
  // MeshPhongMaterial with flat shading and shininess=0 to emulate Lambert
  var geometry = new THREE.SphereBufferGeometry(10, 10, 10);
	var material = new THREE.MeshPhongMaterial( { 
  	color: 0xff0000,
    flatShading: true,
    shininess: 0
  } );
  mesh = new THREE.Mesh( geometry,  material );
  mesh.position.set(30, 0, 0);
  scene.add(mesh);

	light = new THREE.DirectionalLight();
  light.position.set(1, 1, 0.4);
	scene.add(light);
}

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