JSFiddle - React, Tailwind, and code Playground

by fiddleuser04

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

<canvas id='canvas'></canvas>

CSS

html{
     height:100%;
   }
   body{
     height: 100%;
   }
   canvas{
      height: 100%;
      width: 100%;
    }

JavaScript

const RED = 0xff0000;
    const GREEN = 0x00ff00;
    const BLUE = 0x0000ff;

    const LIMIT = 1000;

    let canvas, scene, renderer, camera, cone;

    function initAxes(){
      function makeAxis(start, finish, material, name){
        const points = [start, finish];
        const axisGeometry = new THREE.BufferGeometry().setFromPoints(points);
        const newAxis = new THREE.Line(axisGeometry, material);
        newAxis.name = name;
        scene.add(newAxis);
      }
      const xAxisMaterial = new THREE.LineBasicMaterial({ color: RED });
	    const yAxisMaterial = new THREE.LineBasicMaterial({ color: GREEN });
	    const zAxisMaterial = new THREE.LineBasicMaterial({ color: BLUE });
      makeAxis(new THREE.Vector3(-LIMIT, 0, 0), new THREE.Vector3(LIMIT, 0, 0), xAxisMaterial, 'xAxis');
      makeAxis(new THREE.Vector3(0, -LIMIT, 0), new THREE.Vector3(0, LIMIT, 0), yAxisMaterial, 'yAxis');
      makeAxis(new THREE.Vector3(0, 0, -LIMIT), new THREE.Vector3(0, 0, LIMIT), zAxisMaterial, 'zAxis');
    }

    function initCamera() {
      camera = new THREE.PerspectiveCamera(70, 1, 1, 10000);
      scene.add(camera);
      camera.position.set(450, 400, 350); 
    }

    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }

    function doWindowResize(){
      setCanvasResolution();
      setRendererSize();
      setCameraAspect();
    }
    function setCanvasResolution(){
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
    }
    function setRendererSize(){
      renderer.setSize(canvas.width, canvas.height, false);
    }
    function setCameraAspect(){
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    function initCone() {
      cone = new THREE.Mesh(new THREE.ConeGeometry(20, 60, 32), new THREE.MeshNormalMaterial());
      cone.position.set(100, 0,0);
      scene.add(cone);
      const axesHelper = new...