FINAL

move // third person view

by joe chan

HTML

<div id="info">Right click to make point
  <br>
  <button id="makeCurve" style="width:20%">Make Curve amd move</button>
  <p id="v1">
    Third-person view
  </p>
  <p id="v2">
    view 2
  </p>
  <canvas id='mycanvas'>
    <canvas>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

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

#gui {
  position: absolute;
  top: 0px;
  left: 0px;
  border: solid 1px green;
  //height: 350px;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, mesh, light, controls;
var puck = [];
var pbody, poeple;
var counter = 0;

var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];
var dataPoints = [];
var dataPointGroup = new THREE.Object3D();
var gcontrols, resController, typeController, speedController;
var mycanvas;
var mousePoint;
var curve;
var uu = 0;
var move = -1,
  look = -1;
var direction;
var quaternion = new THREE.Quaternion();

init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 200, 100);
  scene.add(camera);
  window.addEventListener('resize', onWindowResize, false);

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

  light = new THREE.PointLight(0xffffff);
  light.position.set(0, 150, 0);
  scene.add(light);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  mycanvas = document.getElementById('mycanvas');
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: mycanvas
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x666666);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  ////////////////////////////////////////////////////////////////////////wall

  var geometry = new THREE.PlaneGeometry(170, 170);
  var material = new THREE.MeshLambertMaterial({
    color: 0xaaaaaa,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5,
    visible: true
  });

  var plane = new THREE.Mesh(geometry, material);
  plane.rotation.x = -Math.PI / 2;


  pickables = [plane];
  scene.add(plane);
  /////////////////////////////////////
  people = new THREE.Object3D();
  var nose_Geometry = new THREE.CylinderGeometry(.3, 0.9, 3, 32);
  var nose = new THREE.Mesh(nose_Geometry, new THREE.MeshBasicMaterial({
    color: 0xf06ca0
  }));

  nose.rotation.x = 2 / 5 * Math.PI;
 ...