game_3Js_hw1_car

by otorineko6790

HTML

<div id="info">
  <br/>
  <button id="third" style="width:20%">第三人稱</button>
  <button id="fist" style="width:20%">第一人稱</button>
  <button id="godMode" style="width:20%">上帝視角</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

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, mesh, controls;
var keyboard = new KeyboardState();
var clock, texture;

var car;
var pos = new THREE.Vector3();
var vel = new THREE.Vector3();
var force = new THREE.Vector3();
var power, angle;
var loader = new THREE.TextureLoader();
loader.setCrossOrigin('');

var fistView = true,
  thirdView = false,
  godView = false;
var camera1, camera3, cameraG;

//button 
//https://jsfiddle.net/otorineko6790/0gwd6ohg/
$("#fist").click(function() {
  $("#fist").hide();
  $("#third").toggle(true);
  fistView = !fistView;
  thirdView = !thirdView;
});
$("#third").hide();
$("#godMode").hide();

$("#third").click(function() {
  $("#godMode").toggle(true);
  $("#third").hide();
  thirdView = !thirdView;
  godView = !godView;
});

$("#godMode").click(function() {
  $("#fist").toggle(true);
  $("#godMode").hide();
  godView = !godView;
  fistView = !fistView;
});
/*
class Particle {
  constructor(mesh, power, angle) {
    this.pos = new THREE.Vector3();
    this.vel = new THREE.Vector3();
    this.force = new THREE.Vector3(1, 0, 0);
    this.mesh = mesh;
    this.power = power;
    this.angle = angle;
  }

  update(dt) {
    keyboard.update();

    if (this.vel.length() > 0) {
      this.angle = Math.atan2(-this.vel.z, this.vel.x); // update orientation
    }

    if (keyboard.pressed("space"))
      this.power = 0.1;
    if (keyboard.pressed("up"))
      this.power *= 1.2;
    if (keyboard.pressed("down"))
      this.power /= 1.2;

    this.power = Math.clamp(this.power, 0, 80.0);


    var angle_thrust = this.angle;
    if (keyboard.pressed("left")) {
      angle_thrust += 0.3;
    }
    if (keyboard.pressed("right")) {
      angle_thrust -= 0.3;
    }

    // compute force
    var thrust = new THREE.Vector3(1, 0, 0).multiplyScalar(this.power).applyAxisAngle(new THREE.Vector3(0, 1, 0), angle_thrust);
    this.force.copy(thrust);
    this.force.add(this.vel.clone().multiplyScalar(-2))

    this.vel.add(this.force.clone().multiplyScalar(dt));
   ...