JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

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

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 10, 30);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.BoxGeometry(10, 1, 10);
var material = new THREE.MeshStandardMaterial({color: "white"});
var table = new THREE.Mesh(geom, material);
scene.add(table);

var light = new THREE.SpotLight(0x00ffff, .5, 20, THREE.Math.degToRad(20));
light.position.set(5, 10, 0);
scene.add(light);

scene.add(new THREE.AmbientLight(0xffffff, .25));

var lightHelper = new THREE.SpotLightHelper(light);
scene.add(lightHelper);
lightHelper.update();




render();

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