JSFiddle - React, Tailwind, and code Playground

by Millieyan

HTML

<div id="info">WEB3D HW2
  <br>
  <button id="tView" style="width:20%">Toggle Turn</button>

  <input type=range min=0 max=1 step=0.1 id='intensity'> intensity <br>

</div>
<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 src = "https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js" >

</script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/MTLLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js"></script>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

JavaScript

var scene, renderer, camera;
var camera1;
var lightsOff = false;

class Paint{
	constructor(fileName,width,height){
  	let loader = new THREE.TextureLoader();
    loader.crossOrigin = '';
    this.body = new THREE.Object3D();
    
    let self = this;
    loader.load('./p/'+fileName,function(mat){
    	let paint = new THREE.Mesh(new THREE.PlaneGeometry(width,height),
      													new THREE.MeshBasicMaterial({map: mat}));
      self.body.add(paint);
    },undefined,
    function(error){
    	console.log(error);
    });
    
    scene.add(this.body);
  }
}

$('#intensity').change(function() {
  console.log($(this).val());
  light.intensity = $(this).val();
})

$('#tView').click(function() {
  //  toggleCamera();
  lightsOff = !lightsOff;

  if (lightsOff) {
    light.intensity = 0;
    light2.intensity = 0;
  } else {
    light.intensity = .5;
    light2.intensity = .5;
  }
});

function Createbench() {
  var bench = new THREE.Object3D();
  var mat = new THREE.MeshPhongMaterial({
    color: 0xE69966
  });
  var body = new THREE.Mesh(new THREE.BoxGeometry(140, 6, 50), mat);
  var f1 = new THREE.Mesh(new THREE.BoxGeometry(10, 30, 10), mat);
  var f2 = new THREE.Mesh(new THREE.BoxGeometry(10, 30, 10), mat);
  var f3 = new THREE.Mesh(new THREE.BoxGeometry(10, 30, 10), mat);
  var f4 = new THREE.Mesh(new THREE.BoxGeometry(10, 30, 10), mat);
  bench.add(body);
  bench.add(f1, f2, f3, f4);
  body.position.set(-60, 30, 0);
  f1.position.set(-125, 15, 20);
  f2.position.set(-125, 15, -20);
  f3.position.set(5, 15, 20);
  f4.position.set(5, 15, -20);
  
  bench.traverse((e) => {
  	if(e instanceof THREE.Mesh){
    	e.castShadow = true;
      e.receiveShadow = true;
    }
  })
  
  return bench;
}

function Createlight(x, y, z) {
  var lighta = new THREE.Object3D();
  var mat = new THREE.MeshBasicMaterial({
    color: 0xffffff
  });
  var body = new THREE.Mesh(new THREE.CylinderGeometry(4, 8, 15, 30), mat);
  lighta.add(body);
  lighta.position.set(x, y, z);

  var...