JSFiddle - React, Tailwind, and code Playground

by kirill321592

HTML

<button id="pressMe" style="position: absolute">PressMe</button>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

const roundVector = (digits, vector) => {
        if (!vector) {
          return null;
        }
        const e = Math.pow(10, digits || 0);

        vector.x = Math.round(vector.x * e) / e;
        vector.y = Math.round(vector.y * e) / e;
        vector.z = Math.round(vector.z * e) / e;

        return vector;
      };
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      camera.position.set(0, 10, 50);
      var renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var controls = new THREE.OrbitControls(camera, renderer.domElement);

      const objGeom = new THREE.SphereGeometry(10, 32, 16);
      const obj = new THREE.Mesh(
        objGeom,
        new THREE.MeshBasicMaterial({
          color: "green",
          wireframe: true,
        })
      );
      obj.position.set(0, 0, 0);
      scene.add(obj);

      const pointsOfIntersection = [];

      var a = new THREE.Vector3(),
        b = new THREE.Vector3(),
        c = new THREE.Vector3();
      var lineAB = new THREE.Line3(),
        lineBC = new THREE.Line3(),
        lineCA = new THREE.Line3();

      const drawIntersectionPoints = () => {
        const mathPlane = new THREE.Plane();
        mathPlane.setFromCoplanarPoints(
          new THREE.Vector3(-18, 5, -27),
          new THREE.Vector3(-18, 5, -18),
          new THREE.Vector3(-27, 5, -22)
        );
        const helper = new THREE.PlaneHelper(mathPlane, 5, 0xffff00);
        scene.add(helper);
        
        for (let i = 0; i < obj.geometry.attributes.position.count; i += 3) {
          obj.localToWorld(
            a.copy(
              new THREE.Vector3().fromBufferAttribute(
                obj.geometry.attributes.position,
                obj.geometry.index.array[i]
   ...