JSFiddle - React, Tailwind, and code Playground

by Bai Shiuan Huang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

<div id='div1'>
  <input id='rangeName' value='RANGE' readonly= 'true'>
  <input type="range" id='myRange' min="1" max="100" value="50">
  <br>
  <br>
  <input id='radioName' value='RADIOBUTTON' readonly= 'true'>
  <br>
  <input type=radio id='radio1' class='gclass' name='g' value='cylinder' checked> Cylinder
  <br>
  <input type=radio id='radio1' class='gclass' name='g' value='box'> Box 
  <br>
  <br>
  <input id='checkName' value='CHECKBUTTON' readonly= 'true'>
  <br>
  <input type=checkbox id='checkbox1' checked> Rotate
  <br>

</div>
<div id='div2'>
  <button id='button1'>Hide AxisHelper</button>
  <input id='input1' size="10px" value=0 readonly=t rue>
</div>

CSS

body {
  overflow: hidden;
}

#div1 {
  position: absolute;
  top: 10vh;
  left: 10vw;
  color: white;
}

#div2 {
  position: absolute;
  top: 90vh;
  left: 30vw;
}

#button1 {
  width: 150px;
}

#input1 {
  color: white;
  background-color: transparent;
  border: 0px;
  font-size: 30px;
  height: 40px;
  width: 90px;
}

#rangeName {
  color: yellow;
  background-color: transparent;
  border: 0px;
  width: 50px;
}

#radioName {
  color: yellow;
  background-color: transparent;
  border: 0px;
  width: 100px;
}

#checkName {
  color: yellow;
  background-color: transparent;
  border: 0px;
  width: 120px;
}

JavaScript

var renderer, camera, controls, scenevar, cylin, box;
var angle = 0;
var turn = true;
init();
animate();

function init() {

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.y = 200;
  camera.position.z = 150;

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  scene = new THREE.Scene();

  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.bottom = '5px';
  stats.domElement.style.left = '10px';
  stats.domElement.style.zIndex = 100;
  document.body.appendChild(stats.domElement);

  var gridXZ = new THREE.GridHelper(100, 10, 'red', 'lightgreen');
  var axes = new THREE.AxisHelper(10);
  scene.add(axes);
  scene.add(gridXZ);



  $("#button1").click(function() {
    if (axes.visible) {
      axes.visible = false;
      $("#button1").text("Show AxisHelper");
    } else {
      axes.visible = true;
      $("#button1").text("Hide AxisHelper");
    }
  });

  window.addEventListener('resize', onWindowResize, false);

  box = new THREE.Mesh(new THREE.BoxGeometry(100, 10, 10), new THREE.MeshNormalMaterial());


  cylin = new THREE.Object3D();
  cylin.add(makeCylinder());
  scene.add(cylin);

}

function makeCylinder() {
  var geometry = new THREE.CylinderGeometry(5, 5, 100, 32);
  var material = new THREE.MeshNormalMaterial();
  var cyl = new THREE.Mesh(geometry, material);
  cyl.rotation.z = Math.PI / 2;
  return cyl;
}


function onWindowResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}

function animate() {  
  controls.update();
  stats.update();
  renderer.render(scene, camera);
  if...