JSFiddle - React, Tailwind, and code Playground

JavaScript

<!DOCTYPE html>

<html>

<head>	
    <title> </title>
  <script type="text/javascript" src="../js/three.js"></script>
    <script type="text/javascript" src="../js/OBJLoader.js"></script>    
    <script type="text/javascript" src="../js/dat.gui.js"></script>
      <script type="text/javascript" src="../js/OrbitControls.js"></script>
    
      
 
</head>
<body>
	
  <a href="cube.html">Cube</a>
 <a href="garazh.html">Garazh</a>
   <a href="male02.html">male02</a>
    <a href="Monkey.html">Monkey</a>
    <a href="surfH_3.html">SurfH_3</a>
     <a href="..\obj.html">Back</a>

   

<div id="WebGL-output">
</div>

	<script>
	function init() {


        // Создаем сцену
        var scene = new THREE.Scene();

     // Создаем камеру
	 
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
			
		scene.add(camera);
			
        // Создаем рендер и цвет фона
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xffffff, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        //позиция камеры
        camera.position.x = 5;
        camera.position.y = 5;
        camera.position.z = 5;
        camera.lookAt(scene.position);
        scene.add(camera);
		
		var orbitControls = new THREE.OrbitControls(camera);
        orbitControls.autoRotate = true;
        var clock = new THREE.Clock();

        //Свет и тени
		
       var directionalLight = new THREE.DirectionalLight( 0xffeedd );
				directionalLight.position.set(100, 100, 150);										
				camera.add(directionalLight);		

		
		

       
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

     
        var step = 0;
		

 /*var controls = new function () {
      
 this.rotationSpeed = 0.02;
 this.bouncingSpeed = 0.03;
        };
   
            var gui = new dat.GUI();
			gui.add(controls,...