Live Example

by truji7

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( 0x80a0a0 );
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
			var controls = new THREE.OrbitControls( camera, renderer.domElement );

			camera.position.set( 0, 0, 15 );
			controls.target.set( 0, 0, 0 );


			var ambientLight = new THREE.AmbientLight();
      scene.add( ambientLight );
      
      
      var tl = new THREE.TextureLoader();
			var alphaTex = tl.load( 'https://i.postimg.cc/nzTNj0yr/alpha-Mask.jpg');

			for (let mode = 0 ; mode < 3 ; mode++){
      	var colorTex = tl.load( 'https://i.postimg.cc/nrzgvqxk/siurana.jpg');
      
				var planeGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
	    
 
  			if (mode == 1){
          let uvs= planeGeometry.attributes.uv;
          for (let ix = 0; ix< uvs.array.length; ix++){
              let x = uvs.getX(ix);
              let y = uvs.getY(ix);
              uvs.setXY(ix, x*.5, y*.5);
          }
	      }
        else
        if (mode == 2){
          	colorTex.repeat.set(.5,.5);
            alphaTex.repeat.set(1,1);		//(does nothing)
        }
          
      
        var planeMaterial = new THREE.MeshPhongMaterial( {
          side: THREE.DoubleSide,
          transparent: true,
          map: colorTex,
          alphaMap: alphaTex,
        } );
      
      
        var plane = new THREE.Mesh( planeGeometry, planeMaterial );
        
        plane.position.x...