---

Three.js now uses JavaScript modules. A module generally includes a collection subroutines that you can use in your program. In many cases, the module creates a class which can be easily updated.

To reduce the size of our main program, we have moved as many subroutines to modules. To simplify calling these subroutines, we have created a multi-item general variable for each item. These variables are designated using a 3 character identifier followed by a dash (e.g. air_). To further reduce the size of our main program, these variables have been moved to a data file which is pre-loaded. Alternatively, they can be included in the main program.

Here, in alphabetical order, are several modules that we have created. These are in the GitHub jsm directory:

AnimFM2		Loads and animates our FM2 model.
Camera		Moves a camera defined in the main program.
Controls		PointerLockControls modified for use with our flight simulations.
Display		A Fade to/from Black subroutine.
Flight		The flight simulation module [fsim_FM2_ocean and fsim_Pup_land].
FlightH		A basic helicopter flight simulation module [fsim_U1H_land].
GrdMap		Simulates flight over a pre-textured flat surface.
GrdWtr		Textures ocean surfaces for use with the Ocean Module
GunASG		Creates guns with tracer bullets and explosions [fsim_FM2_ocean].
Objects		Loads and moves objects, including islands, hangars, and animated flags and people.
Ocean		Generates ocean waves using iFFT.
Smoke		Creates smoke plumes, ship wakes and jet exhaust.
Sounds		Loads and plays airplane and radio sounds [fsim_FM2_ocean].
Vehicles		Loads and moves animated ships and planes [fsim_FM2_ocean].

In order to use a module, you must first load the module into your program. This is done at the beginning of your program. If you are loading three.js modules, you must first create an importmap.

Here is a sample importmap for WebGPU which uses the latest version of three.js stored on CDN.

<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.176.0/build/three.webgpu.js",
            "three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.176.0/build/three.webgpu.js",
            "three/tsl": "https://cdn.jsdelivr.net/npm/three@0.176.0/build/three.tsl.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/",
            "stats-gl": "https://cdn.jsdelivr.net/npm/stats-gl@2.2.8/dist/main.js"
        }
    }
</script>

The last item is a performance indicator which displays framerate and other information. Make sure that the last entry does not have a trailing comma.

Now you can import three.js modules into your program. Here is an example:

import * as THREE from "three";
import {color,texture} from "three/tsl";
import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";
import {LensflareMesh,LensflareElement} from "three/addons/objects/LensflareMesh.js";
import Stats from "stats-gl";

Finally, you can import our custom modules into your program. Here is an example:

import {loadAirExt,loadAirInt,moveAirExt,moveAirInt
    } from "https://PhilCrowther.github.io/Aviation/jsm/AnimFM2a.js";
import {moveCamera
    } from "https://PhilCrowther.github.io/Aviation/jsm/Camera.js";
import {PointerLockControls
    } from "https://PhilCrowther.github.io/Aviation/jsm/Controls.js";
import {initFad2Blk,moveFad2Blk
    } from "https://PhilCrowther.github.io/Aviation/jsm/Display.js";
import {Flight,Mod360,PoM360,MaxVal,makMsh
    } from "https://PhilCrowther.github.io/Aviation/jsm/Flight4a.js";
import {GrdMap} from "https://PhilCrowther.github.io/Aviation/jsm/GrdWtr4c.js";
import {initBullet,moveBullet,	// My Airplane Bullets
        initXACBul,moveXACBul,	// Other Airplane Bullets
        initAAAGun,moveAAAGun,	// Fixed and Ship
    } from "https://PhilCrowther.github.io/Aviation/jsm/GunASG.js";
import {loadIsland,initIsland,moveIsland, // Islands
        loadFxdObj,initFxdObj,moveFxdObj, // Fixed Objects
        loadAnmFlg,moveAnmFlg,	// Animated Flag
        loadMyPeep,moveMyPeep,	// Animated People
    } from "https://PhilCrowther.github.io/Aviation/jsm/Objects.js";
import {Ocean} from "https://PhilCrowther.github.io/Aviation/jsm/Ocean4t2.js";
import {initGrdSmk,initGrdFyr,	// Ground Smoke and Fire
        initAirSmk,initAirFyr,	// Air Smoke and Fire
        initXSHWak,moveXSHWak	// Ship Wake
    } from "https://PhilCrowther.github.io/Aviation/jsm/Smoke.js";
import {loadXACVeh,initXACVeh,  // Airplanes
        loadXSHVeh,initXSHVeh,moveXSHVeh  // Ships
    } from "https://PhilCrowther.github.io/Aviation/jsm/Vehicles.js";

Since these modules are stored on my GitHub repo, you can load them from there. This should enable you to run and debug your program locally.