Threejs - UV Basic

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<div id="uvcanvas">
</div>

CSS

img {
  width:128px;
  border: thin solid grey;
  margin:2px;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera);
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(5,5,5));
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var gh = new THREE.GridHelper();
scene.add(gh);

// ########################################### playground starts here

var testMaterial = new THREE.MeshBasicMaterial();
var realWorldTextureScale = 1; //inches
/* var imageTextureURL = 'http://1.bp.blogspot.com/-_Rg7AgtX6_E/TbVlFA8l-yI/AAAAAAAAAD4/ipkJlfECQKQ/s400/texturegrid1024.jpg'; */
var imageTextureURL = 'https://freestocktextures.com/texture/fern-leaves';

loadAndApplyTextureToMaterial(realWorldTextureScale, imageTextureURL, testMaterial);

// spheres
var radius = 1;
var s1 = createSphere(radius,testMaterial);
radius = 2;
var s2 = createSphere(radius,testMaterial);
s2.position.y -= 4;
//copyUV(s2,s1);
//scaleUVTest(s2, .5);
//displayUV(s1, 2048);
//displayUV(s2, 2048);

// boxes
var boxSize = 1;
var b1 = createBox(boxSize, testMaterial);
b1.position.x += 2;
boxSize = 4;
var b2 = createBox(boxSize, testMaterial);
b2.position.x += 3 + boxSize/2;

//scaleUVTest(b2, .5);
//displayUV(b2);

// how to scale texture
setTimeout(function(){
	console.log(b2.material.map);
  //b2.material.map.repeat.set(1, 1);
  //b2.material.map.repeat.set(1, 1);
}, 2000);

// scale uv
//uvCubeProjection(b2,boxSize);
//displayUV(b1,256);
//displayUV(b2,256);

// planes
var p = createPlane(1,1,testMaterial);
p.position.x -= 2;
var p2 = createPlane(2,2,testMaterial);
p2.position.x -= 4;
//displayUV(p,...