JSFiddle - React, Tailwind, and code Playground

by ausnenner

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>base ball</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script>
      var _a = {};

      var intersectsGroups = [];
      var intersects = [];
      var selectedObject;

      var BOOL_ISPOINTER_DOWN = false;
      var IS_SELECTED = false;
      var raycaster;
      var currentPointer;

      var sphere;
      
      var scene;
      var camera;
      var renderer;
      var domElement;
      var orbit;
      
      var mPointer;
      
      var mDis;
      
      var mScale;
      
      var dirVector;
      
      var plane;
      var planeHelper;
      
      var ball;
      
    </script>

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

    <script type="module">
      import * as THREE from "three";

      import { Vector3, Raycaster, Vector2, Box3, Plane } from "three";


      import { OrbitControls } from "three/addons/controls/OrbitControls.js";

 

      var dir = new THREE.Vector3();

      raycaster = new Raycaster();
      currentPointer = new Vector2();
      
      mPointer = new Vector2();
      
      mScale = new Vector3();
      
      dirVector = new Vector3();
      


      setup();

      animate();

      //
      // Setup
      //

      function setup() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );
        
        // camera.position.z = 2.5;
        camera.position.fromArray([
          2.2073511507872932, 1.139756107316656, 2.8690262744346284,
        ]);
        camera.lookAt(new THREE.Vector3());

        renderer = new THREE.WebGLRenderer();
       ...