JSFiddle - React, Tailwind, and code Playground

by paulsidebottom

JavaScript

renderer = new THREE.WebGLRenderer({  });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = false;
    document.body.appendChild(renderer.domElement);
    scene = new THREE.Scene();
    
    //Add a plane
    plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshLambertMaterial({ color: 0xdddddd }));
    scene.add(plane);
    plane.receiveShadow = true;

    //Add a camera
    var camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000);
    camera.position.set(0, -200, 200);
    camera.lookAt({ x: 0, y: 0, z: 0 });
    scene.add(camera);

    //Add some lights
    initLights(scene);

    renderer.render(scene, camera);

    function initLights(scene) {
        scene.add(new THREE.AmbientLight(0x212223));
        var light = new THREE.DirectionalLight(0xffffff, 1.5);
        light.castShadow = true;
        light.position.set(150, -150, 0);
        scene.add(light);
    }