JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 3, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var cylinderGeom = new THREE.CylinderGeometry(1, 1, 3, 32);
var textureLoader = new THREE.TextureLoader();
var materials = [
	new THREE.MeshBasicMaterial({map: textureLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg")}),
  new THREE.MeshBasicMaterial({map: textureLoader.load("https://threejs.org/examples/textures/colors.png")})
];

var cylinder = new THREE.Mesh(cylinderGeom, materials);

scene.add(cylinder);

render();
function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}