JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<html>
  <head>
  </head>
  <body onLoad="init()">
    <div id="center"></div>
  </body>
</html>

JavaScript

var scene;
var camera;
var renderer;
var controls;
var controls;
var object;
var geometry;
var material;
var comp;
var canvasElm;
var light1, light2;

function init() {

  //scene
  scene = new THREE.Scene();

  //camera
  camera = new THREE.PerspectiveCamera(16, (window.innerWidth) / window.innerHeight, 0.1, 5000);
  camera.position.set(0, 0, 150);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  //renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    preserveDrawingBuffer: false,
    alpha: true
  }); //preserveDrawingBuffer: false means WebGL can swap buffers instead of copy buffers.
  renderer.setClearColor(0x000000, 0);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // renderer.gammaInput = true;
  // renderer.gammaOutput = true;
  renderer.toneMapping = THREE.Uncharted2ToneMapping;
  renderer.toneMappingExposure = 0.75;
  canvasElm = document.getElementById("center");
  canvasElm.appendChild(renderer.domElement);
  canvas = renderer.domElement;
  // document.body.appendChild(renderer.domElement);



  ambientLight = new THREE.AmbientLight(0xf9f9f9);
  // scene.add(ambientLight);

  var light = new THREE.HemisphereLight(0xffffff, 0x080820, 1);
  scene.add(light);
  light1 = new THREE.PointLight(0xffffff, 0.75, 0, 1);
  light1.position.set(75, 75, 0);
  scene.add(light1);
  light2 = new THREE.PointLight(0xffffff, 0.75, 0, 1);
  light2.position.set(-75, -75, 0);
  scene.add(light2);

  var loader = new THREE.FontLoader();

  loader.load('fonts/helvetiker_regular.typeface.json', function(font) {

    var textgeometry = new THREE.TextGeometry('Hello three.js!', {
      font: font,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5
    });
  });

  var r = "https://threejs.org/examples/textures/cube/Bridge2/";
  var urls = [r + "posx.jpg", r + "negx.jpg",
    r + "posy.jpg", r + "negy.jpg",
    r + "posz.jpg",...