sheminusminus/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Emily Kolar"/>
    <title>emkolar.ninja</title>
    <link rel="icon" type="image/png" href="./favicon.png" />
    <link rel="stylesheet" href="./css/normalize.css"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />
    <link href="./css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>

  <div id="react"></div>

  <script src="three.min.js"></script>

  <script>
    (function() {
      // just so webstorm stops whining about undef
      const THREE = window.THREE;

      let container;
      let camera;
      let scene;
      let renderer;
      let group;
      let cubes;

      const geometry = new THREE.BoxBufferGeometry(1,1,1);

      // ~~~~~~~~
      // calling this causes the error at https://imgur.com/MhyDQnN
      // ~~~~~~~~
      function addImageBitmap() {
        new THREE.ImageBitmapLoader()
          .setOptions({ imageOrientation: 'none' })
          .load('img/exo.jpg', function (imageBitmap) {
            const texture = new THREE.CanvasTexture(imageBitmap);
            const material = new THREE.MeshBasicMaterial({ map: texture });
            addCube(material);
          }, function(p) {
            console.log(p);
          }, function(e) {
            console.log(e);
          });
      }

      function addImage() {
        new THREE.ImageLoader()
          .setCrossOrigin('*')
          .load('img/exo.jpg', function (image) {
            const texture = new THREE.CanvasTexture(image);
            const material = new THREE.MeshBasicMaterial({ color: 0xff8888, map: texture });
            addCube(material);
          });
      }

      function addCube(material) {
        let cube = new THREE.Mesh(geometry, material);
        cube.position.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
        cube.rotation.set(Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI);
        cubes.add(cube);
      }

      function init() {
        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1500);
        camera.position.set(0, 4, 7);
        camera.lookAt(new THREE.Vector3());

        scene = new THREE.Scene();

        group = new THREE.Group();

        scene.add(group);
        group.add(new THREE.GridHelper(4, 12));

        cubes = new THREE.Group();
        group.add(cubes);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(800, 800);
        container.appendChild(renderer.domElement);

        addImage();

        window.addEventListener('resize', onWindowResize, false);
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function animate() {
        group.rotation.y = performance.now() / 3000;
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
      }

      init();
      animate();
    })();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="Emily Kolar"/>
	<title>emkolar.ninja</title>
	<link rel="icon" type="image/png" href="./favicon.png" />
	<link rel="stylesheet" href="./css/normalize.css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />
	<link href="./css/font-awesome.min.css" rel="stylesheet" />
	</head>
	<body>

	<div id="react"></div>

	<script src="three.min.js"></script>

	<script>
	(function() {
	// just so webstorm stops whining about undef
	const THREE = window.THREE;

	let container;
	let camera;
	let scene;
	let renderer;
	let group;
	let cubes;

	const geometry = new THREE.BoxBufferGeometry(1,1,1);

	// ~~~~~~~~
	// calling this causes the error at https://imgur.com/MhyDQnN
	// ~~~~~~~~
	function addImageBitmap() {
	new THREE.ImageBitmapLoader()
	.setOptions({ imageOrientation: 'none' })
	.load('img/exo.jpg', function (imageBitmap) {
	const texture = new THREE.CanvasTexture(imageBitmap);
	const material = new THREE.MeshBasicMaterial({ map: texture });
	addCube(material);
	}, function(p) {
	console.log(p);
	}, function(e) {
	console.log(e);
	});
	}

	function addImage() {
	new THREE.ImageLoader()
	.setCrossOrigin('*')
	.load('img/exo.jpg', function (image) {
	const texture = new THREE.CanvasTexture(image);
	const material = new THREE.MeshBasicMaterial({ color: 0xff8888, map: texture });
	addCube(material);
	});
	}

	function addCube(material) {
	let cube = new THREE.Mesh(geometry, material);
	cube.position.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
	cube.rotation.set(Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI);
	cubes.add(cube);
	}

	function init() {
	container = document.createElement('div');
	document.body.appendChild(container);

	camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1500);
	camera.position.set(0, 4, 7);
	camera.lookAt(new THREE.Vector3());

	scene = new THREE.Scene();

	group = new THREE.Group();

	scene.add(group);
	group.add(new THREE.GridHelper(4, 12));

	cubes = new THREE.Group();
	group.add(cubes);

	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(800, 800);
	container.appendChild(renderer.domElement);

	addImage();

	window.addEventListener('resize', onWindowResize, false);
	}

	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	function animate() {
	group.rotation.y = performance.now() / 3000;
	renderer.render(scene, camera);
	requestAnimationFrame(animate);
	}

	init();
	animate();
	})();
	</script>
	</body>
	</html>