JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<div class="container">
  <div class="up">
    <fieldset>
      <legend> Customize Watch :</legend>
      Engraved Text:
      <input type="text" id="engtxt">
      <br> Embossed Text:
      <input type="text" id="embosstxt">
      <br> Choose Color :
      <input type="radio" class="cblack" name="col" value="black"> Black </input>
      <input type="radio" class="cred" name="col" value="red"> Red </input>
      <input type="radio" class="cblue" name="col" value="blue"> Blue </input>
    </fieldset>
  </div>
  <div class="down">
    <progress id="progressBar" value="2" max="100"></progress>
  </div>
</div>


<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
   margin-top: 20px;
   text-align: center;
 }

 canvas {
   width: 95% !important;
   height: 80% !important;
   cursor: move;
 }

 #progressBar {
   width: 95%;
 }

 .up {
   width: 50%;
   margin: 0 auto;
 }

 .down {
   width: 80%;
   margin: 0 auto;
 }

 input {
   margin-bottom: 10px;
 }

JavaScript

// WebGl suppport detector

if (!Detector.webgl) Detector.addGetWebGLMessage();

var container, stats;

var camera, scene, renderer, controls;
var mouseX = 0,
  mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
//initailize
init();
animate();

function init() {
  container = document.createElement("div");
  document.querySelector(".down").appendChild(container);
  camera = new THREE.PerspectiveCamera(
    50, //fov
    window.innerWidth / window.innerHeight,
    1,
    2000
  );
  controls = new THREE.OrbitControls(camera);
  // set camera position :
  //camera.position.set(0, 20, 100);
  camera.position.z = 20;
  controls.autoRotate = true;
  controls.autoRotateSpeed = 5;
  //controls.update();
  controls.enableDamping = false;

  // scene
  scene = new THREE.Scene();
  // adding lights to scene
  var ambient = new THREE.AmbientLight(0x444444, 1);
  scene.add(ambient);

  var directionalLight = new THREE.DirectionalLight(0xffeedd);
  directionalLight.position.set(0, 0, 1).normalize();
  scene.add(directionalLight);

  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(0, 200, 200);
  scene.add(spotLight);

  // progress loader
  var onProgress = function(xhr) {
    if (xhr.lengthComputable) {
      var percentComplete = xhr.loaded / xhr.total * 100;
      console.log(Math.round(percentComplete, 2) + "% downloaded");
      document.querySelector("#progressBar").value = percentComplete;
    }
  };

  var onError = function(xhr) {};

  // BEGIN Clara.io JSON loader code
  var objectLoader = new THREE.ObjectLoader(); //three.js:36170 THREE.JSONLoader: watch.scene-json/watch.json should be loaded with THREE.ObjectLoader instead.
  objectLoader.load(
    "apple-watch-threejs/apple-watch.json",
    //"apple-watch-obj/apple-watch.obj",
    function(obj) {
      scene.add(obj);
    },
    onProgress,
    onError
  );
  // JSON Loader format
  /*var loader = new THREE.ObjectLoader();
 ...