custom geometry

by jmcjc5u

HTML

<div id="info">
  custom geometry
</div>
<script src="https://threejs.org/build/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	  position: absolute;
	}

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

JavaScript

var scene, renderer, camera;

init();
animate();

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0xaaaaaa);

  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red','white');
  scene.add(gridXZ);

  var pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.set(0, 300, 200);
  scene.add(pointLight);

  var ambientLight = new THREE.AmbientLight(0x444444);
  scene.add(ambientLight);

  window.addEventListener('resize', onWindowResize, false);
	
  //////////////////////////////////////////////////////////
	var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(30, 0, 0),
    new THREE.Vector3(0, 0, 10),
    new THREE.Vector3(0, 0, -10),
    new THREE.Vector3(0, 10, 0)
  );

  var face;
  face = new THREE.Face3(0,3,1);
//  face.materialIndex = 0;  // only one material, no need to set materialIndex
  geometry.faces.push(face);
  face = new THREE.Face3(0,2,3);
  geometry.faces.push(face);
  face = new THREE.Face3(0,1,2);
  geometry.faces.push(face);
  face = new THREE.Face3(1,3,2);
  geometry.faces.push(face);

  geometry.faceVertexUvs[0].push([new THREE.Vector2(1,0.5), new THREE.Vector2(0.25, 0.5), new THREE.Vector2(0.25,0.25)]);
  geometry.faceVertexUvs[0].push([new THREE.Vector2(1,0.5), new THREE.Vector2(0.25, 0.75), new THREE.Vector2(0.25,0.5)]);
  geometry.faceVertexUvs[0].push([new THREE.Vector2(1,0.5), new THREE.Vector2(0.25, 0.25), new THREE.Vector2(0.25,0.5)]);
  geometry.faceVertexUvs[0].push([new THREE.Vector2(0.25,0.25), new THREE.Vector2(0,...