Controlling glb file with wasd and third person camera.

Questions
1

Hello all! Beginner questions here!

I found this example of how to create a third person camera / camera controls for a box geometry. I’m trying to use this to learn how to do the same for a glb object. Anyone have any tips? I have the model imported but only the camera is able to follow the controls so far. I need to be able to treat the glb like an Object3D but im unsure of how to do so thus far. any and all kinds of guidance would be majorly appreciated.

import './style.css'
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { AmbientLight } from 'three';

// author: Fyrestar <info@mevedia.com>
var camera, scene, renderer, mesh, goal, keys;

var time = 0;
var newPosition = new THREE.Vector3();
var matrix = new THREE.Matrix4();

var stop = 1;
var DEGTORAD = 0.01745327;
var temp = new THREE.Vector3;
var dir = new THREE.Vector3;
var a = new THREE.Vector3;
var b = new THREE.Vector3;
var coronaSafetyDistance = 0.3;
var velocity = 0.0;
var speed = 0.0;
var model;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.set( 0, .3, 0 );
    
    scene = new THREE.Scene();
    

    const light = new AmbientLight(0xffffff, 10);
    scene.add(light);


    
    //const modelParent = new THREE.Object3D(loadingManager);
    var loader = new GLTFLoader();
    loader.load(
        'assets/newUFO.glb',
        ( glb ) => {
            //called when the resource is loaded
            model = glb.scene;
            model.position.set(0, 0, 0);
            scene.add( model );
            console.log(model)
            
            
        },
        // model = glb.scene,
        ( xhr ) => {
            // called while loading is progressing
            console.log( `${( xhr.loaded / xhr.total * 100
             )}% loaded` );
        },
       
    );

    //camera.lookAt( scene.model.position );

    mesh = new THREE.Mesh( model );
    
    goal = new THREE.Object3D;
    //follow = new THREE.Object3D;
    goal.position.z = -coronaSafetyDistance;
    goal.add( camera );
    scene.add( mesh );
 

    
    var gridHelper = new THREE.GridHelper( 40, 40 );
    scene.add( gridHelper );
    
    scene.add( new THREE.AxesHelper() );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
  
keys = {
    a: false,
    s: false,
    d: false,
    w: false
  };
  document.body.addEventListener( 'keydown', function(e) {
    
    var key = e.code.replace('Key', '').toLowerCase();
    if ( keys[ key ] !== undefined )
      keys[ key ] = true;
    
  });
  document.body.addEventListener( 'keyup', function(e) {
    
    var key = e.code.replace('Key', '').toLowerCase();
    if ( keys[ key ] !== undefined )
      keys[ key ] = false;
    
  });

}


function animate() {

    requestAnimationFrame( animate );
    
  speed = 0.0;
  if (model){
  if ( keys.w )
    speed = 0.01;
  else if ( keys.s )
    speed = -0.01;

  velocity += ( speed - velocity ) * .3;
  mesh.translateZ( velocity );

  if ( keys.a )
    mesh.rotateY(0.05);
  else if ( keys.d )
    mesh.rotateY(-0.05);
		
  
  a.lerp(mesh.position, 0.4);
  b.copy(goal.position);
  
    dir.copy( a ).sub( b ).normalize();
    const dis = a.distanceTo( b ) - coronaSafetyDistance;
    goal.position.addScaledVector( dir, dis );
    //wtemp.setFromMatrixPosition(goal.matrixWorld);
  }
    //camera.position.lerp(temp, 0.2);
    camera.lookAt( mesh.position );
    
    renderer.render( scene, camera );

}
2

This was very help full with me link

You can find it with this repo three-mesh-bvh