JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/"
    }
  }
</script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from 'three';
var scene = new THREE.Scene();
var camera = new THREE.Camera();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var texLoader = new THREE.TextureLoader();
var tex = texLoader.load("https://threejs.org/examples/textures/uv_grid_opengl.jpg");

var planeGeom = new THREE.PlaneGeometry(2, 2);
var planeMat = new THREE.MeshBasicMaterial({
  map: tex
});

var uniforms = {
	mapSize: {
  	value: new THREE.Vector2(10, 10)
  },
  tiling: {
  	value: new THREE.Vector2(8, 8)
  },
  tile: {
  	value: new THREE.Vector2(0, 0)
  }
}

planeMat.onBeforeCompile = shader => {
  //console.log(shader.fragmentShader);
  shader.uniforms.mapSize = uniforms.mapSize;
  shader.uniforms.tiling = uniforms.tiling;
  shader.uniforms.tile = uniforms.tile;
  shader.fragmentShader = `
  	uniform vec2 mapSize;
  	uniform vec2 tiling;
    uniform vec2 tile;
  ` + shader.fragmentShader;
  shader.fragmentShader = shader.fragmentShader.replace(
    `#include <map_fragment>`,
    `
    #ifdef USE_MAP
    
    	vec2 fUv = fract(vMapUv * tiling);
      vec2 tUv = 1. / mapSize;
     	fUv = vec2(tUv.x * tile.x, tUv.y * tile.y) + (fUv / mapSize);
      
      vec4 texelColor = texture2D( map, fUv );
      diffuseColor *= texelColor;
    #endif
    `
  );
};

var plane = new THREE.Mesh(planeGeom, planeMat);
scene.add(plane);

var clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
  uniforms.tile.value.x = Math.floor(clock.getElapsedTime() * 2 % 10);
  renderer.render(scene, camera)
});