JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Setting UVs so the same image appears on each face without distortion.
// Three.js (r.50)
// WestLangley
var mesh, renderer, scene, camera;
var controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 120;
camera.lookAt( scene.position );
scene.add( camera );
// controls
controls = new THREE.OrbitControls( camera );
// directional
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 100, 100, 100 );
scene.add( light );
// ambient
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
// geometry
var R = 25;
var r = 10;
// Set the height parameter so that the height of each face
// is equal to the width of the face at it's base.
// This is only done to make the UV calculations easier; it is not required.
var h = Math.sqrt( ( 2 * R * R ) - ( ( R - r ) * ( R - r ) / 2 ) );
var geometry = new THREE.CylinderGeometry( r, R, h, 4, 1, true );
// reset uvs
// Reset the UVs so the texture image appears on each face -- without distortion.
var factor = ( 1 - ( r / R ) ) / 2;
// Note that if factor is zero, then the UVs are reset to be the four corners
// of the texture, and the mapping to a trapezoidal face results in distortion.
//var factor = 0;
for( var i = 0; i < geometry.faceVertexUvs[ 0 ].length; i++ ) {
var uvs = geometry.faceVertexUvs[ 0 ][ i ];
uvs[ 0 ].u = factor;
uvs[ 0 ].v = 1;
uvs[ 1 ].u = 0;
uvs[ 1 ].v = 0;
uvs[ 2 ].u = 1;
uvs[ 2 ].v = 0;
uvs[ 3 ].u = 1 - factor;
uvs[ 3 ].v =...