JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>

CSS

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

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, -10);
camera.lookAt(new THREE.Vector3(0, 0, 0));

var light = new THREE.SpotLight(0x999999, 3, 300);
light.position.set(0, 50, 30);

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

var geometry = new THREE.PlaneBufferGeometry(5, 5);
var flatMaterial = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  emissive: 0x404040,
  fog: false,
  shading: THREE.FlatShading,
  specular: 0xffffff,
  shininess: 50,
});

var smoothMaterial = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  emissive: 0x404040,
  fog: false,
  shading: THREE.SmoothShading,
  specular: 0xffffff,
  shininess: 50,
});

var flatMesh = new THREE.Mesh(geometry, flatMaterial);
flatMesh.position.set(-3, 0, 0);
flatMesh.rotation.x = -Math.PI/2;

var smoothMesh = new THREE.Mesh(geometry, smoothMaterial);
smoothMesh.position.set(3, 0, 0);
smoothMesh.rotation.x = -Math.PI/2;

scene.add(flatMesh);
scene.add(smoothMesh);
scene.add(light);
scene.add(camera);

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