JSFiddle - React, Tailwind, and code Playground

by Leoooo

HTML

<div id="info">train <br/>Press P to START
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>	
			<script src="https://code.jquery.com/jquery-2.1.4.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://rawgit.com/jyunming-chen/tutsplus/master/js/KeyboardState.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls;
var texture, mesh,light,train;
var gcontrols;

var keyboard = new KeyboardState();

init();
animate();
var angle=0,stop,speed;

function buildrail() {
  
  let part = new THREE.Object3D();
  var loader = new THREE.TextureLoader();
  var texture = loader.load ( 'https://img.freepik.com/free-photo/stone-sand-wall-hard-surface_1253-727.jpg?size=338&ext=jpg' );

   texture.repeat.set (1,0.75)
  texture.wrapS = texture.wrapT = THREE.WrapRepeating
  
  var rail1 = new THREE.Mesh (new THREE.RingGeometry(80,100,40,20,0,Math.PI), new THREE.MeshPhongMaterial({map:texture, side:THREE.DoubleSide}))
  rail1.rotation.x=-Math.PI/2;
  rail1.rotation.z=Math.PI/2;
  rail1.position.y=1;
  //
    var rail2 = new THREE.Mesh (new THREE.PlaneGeometry(200,20), new THREE.MeshPhongMaterial({map:texture, side:THREE.DoubleSide}))
 rail2.rotation.x=-Math.PI/2;
 rail2.position.y=1;
 rail2.position.z=-50;
 //
     var rail3 = new THREE.Mesh (new THREE.PlaneGeometry(200,20), new THREE.MeshPhongMaterial({map:texture, side:THREE.DoubleSide}))
 rail3.rotation.x=-Math.PI/2;
 rail3.position.y=1;
 rail3.position.z=50;
 //
var rail4 = new THREE.Mesh (new THREE.RingGeometry(80,100,10,20,0,Math.PI), new THREE.MeshPhongMaterial({map:texture, side:THREE.DoubleSide}))
  rail4.rotation.x=-Math.PI/2;
  rail4.rotation.z=-Math.PI/2;
  rail4.position.y=1;
 //
 
  part.add(rail1)
  //part.add(rail2)
  //part.add(rail3)
  part.add(rail4)
  return part;

}
function builtrailground(){
  let part = new THREE.Object3D();
  var loader = new THREE.TextureLoader();
  var texture = loader.load ( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAtNKkM_B3V5OdtIHbvhWvajN91xmArvlns0WAf3roXIy2dSU0' );

 
    var mesh1 = new THREE.Mesh(new THREE.PlaneGeometry(70, 20), 
  	new THREE.MeshBasicMaterial({map: texture}))
      var mesh2 = new THREE.Mesh(new THREE.PlaneGeometry(70, 20), 
  	new THREE.MeshBasicMaterial({map: texture}))
      var mesh3 = new THREE.Mesh(new...