JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/modifiers/SubdivisionModifier.js"></script>
<!-- Shaders -->
<script id="tileblend_pars_fragment" type="x-shader/x-vertex">
	#define USE_MAP 
	uniform sampler2D texBlendMap;
	uniform sampler2D texBaseColor;
	uniform sampler2D texTile1Color;
	uniform sampler2D texTile2Color;
	uniform sampler2D texTile3Color;
	//uniform sampler2D texTile4Color;

	uniform float repeatBase;
	uniform float repeatTile1;
	uniform float repeatTile2;
	uniform float repeatTile3;
	//uniform float repeatTile4;

</script>

	<script type="x-shader/x-vertex" id="tileblend_fragment">

   	vec4 tbBlend=texture2D( texBlendMap, vUv );
	float tbBaseWeight=1.0 - max(tbBlend.r, max(tbBlend.g, tbBlend.b));

	vec4 base =  tbBaseWeight * texture2D( texBaseColor, vUv * repeatBase );
	vec4 color1 = tbBlend.r * texture2D( texBaseColor, vUv * repeatTile1 );
	vec4 color2 = tbBlend.g * texture2D( texBaseColor, vUv * repeatTile2 );
	vec4 color3 = tbBlend.b * texture2D( texBaseColor, vUv * repeatTile3 );
	vec4 newColor = (vec4(0.0, 0.0, 0.0, 1.0) + base + color1 + color2 + color3) / (tbBaseWeight+tbBlend.r+tbBlend.g+tbBlend.b);

	diffuseColor = newColor; 

	</script>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;

THREE.ImageUtils.crossOrigin = '';

var blendTexture = new THREE.ImageUtils.loadTexture( 'https://cdn.glitch.com/27780c96-8860-401c-a4e0-26a8674900ba%2Fblendmap.jpg?1547950781376' );


var baseTexture = new THREE.ImageUtils.loadTexture( 'https://raw.githubusercontent.com/waverider404/game-assets/master/environ/frontend-large.jpg' );
baseTexture.wrapS = baseTexture.wrapT = THREE.RepeatWrapping;
var baseBump = new THREE.ImageUtils.loadTexture( 'http://test.ngongo-b.net/shaderExperiment/images/tex_moonforrest_soil_n.png' );
baseBump.wrapS = baseBump.wrapT = THREE.RepeatWrapping;

var grassTexture = new THREE.ImageUtils.loadTexture( 'https://cdn.glitch.com/27780c96-8860-401c-a4e0-26a8674900ba%2F26710550-idyllic-seamless-grass-texture.jpg?1547950940696' ); 
grassTexture.wrapS = grassTexture.wrapT = THREE.RepeatWrapping;
var grassBump = new THREE.ImageUtils.loadTexture( 'http://test.ngongo-b.net/shaderExperiment/images/tex_moonforrest_green_n.png' );
grassBump.wrapS = grassBump.wrapT = THREE.RepeatWrapping;


var rockyTexture = new THREE.ImageUtils.loadTexture( 'https://cdn.glitch.com/27780c96-8860-401c-a4e0-26a8674900ba%2F26710550-idyllic-seamless-grass-texture.jpg?1547950940696' );
rockyTexture.wrapS = rockyTexture.wrapT = THREE.RepeatWrapping;
var rockyBump = new THREE.ImageUtils.loadTexture( 'http://test.ngongo-b.net/shaderExperiment/images/tex_moonforrest_rock_n.png' );
rockyBump.wrapS = rockyBump.wrapT = THREE.RepeatWrapping;

var snowyTexture = new THREE.ImageUtils.loadTexture( 'https://raw.githubusercontent.com/waverider404/game-assets/master/environ/frontend-large.jpg' );
snowyTexture.wrapS = snowyTexture.wrapT = THREE.RepeatWrapping;
var snowyBump = new THREE.ImageUtils.loadTexture( 'http://test.ngongo-b.net/shaderExperiment/images/tex_moonforrest_snow_n.png' );
snowyBump.wrapS = snowyBump.wrapT = THREE.RepeatWrapping;


init();
animate();

function init() {

    // renderer
   ...