JSFiddle - React, Tailwind, and code Playground

by Millieyan

HTML

<h2 style="font-size:2em; text-align:center; margin:9px"> 
歐洲著名畫家
</h2>

<div id="container">
<!--canvas id='mycanvas'></canvas-->
</div>

  <br>
  <button id = "toggle"style="width:16%">toggle</button>
  <button id="tView" style="width:16% height:10%">Toggle Turn</button>
  <input type=range min=0 max=1 step=0.1 id='intensity'> intensity <br>

<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>

CSS

#container {
  width: 60vw;
  height: 60vw;
  float: left;
  background-color: yellow;
  margin: 10px;
}

p {
  margin: 10px;
  text-align: justify;
}

JavaScript

var scene, renderer, camera;
var camera1;
var lightsOff = false;
var cameraObj;
var safety = false;
var keys = [
  [0, 0], [0.4, 0.6], [0.5, 0.6], [0.9, 0], [1, 0]
];
var T = 2;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();

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, side: THREE.DoubleSide}));
      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...