hw1

by jason870509

HTML

<div id="info">Custom Geometry</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

#info {
  position: absolute;
  top: 3%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, light, controls;
var frame1, frame2;
init();
animate();

function triangleExample() {
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  texture1 = loader.load('https://i.imgur.com/p8CRm9W.jpg');
  texture2 = loader.load('https://i.imgur.com/p8CRm9W.jpg');
  texture3 = loader.load('https://i.imgur.com/p8CRm9W.jpg');
  texture4 = loader.load('https://i.imgur.com/p8CRm9W.jpg');
  texture1.repeat.set(1, 2 / 3);
  texture2.repeat.set(2 / 3, 1);
  texture3.repeat.set(1 / 2, 1);
  texture4.repeat.set(1, 1 / 2);
  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(30, 20, 0),
    new THREE.Vector3(30, -20, 0),
    new THREE.Vector3(90, -20, 0),
    new THREE.Vector3(90, -20, -30),
    new THREE.Vector3(30, -20, -30),
    new THREE.Vector3(30, 20, -30)
  );

  var face;
  face = new THREE.Face3(1, 2, 0);
  face.materialIndex = 0;
  geometry.faces.push(face);
  face = new THREE.Face3(2, 3, 0);
  face.materialIndex = 1;
  geometry.faces.push(face);
  face = new THREE.Face3(0, 3, 5);
  face.materialIndex = 2;
  geometry.faces.push(face);
  face = new THREE.Face3(3, 4, 5);
  face.materialIndex = 3;
  geometry.faces.push(face);
  face = new THREE.Face3(1, 3, 2);
  face.materialIndex = 4;
  geometry.faces.push(face);
  face = new THREE.Face3(1, 4, 3);
  face.materialIndex = 5;
  geometry.faces.push(face);
  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  var materialArray = [];
  materialArray.push(new THREE.MeshPhongMaterial({
    map: texture1
  }));
  materialArray.push(new THREE.MeshPhongMaterial({
    map: texture4
  }));
  materialArray.push(new THREE.MeshPhongMaterial({
    map: texture3
  }));
  materialArray.push(new THREE.MeshPhongMaterial({
    map: texture2
  }));
  materialArray.push(new THREE.MeshPhongMaterial({
    map: texture3
  }));
  materialArray.push(new THREE.MeshPhongMaterial({
    map: texture3
  }));
  var uv0 =...