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({
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        const directionalLight = new three.DirectionalLight(0xffffff, 0.5);
        scene.add(directionalLight);
        directionalLight.position.y = (5 + 5)
        directionalLight.position.x = -(5 + 5)
        directionalLight.position.z = -(5 + 5)
        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"
        }))
        scene.add(target1)
        target1.position.y = 20
        directionalLight.target = target1
      const controls = new OrbitControls(camera, renderer.domElement);
           const helper = new three.DirectionalLightHelper(directionalLight, 5 );
        scene.add( helper );
        const animate = () => {
            requestAnimationFrame(animate);
             controls.update()
                 renderer.render(scene, camera);
        };
        animate();
    </script>

</html>