JSFiddle - React, Tailwind, and code Playground

by abernier

CSS

body{        
margin: 0px;
    overflow: hidden;}

JavaScript

renderer = new THREE.WebGLRenderer({ antialias: true});
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      
      scene = new THREE.Scene();

      var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);

      camera.position.z = 200;
      camera.position.y = 0;
      camera.lookAt({x:0,y:0,z:0});
      scene.add(camera);

			var cubemat = new THREE.MeshLambertMaterial({color: 0x333333});
      //cubemat.transparent = true;
      cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), cubemat);
      //cube.position.y = 50;
      //cube.visible = false;
      
      scene.add(cube);
      
      plane = new THREE.Mesh(new THREE.PlaneGeometry(200,200), new THREE.MeshLambertMaterial({color: 0xffffff}));
      scene.add(plane);

      scene.add( new THREE.AmbientLight( 0xffFFFF) );
      
      var light = new THREE.DirectionalLight(0xffffff, .5);
      light.position.x = -100;
      light.position.y = 150;
      scene.add(light);

      renderer.shadowMapEnabled = true;
      renderer.shadowMapSoft = false;

      renderer.shadowCameraNear = 3;
      renderer.shadowCameraFar = camera.far;
      renderer.shadowCameraFov = camera.fov;

      renderer.shadowMapBias = 1/1000;
      renderer.shadowMapDarkness = 0.5;
      renderer.shadowMapWidth = renderer.shadowMapHeight = 2*1024;

      light.castShadow = true;
      cube.castShadow = true;
      plane.receiveShadow = true;
      
      renderer.render(scene, camera);