target and pick

by joe chan

HTML

<h1 style="text-align:center"> Inelastic collision
<br>(fire: J)(aim: L)(I and K control to aim)(pick up ball: O)
</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/87/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 raycaster = new THREE.Raycaster();
var raycasterR = new THREE.Raycaster();
var raycasterR2 = new THREE.Raycaster();
var raycasterR3 = new THREE.Raycaster();
var raycasterR4 = new THREE.Raycaster();
var raycasterR5 = new THREE.Raycaster();

var targetarr = [];

var tank, barrel, turret, ball, head;
var tankP, avatarBody, v, vP = new THREE.Vector3(1, 0, 0);

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

var go = 0;
var angle = 0;
var change = 0;
var changeX = 0, changeY = 1, changeZ = 0;

var pickables = [];
var plane = [];

var intersects, intersectsR, intersectsR2, intersectsR3, intersectsR4, intersectsR5;
var laser, laserR;

var curve;
var dataPoints = [];
var uu = 0;
var fireStart = false;
var fire = true;

var speed = 0.006;

init();
animate();

function buildPlane() {

  var material = new THREE.MeshBasicMaterial({
    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 buildTarget(){
  var target = new THREE.Mesh(new THREE.CylinderGeometry(3,3,1.5,35),new THREE.MeshBasicMaterial({
    color: 0xf7ffaa}));
  return target;
}

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(0xbbbbbb);
  $("#container2").append(renderer2.domElement);

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

  scene = new THREE.Scene();
 ...