FPS Sample

HTML

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>

CSS

body,
html {
  margin: 0%;
  padding: 0%;
}


#navBar {
  position: absolute;
  bottom: 0px;
  text-align: center;
  width: 100%;
  background-color: red;
  color: white;
  padding: 5px;
  }

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/controls/OrbitControls.js';
import Stats from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/libs/stats.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/loaders/DRACOLoader.js';

let camera, scene, renderer, stats, controls, loader, draco, envMap;

init();
animate();

function loadEnv () {
        const envType = 'jpeg'
        const urls = [`px.jpeg`, `nx.jpeg`, `py.jpeg`, `ny.jpeg`, `pz.jpeg`, `nz.jpeg`];
        const cubeMap = new THREE.CubeTextureLoader()
            .setPath(`https://acc-liveries.vercel.app/env/jpeg/`)
            .load(urls, function () {
                cubeMap.magFilter = THREE.LinearFilter;
                cubeMap.needsUpdate = true;
                envMap = cubeMap
                loadCar()
            });
}

function addFloor() {
    const floor = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshPhysicalMaterial({
        color: 0x111111
    }));
    floor.rotation.x = - Math.PI / 2;
    floor.receiveShadow = true;
    floor.castShadow = false
    scene.add(floor);
}

function loadCar() {
console.log('loading car')
    const url = 'https://acc-liveries.vercel.app/lexus-rcf-gt3/3d.gltf'
    loader.load(url, (gltf) => {
        gltf.scene.scale.set(0.01, 0.01, 0.01)
        const base = new THREE.MeshPhysicalMaterial({
            color: 0x111111,
            roughness: 0,
            reflectivity: 0.5,
            clearcoat: 1,
            envMap
        })
        
        const carbon = new THREE.MeshPhysicalMaterial({
            color: 0x111111,
            roughness: 0.5,
            reflectivity: 0.5,
            envMap
        })

        const chrome = new...