How to add in Three.js PointerLockControl?

How to correctly add in Three.js PointerLockControl? I tried using examples, but no luck, always get some kind of error. I import libraries through the head part like that <script src="lib/controls/PointerLockControls.js"></script>

If I do this

function createControls(){
controls = new THREE.PointerLockControls( camera, document.body );}

I got error in PointerLockControls.jf file

ReferenceError: Vector3 is not defined

That line where error is, looks like this

    var vec = new Vector3();

Where to start and how to put it neatly in the code? I am using this one example. Thank you very much for your help. There is my code

/*
My WebGL App
*/
let mainContainer = null;
let fpsContainer
let stats = null;
let camera = null;
let renderer = null;
let scene = null;
// Global variables

function init(){
    if ( THREE.WEBGL.isWebGLAvailable() === false ) container.appendChild( WEBGL.getWebGLErrorMessage() );
    fpsContainer = document.querySelector( '#fps' );
    mainContainer = document.querySelector( '#webgl-secne' );
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xEEEEEE ); // http://www.colorpicker.com/
    scene.fog = new THREE.Fog( 0xffffff, 0, 750 );



    createStats();
    createCamera();
    createControls();
    createLights();
    createMeshes();
    createRenderer();
    renderer.setAnimationLoop( () => {
    update();
    render();
  } );
}

// Animations
function update(){

}

// Statically rendered content
function render(){
    stats.begin();
    renderer.render( scene, camera );
    stats.end();
}

// FPS counter
function createStats(){
    stats = new Stats();
    stats.showPanel( 0 );   // 0: fps, 1: ms, 2: mb, 3+: custom
    fpsContainer.appendChild( stats.dom );
}

// Camera object
function createCamera(){
    const fov = 75;
    const aspect =  mainContainer.clientWidth / mainContainer.clientHeight;
    const near = 0.1;
    const far = 500;    // meters
    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set( 0, 10, 0 );
}

// Interactive controls
function createControls(){}

// Light objects
function createLights(){}

// Meshes and other visible objects
function createMeshes(){
    const geo = new THREE.PlaneBufferGeometry(1000, 1000, 100, 100);
    const mat = new THREE.MeshBasicMaterial({ color: 0x98FB98, side: THREE.DoubleSide });
    const plane = new THREE.Mesh(geo, mat);
    plane.rotateX( - Math.PI / 2 );

    scene.add(plane);
}

// Renderer object and features
function createRenderer(){
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(mainContainer.clientWidth, mainContainer.clientHeight);
    renderer.setPixelRatio( window.devicePixelRatio );
    // renderer.setClearColor(0xEEEEEE);
    mainContainer.appendChild( renderer.domElement );
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}

window.addEventListener( 'resize', onWindowResize, false );
init();

It seems you are using the ES6 module version of PointerLockControls. If you are not using modules in your app, try it with the following file instead:

https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/PointerLockControls.js

three.js R110