Radial Texture

by jmcjc5u

HTML

<div id="info">radial texture
</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 300;
  scene.add(camera);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  ////////////////////////////////////////////////////////////////////////
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = ""
  //  let tex = loader.load ("https://i.imgur.com/Y0d6EKH.png?3")
  let tex = loader.load("https://i.imgur.com/p8CRm9W.jpg") // checkerboard
  //https://i.imgur.com/p8CRm9W.jpg
  //https://i.imgur.com/fAoXTSN.jpg

  var geometry = new THREE.RingGeometry(30, 50, 62, 1);

  var uvs = geometry.attributes.uv.array;
  
  var phiSegments = geometry.parameters.phiSegments;  // 62
  var thetaSegments = geometry.parameters.thetaSegments; // 1
  for (var c = 0, j = 0; j <= phiSegments; j++) {
    for (var i = 0; i <= thetaSegments; i++) {
      uvs[c++] = i / thetaSegments * 8,
        uvs[c++] = j / phiSegments / 2;
    }
  }

  tex.wrapS = THREE.RepeatWrapping
  //tex.wrapT = THREE.RepeatWrapping

  var material = new THREE.MeshBasicMaterial({
    map: tex,
    side: THREE.DoubleSide
  });

	var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
	mesh.position.x = 60;
  
	var mesh0 = new THREE.Mesh (new THREE.RingGeometry(30, 50, 62, 1), material);
  scene.add (mesh0)
  mesh0.position.x = -60;
}

function animate() {

  requestAnimationFrame(animate);
  render();
}

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