hw1

by Leoooo

HTML

<div id="info">hw1</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, mesh;
var angle=0;
var model;
var dlhelper, dlshelper, light2,a;

init();
animate();
function triangleExample() {

  let part = new THREE.Object3D();
  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(20, 0, 0),//a
    new THREE.Vector3(60, 0, 0),//b
    new THREE.Vector3(20, 30, 0),//c

    new THREE.Vector3(60, 0, -20),//d
    new THREE.Vector3(20, 0, -20),//e
    new THREE.Vector3(20, 30, -20)//f

  );

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

  st0 = new THREE.Vector2(0, 0);
  st1 = new THREE.Vector2(1, 0);
	st2 = new THREE.Vector2(0, 0.75);
  //
  st5 = new THREE.Vector2(1, 0);
  st6 = new THREE.Vector2(1, 0.75);
	st7 = new THREE.Vector2(0, 0);
  //
 
  //
	st3 = new THREE.Vector2(1, 0.6);
  st4 = new THREE.Vector2(0, 0.6);
  //
  st8 = new THREE.Vector2(0, 0.5);
  st9 = new THREE.Vector2(1, 0.5);
  geometry.faceVertexUvs[0].push([st0, st1, st2]);
  geometry.faceVertexUvs[0].push([st6, st7, st5]);
  geometry.faceVertexUvs[0].push([st0, st8, st1]);
  geometry.faceVertexUvs[0].push([st8, st1, st0]);
  geometry.faceVertexUvs[0].push([st1, st4, st3]);
  geometry.faceVertexUvs[0].push([st4, st1, st0]);
  
  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
//  geometry.computeVertexNormals();
  var loader = new THREE.TextureLoader();
  var texture = loader.load ( 'https://i.imgur.com/p8CRm9W.jpg' );

  var materialArray = [];
  materialArray.push(new THREE.MeshPhongMaterial({
 //...