JSFiddle - React, Tailwind, and code Playground

by michaelnicol

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>

    <script type="importmap">
      {
          "imports": {
            "three": "https://unpkg.com/[email protected]/build/three.module.js"
          }
        }
      </script>
  </body>

  <script type="module">
    import * as three from "three"
        import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js"
        var scene = new three.Scene();
        var camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new three.WebGLRenderer({
           shadowMap: {
           enabled: true,
           type: three.PCFSoftShadowMap
           }
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        const light = new three.SpotLight(0xffffff, 0.5);
        scene.add(light);
        light.position.y = 10
        light.position.x = 10
        light.position.z = 10
        camera.position.y = 5 + 5
        camera.position.x = 5 + 5
        camera.position.z = 5 + 5
        let target1 = new three.Mesh(new three.BoxGeometry(1,1,1), new three.MeshStandardMaterial({
        color: "red"
        }))
        let obj2 = new three.Mesh(new three.BoxGeometry(100,100,1), new three.MeshStandardMaterial({
        color: "BLUE"
        }))
        const spotLightHelper = new three.SpotLightHelper( light );
        target1.receieveShadow = true
        target1.castShadow = true
        obj2.receieveShadow = true
        obj2.castShadow = true
        scene.add( light );
        scene.add(target1)
        scene.add(obj2)
        light.target = target1
        scene.add( spotLightHelper );
        spotLightHelper.update()
                const...