Topic

move on six faces(with tank)

by joe chan

HTML

<h1 style="text-align:center"> move on six faces (k-drive) 
<br>(left:A up:W right:D)(I and K control ot aim)(fire:space)
</h1>

<hr>
<div id="container2" style="background:pink; float:left; margin:3px; width:45vw; height:45vw"></div>
<div id="container" style="float:right; margin:3px; width:45vw; height:45vw">
</div>
<br>
<hr style="clear:both">

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

.dbutton {
  padding: 4px;
  background: green;
  border-radius: 4px;
  cursor: pointer;
}

.dbutton.selected {
  background: orange;
}

JavaScript

var camera, scene, renderer;
var camera2, scene2, renderer2;
var controls;
var keyboard = new KeyboardState();

var tank;
var go = 0;
var change = 0;

var upTemp = new THREE.Vector3();
var cameraOffset;

var changeX = 0, changeY = 1, changeZ = 0;

var tankP;
var avatarBody;
var v;
var r;
var vP = new THREE.Vector3(1, 0, 0);

var raylaser = new THREE.Raycaster();
var raylaserTemp = new THREE.Raycaster();;
var pickables = [];
var laser;
var faxs = new THREE.Object3D();
var angle = 0;
var asix0;
var tank;
var intersects;
var intersectsTemp;
var plane = [];
var reflactP;

init();
animate();

function buildPlane() {

  var material = new THREE.MeshNormalMaterial({
    side: THREE.BackSide
  });

  var plane = new THREE.Mesh(new THREE.PlaneGeometry(150, 150, 32, 32), material);

  return plane;

}

function buildTank() {

  var tank = new THREE.Object3D();
  var body = new THREE.Mesh(new THREE.BoxGeometry(20, 3, 10), new THREE.MeshBasicMaterial({color: 0x005121}));
  
  body.position.y = 1.5;
  tank.add(body);

  return tank;

}

function init() {

  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);

  renderer2 = new THREE.WebGLRenderer();
  renderer2.setSize(ww, hh);
  renderer2.setClearColor(0x888800);
  $("#container2").append(renderer2.domElement);

  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(90, ww / hh, 1, 1000);
  camera.position.z = 50;

  camera2 = new THREE.PerspectiveCamera(50, ww / hh, 1, 1000);
  camera2.position.z = 500;

  scene.add(new THREE.AxisHelper(25));

  var grid = new THREE.GridHelper(150, 15, 'red', 'white');

  //scene.add(grid);
  grid.position.y = -75;
  controls = new THREE.OrbitControls(camera2, renderer2.domElement);

 ...