JSFiddle - React, Tailwind, and code Playground

by Leoooo

HTML

<div id="info">train
</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>

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;


init();
animate();


function buildrail() {
  
  let part = new THREE.Object3D();
  var loader = new THREE.TextureLoader();
  var texture = loader.load ( 'https://res.cloudinary.com/twenty20/private_images/t_watermark-criss-cross-10/v1442620321000/photosp/21159458-8f44-49a1-bca9-07b250ad47d9/stock-photo-nature-brown-textured-pattern-wall-backgrounds-black-wood-dark-21159458-8f44-49a1-bca9-07b250ad47d9.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 buildtrain() {
  
  let part = new THREE.Object3D();
  var loader = new THREE.TextureLoader();
  var texture1 = loader.load ( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxWbF5u2acOpaq34Hg-AI61apoEhfAJes9fVF2xQ-yOtOhOmG9qA' );

   texture1.repeat.set (2,1)
  texture1.wrapS = texture1.wrapT = THREE.WrapRepeating
  var tire1=buildtire();var tire2=buildtire();
  var tire3=buildtire();var tire4=buildtire();
  var...