戰車

by j91157j91157

HTML

<div id="info">press "WASD" to move chariot
  <br/>press "OKL;" to move cannon
  <br/>press SPACE to switch camera
  <br/>press "E" to fire<br>
  <button id='start'>start</button>
  <button id='clear'>claer</button>
  <button id='random'>random</button>
 <div>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/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>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

body {
  overflow: hidden
}

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

JavaScript

class Ball {
  constructor() {
    this.pos = new THREE.Vector3();
    this.vel = new THREE.Vector3();
    this.force = new THREE.Vector3(0, -10, 0);
  }

  update(dt) {
    this.vel.add(this.force.clone().multiplyScalar(dt));
    this.pos.add(this.vel.clone().multiplyScalar(dt));
    if (this.pos.y < 1) {
      this.pos.y = 1;
      this.stopped = true;
    }
  }

  setPos(pos) {
    this.pos = pos;
  }

  getPos() {
    return this.pos;
  }

  getisStopped() {
    return this.stopped === true ? 1 : 0;
  }

  start() {
    this.stopped = false;
    this.vel.set(tmp.getWorldPosition().x - turn.getWorldPosition().x,
      tmp.getWorldPosition().y - turn.getWorldPosition().y,
      tmp.getWorldPosition().z - turn.getWorldPosition().z).normalize().multiplyScalar(50);
  }
}


var renderer, camera, controls, scene, keyboard = new KeyboardState();
var Chariot, angle = 0;
var base, turret, turn, cannon;
var camera3rd;
var ball, ballMesh, tmp;
var target, toggle = false;

init();
animate();

function buildBall() {
  var ball = new Ball();
  var loader = new THREE.TextureLoader();
  loader.setCrossOrigin ('');
  var material = new THREE.MeshBasicMaterial({
    map: loader.load('https://raw.githubusercontent.com/j91157j91157/CGHW/master/texture/HW3/ball.jpg')
  })
  var ballMesh = new THREE.Mesh(new THREE.SphereGeometry(1.4, 20, 20), material);
  balls.push(ball);
  ballMeshes.push(ballMesh);
  scene.add(ballMesh);
}


function hit(ball) {
  if (ball.getPos().x > target.position.x - 5 && ball.getPos().x < target.position.x + 5) {
    if (ball.getPos().y > target.position.y - 5 && ball.getPos().y < target.position.y + 5) {
      if (ball.getPos().z > target.position.z - 5 && ball.getPos().z < target.position.z + 5) {
        return true;
      }
    }
  }
  return false;
}

function loadCubemap() {

  var urls = [
    'https://raw.githubusercontent.com/j91157j91157/CGHW/master/texture/HW3/posx.jpg',
   ...