Live Example

HTML

<html>

	<head>

		<title> Live Example </title>

		<style>
			body { margin: 0; position: fixed;}
			canvas { width: 100%; height: 100%; display: block;}
		</style>

		<script src="https://threejs.org/build/three.js"></script>
		<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

	</head>
	<body>

		<script>

			var renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xffffff );
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
			var controls = new THREE.OrbitControls( camera, renderer.domElement );

			camera.position.set( 10, 13, 10 );
			controls.target.set( 0, 0, 0 );


			var ambientLight = new THREE.AmbientLight();
      scene.add( ambientLight );
      
      
      var tl = new THREE.TextureLoader();
      var colorTex = tl.load( 'https://threejs.org/examples/textures/colors.png');
			var alphaTex = tl.load( 'https://threejs.org/examples/textures/alphaMap.jpg');
      
			var planeGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
      
			// setup new attribute uvs
			var uvb = new Float32Array( [
      	0.25, 0.75,
        0.75, 0.75,
        0.25, 0.25,
        0.75, 0.25
      ] );

			// var uvb = planeGeometry.attributes.uv.array; // uncomment to see difference

			planeGeometry.setAttribute( 'uvB', new THREE.BufferAttribute( uvb, 2 ) );
      
      
			var planeMaterial = new THREE.MeshPhongMaterial( {
        side: THREE.DoubleSide,
        transparent: true,
        map: colorTex,
        alphaMap: alphaTex,
			} );
      
      planeMaterial.onBeforeCompile = function( shader ) {
      
      	// vertex modifications
      	var vertex_pars = 'attribute vec2 uvB;\nvarying vec2 vUvB;\n';
        var vertex_uv = shader.vertexShader.replace(
          '#include...