THREEJS - Loading Images around CORS

Loading images whos domain does not set cors security to on. you can try uploading images to https://unsplash.com/ and load images form there, as their images do not have CORS set. Which allows you to load the image with crossORigin set to anonymous.

by black strings

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="images">
  <!-- enable the code section in the loader to show the loaded image here -->
</div>

CSS

body {
  margin:0;
}
button {
  border: thin solid red;
  text-weight: bold;
}
#texture {
  padding: 5px;
  font-weight: bold;
}

JavaScript

/**
sites that don't have cors set

// this one is good, although the image is pending, you can still use the url address to load it to jsfiddle
https://stocksnap.io/account

https://unsplash.com/ - requires large 3mb images only and limit to 10 uploads
*/
var width = window.innerWidth;
var height = window.innerHeight * .75;
var mod = {};
var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();


renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
// for lights to work
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

document.body.appendChild( renderer.domElement );
scene.add(camera);

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

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

var gridSize = 256;
var gridSegments = 56;
var grid = new THREE.GridHelper(gridSize, gridSegments);
scene.add(grid);

var Line = function(start, vectorDist){
  	this.start = start;
    this.end = start.clone();
   	this.end.add(vectorDist);
    
    this.scene = scene;
    // create line
  	var lineMat = new THREE.LineBasicMaterial({ color: 0x0000ff });
    var lineGeo = new THREE.Geometry();
    lineGeo.vertices.push(this.start);
    lineGeo.vertices.push(this.end);
    this.mesh = new THREE.Line(lineGeo, lineMat);
}

// ---------------------- playground starts here ----------------------

// load images

//loadTexture2('https://images.unsplash.com/photo-1463428537233-c84b754b2c84?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7052428fb997201fc51fcb47f494259e&auto=format&fit=crop&w=500&q=60', 1);

var imgIndex = 0;

// all img paths, the images must be from domains that allow CORS security
var...