Three.js: car orbit controls code won't work - function

Question

I'm an absolute beginner in coding in general. I was trying to adapt the code for controlling a car from this codepeninto my project structure.
Here is my code:
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import "./styles.css";
// TASK 2
//let timer = setInterval(myTimer, 1000); //isn't it supposed to show something?
//function myTimer(){
// let d = new Date();
// document.getElementById("demo").innerHTML = d.toLocaleTimeString();
//}
// TASK 3.1
//document.getElementById("app").innerHTML =`
//<h1>Hello Vanilla</h1>
//<div>
// We use the same configuration as Parcel to bundle this sandbox, you can find more
// info about Parcel
// here
//</div>`
// TASK 3.2
let scene, camera, renderer;
let geometry, material, cube;
let colour, intensity, light;
let ambientLight;
let orbit, controls;
let listener, sound, audioLoader;
let clock, delta, interval, elapsedTime, lastElapsedTime, deltaTime, tick;
let sceneHeight, sceneWidth;
let size, divisions;
let car, body, bonnet, wheels;
let leftPressed, rightPressed, upPressed, downPressed;
let startButton = document.getElementById("startButton");
startButton.addEventListener("click", init);
function init() {
//alert("We have initialised!");
let overlay = document.getElementById("overlay");
overlay.remove();
sceneWidth = window.innerWidth;
sceneHeight = window.innerHeight;
//create our clock and set interval at 30 fpx
clock = new THREE.Clock();
delta = 0;
interval = 1 / 30;
lastElapsedTime = 0;
//create the scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdfdfdf);
//create fog
const fog = new THREE.Fog(0xc3ebcd, 15, 40);
scene.fog = fog;
//creating camera (fos,aspect,near,far)
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
camera.position.y = 5;
//skybox https://www.youtube.com/watch?v=PPwR7h5SnOE
let skyboxLoader = new THREE.CubeTextureLoader();
let skyboxTexture = skyboxLoader.load([
"./assets/skybox/xpos.png",
"./assets/skybox/xneg.png",
"./assets/skybox/ypos.png",
"./assets/skybox/yneg.png",
"./assets/skybox/zpos.png",
"./assets/skybox/zneg.png"
]);
scene.background = skyboxTexture;
//plane (ground) https://www.youtube.com/watch?v=PPwR7h5SnOE
let plane = new THREE.Mesh(
new THREE.PlaneGeometry(100, 100, 1, 1),
new THREE.MeshStandardMaterial({ color: 0xc3ebcd })
);
plane.castShadow = false;
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
//specify and adding renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//create orbit controls to interact with mouse
orbit = new OrbitControls(camera, renderer.domElement);
orbit.maxPolarAngle = 80 * (Math.PI / 180);
orbit.minDistance = 3;
orbit.maxDistance = 50;
orbit.enableDamping = true;
//CAR https://codepen.io/johndownie/pen/abjbLzy
car = new THREE.Group();
body = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({
color: "blue",
roughness: 0.5
})
);
body.position.y = 0.2;
body.castShadow = true;
bonnet = new THREE.Mesh(
new THREE.BoxGeometry(1, 0.5, 0.5),
new THREE.MeshStandardMaterial({
color: "blue",
roughness: 0.5
})
);
bonnet.position.z = -0.75;
bonnet.position.y = -0.25 + 0.2;
bonnet.castShadow = true;
wheels = [
{
name: "wheel1",
rotation: {
x: 0,
y: 0,
z: Math.PI * 0.5
},
position: {
x: 0.5 + 0.3 * 0.5,
y: -0.2,
z: 0.2
}
},
{
name: "wheel2",
rotation: {
x: 0,
y: 0,
z: -Math.PI * 0.5
},
position: {
x: -(0.5 + 0.3 * 0.5),
y: -0.2,
z: 0.2
}
},
{
name: "wheel3",
rotation: {
x: 0,
y: 0,
z: -Math.PI * 0.5
},
position: {
x: -(0.5 + 0.3 * 0.5),
y: -0.2,
z: -0.7
}
},
{
name: "wheel4",
rotation: {
x: 0,
y: 0,
z: Math.PI * 0.5
},
position: {
x: 0.5 + 0.3 * 0.5,
y: -0.2,
z: -0.7
}
}
];
for (let i = 0; i < wheels.length; i++) {
const wheel = new THREE.Mesh(
new THREE.CylinderGeometry(0.3, 0.3, 0.3, 10),
new THREE.MeshStandardMaterial({
color: 0x000000,
roughness: 0.5
})
);
wheel.rotation.set(
wheels[i].rotation.x,
wheels[i].rotation.y,
wheels[i].rotation.z
);
wheel.position.set(
wheels[i].position.x,
wheels[i].position.y,
wheels[i].position.z
);
wheel.name = wheels[i].name;
wheel.castShadow = true;
car.add(wheel);
}
car.add(body);
car.add(bonnet);
car.position.set(0, 0.5, 0);
scene.add(car);
//KEYBOARD SETUP
// Set up the key codes for the arrow keys
const LEFT_ARROW = 37;
const UP_ARROW = 38;
const RIGHT_ARROW = 39;
const DOWN_ARROW = 40;
// Set up a flag to track which keys are currently being pressed
let leftPressed = false;
let upPressed = false;
let rightPressed = false;
let downPressed = false;
// Listen for keydown events
document.addEventListener("keydown", function (event) {
// Check which key was pressed
switch (event.keyCode) {
case "LEFT_ARROW":
leftPressed = true;
break;
case UP_ARROW:
upPressed = true;
break;
case RIGHT_ARROW:
rightPressed = true;
break;
case DOWN_ARROW:
downPressed = true;
break;
default:
break;
}
});
// Listen for keyup events
document.addEventListener("keyup", function (event) {
// Check which key was released
switch (event.keyCode) {
case LEFT_ARROW:
leftPressed = false;
break;
case UP_ARROW:
upPressed = false;
break;
case RIGHT_ARROW:
rightPressed = false;
break;
case DOWN_ARROW:
downPressed = false;
break;
default:
break;
}
});
//First Person Camera https://www.youtube.com/watch?v=oqKzxPMLWxo
//controls = new FirstPersonControls(camera, renderer.domElement);
//controls.movementSpeed = 5;
//controls.lookSpeed = 0.8;
//fpsCamera = new FirstPersonCamera(this.camera, this.objects);
// lighting
colour = 0xffffff;
intensity = 1;
light = new THREE.DirectionalLight(colour, intensity);
light.position.set(100, 100, 100);
light.target.position.set(0, 0, 0);
light.castShadow = true;
scene.add(light);
ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// create a box to spin
//geometry = new THREE.BoxGeometry();
//material = new THREE.MeshNormalMaterial(); // Change this from normal to Phong in step 5
//cube = new THREE.Mesh(geometry, material);
//cube.position.set(0, 1, 0);
//cube.castShadow = true;
//cube.receiveShadow = true;
//scene.add(cube);
//SOUND (for single source and single listener)
listener = new THREE.AudioListener();
camera.add(listener);
sound = new THREE.PositionalAudio(listener);
audioLoader = new THREE.AudioLoader();
audioLoader.load("./sounds/CPC_Basic_Drone_Loop.mp3", function (buffer) {
sound.setBuffer(buffer);
sound.setRefDistance(5); //a double value representing the reference distance for reducing volume as the audio source moves further from the listener – i.e. the distance at which the volume reduction starts taking effect. This value is used by all distance models.
sound.setDirectionalCone(180, 230, 0.1);
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
});
//resize window
window.addEventListener("resize", onWindowResize, false);
//strech goal: add gridHelper
size = 20;
divisions = 20;
//let gridHelper = new THREE.GridHelper(size, divisions);
//scene.add(gridHelper);
play();
}
//stop animation
function stop() {
renderer.setAnimationLoop(null);
}
// simple render function
function render() {
//controls.update(clock.getDelta());
camera.position.z = car.position.z + 8;
camera.position.x = car.position.x + 8;
camera.lookAt(car.position);
renderer.render(scene, camera);
}
//start animation
function play() {
//callback — The function will be called every available frame. If null is passed it will stop any already ongoing animation
renderer.setAnimationLoop(() => {
update();
render();
});
}
//our update function
function update() {
//orbit.update();
//cube.rotation.x += 0.01;
//cube.rotation.y += 0.04;
//cube.rotation.z -= 0.01;
tick = () => {
elapsedTime = clock.getElapsedTime();
deltaTime = elapsedTime - lastElapsedTime;
lastElapsedTime = elapsedTime;
// Update the car's rotation based on which arrow keys are being pressed
if (leftPressed) {
car.rotation.y += Math.PI / 45; // Rotate the car 4 degree clockwise
}
if (rightPressed) {
car.rotation.y -= Math.PI / 45; // Rotate the car 4 degree counterclockwise
}
const vector = new THREE.Vector3(); // create once and reuse it!
// Get the car's forward direction vector
const forward = car.getWorldDirection(vector);
// Set up the speed at which the car will move
const CAR_SPEED = deltaTime * 20;
// Update the car's position based on its forward direction and speed
if (upPressed) {
car.position.x -= forward.x * CAR_SPEED;
car.position.y -= forward.y * CAR_SPEED;
car.position.z -= forward.z * CAR_SPEED;
car.getObjectByName("wheel1").rotation.x -= CAR_SPEED;
car.getObjectByName("wheel2").rotation.x -= CAR_SPEED;
car.getObjectByName("wheel3").rotation.x -= CAR_SPEED;
car.getObjectByName("wheel4").rotation.x -= CAR_SPEED;
}
if (downPressed) {
car.position.x += forward.x * CAR_SPEED;
car.position.y += forward.y * CAR_SPEED;
car.position.z += forward.z * CAR_SPEED;
car.getObjectByName("wheel1").rotation.x += CAR_SPEED;
car.getObjectByName("wheel2").rotation.x += CAR_SPEED;
car.getObjectByName("wheel3").rotation.x += CAR_SPEED;
car.getObjectByName("wheel4").rotation.x += CAR_SPEED;
}
// Update controls
// controls.update();
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();
}
function onWindowResize() {
sceneHeight = window.innerHeight;
sceneWidth = window.innerWidth;
renderer.setSize(sceneWidth, sceneHeight);
camera.aspect = sceneWidth / sceneHeight;
// Always call updateProjectionMatrix on camera change
//camera.updateProjectionMatrix();
}
Any help is much appreciated!!
However, not sure if I put the loops in the right function (whether update or renderer function). The car won't move.