JSFiddle - React, Tailwind, and code Playground

by murksiuke

HTML

<body>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/Detector.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/DDSLoader.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/MTLLoader.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/dat.gui.min.js"></script>
  <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/tween.min.js"></script>
  <script>
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    var container, renderer, annie;
    var camera, scene, projector, raycaster;
    var mouseX = 0;
    var mouseY = 0;
    //objects in the scene
    var walls;
    var piano;
    var interactiveObj = [];
    var wallWidth = 1000;
    var clock = new THREE.Clock();
    var mouse, INTERSECTED;
    var listener = new THREE.AudioListener();
    var sound = new THREE.Audio(listener);
    var audioLoader = new THREE.AudioLoader();







    init();
    animate();

    function init() {
      container = document.createElement('div');
      document.body.appendChild(container);

      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.set(0, -wallWidth / 2 + 10, 10);
      camera.lookAt(new THREE.Vector3(10, 10, 10));
      camera.add(listener);


      controls = new THREE.OrbitControls(camera);
      scene = new THREE.Scene();
      projector = new THREE.Projector();
       var ambient = new THREE.AmbientLight(0x666666);
      scene.add(ambient);




      
      //other...