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. | |
---|---|---|
Controls | Three.js PointerLockControls (modified) and Camera movement. | |
Effects | Fade2Black, Tracers and Explosions, Smoke and Ship Wakes [fsim_FM2_ocean]. | |
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 | |
Objects | Load and move fixed, moving and animated objects. | |
Ocean | Generates ocean waves using iFFT. |
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 {PointerLockControls, moveCamera } from "https://PhilCrowther.github.io/Aviation/jsm/Controls.js"; import {initFad2Blk,moveFad2Blk initBullet,moveBullet, // My Airplane Bullets initXACBul,moveXACBul, // Other Airplane Bullets initAAAGun,moveAAAGun, // Fixed and Ship initGrdSmk,initGrdFyr, // Ground Smoke and Fire initAirSmk,initAirFyr, // Air Smoke and Fire initXSHWak,moveXSHWak, // Ship Wake } from "https://PhilCrowther.github.io/Aviation/jsm/Effects.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 {loadIsland,initIsland,moveIsland, // Islands loadFxdObj,initFxdObj,moveFxdObj, // Fixed Objects loadAnmFlg,moveAnmFlg, // Animated Flag loadXACVeh,initXACVeh, // Airplanes loadXSHVeh,initXSHVeh,moveXSHVeh // Ships loadMyPeep,moveMyPeep, // Animated People loadMyCrew,moveMyCrew, // Ship Crew } from "https://PhilCrowther.github.io/Aviation/jsm/Objects.js"; import {Ocean} from "https://PhilCrowther.github.io/Aviation/jsm/Ocean4t2.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.