JSFiddle - React, Tailwind, and code Playground

by omgazero

HTML

<div id="info">
  hw1
  <br>
  <button id="toggle" style="width:20%">Toggle camer</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00;
}

body {
  overflow: hidden;
}

JavaScript

var frame, scene, light, camera1, camera2, camera, renderer, controls, stats;
var keyboard = new KeyboardState();
var pos = new THREE.Vector3();
var clock, speed, angle, vel;
var smiletexture = 'https://i.imgur.com/p9v4EYP.png';

var pos = new THREE.Vector3();
var vel = new THREE.Vector3();
var force = new THREE.Vector3();
var power, angle, turn;
var changeCamera = true;

var sceneHUD, cameraHUD;

$("#toggle").click(function() {
  changeCamera = !changeCamera;
});


(function() {
  Math.clamp = function(val,min,max){
    return Math.min(Math.max(val,min),max);
    
  }})();

init();
animate();


function init() {

	clock = new THREE.Clock();

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera1.position.y = 200;
  camera1.position.z = 200;

	camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

  controls = new THREE.OrbitControls(camera1, renderer.domElement);
	
  controls.enableKeys = false;
  
  stats = new Stats();
  stats.showPanel(0);
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '0px';
  stats.domElement.style.top = '0px';
  document.body.appendChild(stats.domElement);


  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);
  
	var ambientLight = new THREE.AmbientLight(0x444444);
  scene.add(ambientLight);
  
  var gridXZ = new THREE.GridHelper(2000, 200, 'red', 'grey');
  scene.add(gridXZ);
  
  frame = createThomas();
  scene.add(frame);
  pos.y = 10;
  
  power = 5.0;
  angle = 0.0;
  
 // window.addEventListener( 'resize', onWindowResize, false );
  
  ///
  sceneHUD = new THREE.Scene();
  cameraHUD = new THREE.OrthographicCamera(-10, 10, 10, -10, -10, 200);
 ...