JSFiddle - React, Tailwind, and code Playground

by Thor_Bux

HTML

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

CSS

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

JavaScript

var camera, scene, renderer, clock, stats;
  var dirLight, spotLight;
  var torusKnot, dirGroup;

init();
animate();

function init() {
    initScene();
    initMisc();

}

function initLight(scene) {
    scene.add(new THREE.AmbientLight(0x444444));

    spotLight = new THREE.SpotLight(0x888888);
    spotLight.name = 'Spot Light';
    spotLight.angle = Math.PI / 5;
    spotLight.penumbra = 0.3;
    spotLight.position.set(8, 10, 5);
    spotLight.castShadow = true;
    spotLight.shadow.camera.near = 8;
    spotLight.shadow.camera.far = 200;
    spotLight.shadow.mapSize.width = 256;
    spotLight.shadow.mapSize.height = 256;
    spotLight.shadow.bias = -0.002;
    spotLight.shadow.radius = 4;
    scene.add(spotLight);


    dirLight = new THREE.DirectionalLight(0xFFFFFF, 1);
    dirLight.name = 'Dir. Light';
    dirLight.position.set(3, 12, 17);
    dirLight.castShadow = true;
    dirLight.shadow.camera.near = 0.1;
    dirLight.shadow.camera.far = 500;
    dirLight.shadow.camera.right = 17;
    dirLight.shadow.camera.left = - 17;
    dirLight.shadow.camera.top = 17;
    dirLight.shadow.camera.bottom = - 17;
    dirLight.shadow.mapSize.width = 512;
    dirLight.shadow.mapSize.height = 512;
    dirLight.shadow.radius = 4;
    dirLight.shadow.bias = -0.0005;
    scene.add(dirLight);

    const dirLightHelper = new THREE.DirectionalLightHelper(dirLight, 1)
    scene.add(dirLightHelper)

    dirGroup = new THREE.Group();
    dirGroup.add(dirLight);
    // dirGroup.add(dirLightHelper)
    scene.add(dirGroup);
}

function initScene() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(0, 10, 50);

    scene = new THREE.Scene();
    
    initLight(scene)

    var geometry = new THREE.BoxGeometry( 2, 2, 2 );

    var material3 = new THREE.MeshStandardMaterial({
              transparent : true,
              opacity     : 1,
              color       : 0xff0000,
              roughness   : 0,
            ...