Basic Three.js Third Person Camera

by vrmeup

HTML

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
    }
  }
</script>

CSS

body,
canvas {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden
}

JavaScript

import * as THREE from 'three';

// W,A,S,D 	= Movement
// + Shift 	= Run
// Q,E 			= Rotate Left, Right
// LMB 			= Movement Direction
// RMB 			= Third Person Camera
// Wheel		= Zoom In/Out

// Setup the scene
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
scene.background = "#000000"
const gridHelper = new THREE.GridHelper( 100, 100 );
scene.add( gridHelper );
const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set(50, 70, 100)
scene.add( directionalLight );
const light = new THREE.AmbientLight( 0x707070 ); // soft white light
scene.add( light );


const clock = new THREE.Clock();

const pressed={};
const cameraDefault = new THREE.Spherical(1, Math.PI / 180 * 70, 0); 
const cameraDirection = new THREE.Spherical(1, 0, 0).copy(cameraDefault); 
const mouse = new THREE.Vector2(0,0);
const lastMouse = new THREE.Vector2(0,0);
const orbit = new THREE.Spherical(1,0,0);
var buttonDown = -1; 
const speed = 3.0 ;
var run = false ;
const turnSpeed = Math.PI / 2 ;
var cameraDistance = 5.0 ;
const up = new THREE.Vector3(0, 1, 0);
const playerHeadOffset = new THREE.Vector3(0, 1.6, 0) ;

const playerPos = new THREE.Vector3(0, 0, 0)
const player = new THREE.Group() ;
const playerBody = new THREE.Mesh(
	new THREE.BoxGeometry(0.7, 1.2, 0.5), 
  new THREE.MeshStandardMaterial({color:"green"})) ;
playerBody.position.set(0, 0.6, 0);
player.add(playerBody) ;
const playerHead = new THREE.Mesh(
	new THREE.BoxGeometry(0.4, 0.4, 0.4), 
  new THREE.MeshStandardMaterial({color:"yellow"})) ;
playerHead.position.copy(playerHeadOffset);
player.add(playerHead) ;
player.position.copy(playerPos) ;
scene.add(player);

// Working variables prevent memory allocations
const _cameraPos = new THREE.Vector3(0, 0, 0)
const...