game1

by Millieyan

HTML

<div id="info">Game Programming HW1<br></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">


</script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/KeyboardState.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

CSS

body {
  overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls;
var angle = 0;
var triangle, building;
var keyboard = new KeyboardState();
var stats;

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

class buildTriangle {
  constructor() {
    let texture = loader.load("https://i.imgur.com/DrvlmNW.jpg");
    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);
    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, 0.5), new THREE.Vector2(0.25, 0.75)]);

    geometry.computeBoundingSphere();
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    this.body = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
      map: texture
    }));
    this.body.traverse(
      function(body) {
        if (body instanceof THREE.Mesh) {
          body.castShadow = true
        }
      }
    );
    scene.add(this.body);

    this.speed = 0.1;
    this.angle = 0.0;
  }
  update(dt) {
    keyboard.update();
    if (keyboard.pressed("up"))
      this.speed += 0.5;
    if (keyboard.pressed("down"))
      this.speed -= 0.5;
    if (keyboard.pressed("left"))
      this.angle += 0.05;
    if (keyboard.pressed("right"))
     ...