Creating Helper Modules That are Compatible with Three.js

Questions
1

For the past couple of years, I have been working on a flight simulation “helper” program. The program is now in the form of a module that contains a general initialization and update along with some helpful subroutines - like Mod360 that converts +/- values to degrees.

Recently, I have noticed that many three.js programs use Class functions instead of what I would call traditional subroutines.

Question 1. Are class functions the preferred format to use with modules?
Question 2. Any suggestions regarding format, including style guides or online resources?

Also, prior to using modules, I included both global variables and the subroutines in my helper program. However, when switching to modules, I found that I need to put the global variables in a separate file that loads prior to the module, e.g.:

<script src="js/ACflytEZgvar.js"></script>
<script src="js/ACdataUS.FM2.js"></script>
<script type="module">
import [various three.js modules]
import {
	init3dFlyt,
	rote3dFlyt,
	Mod360,
	PoM360,
	MaxVal,
	RotVec,
	AirAxe,
	AirPBY 
} from "./mod136/js/ACflytEZmod.js";

Question 3. To minimize confusion, I would like to include both global variables and routines in the same module. Is that possible?

I realize that some of these questions may be extremely basic. If so, I don’t need a detailed response - just something to point me in the right direction.

2

If your object will inherit from a three.js object that uses ES6 Classes, the object must also use ES6 Classes. Anything that goes into the scene graph should extend THREE.Object3D, for example. So if you’re writing object-oriented code, you’ll probably want to use ES6 Classes.

But not all code needs to use classes or be object oriented at all… you can also just have a bunch of utility functions and that’s fine.

Question 3. To minimize confusion, I would like to include both global variables and routines in the same module. Is that possible?

If you intend for your module(s) to be used by other people, you’ll probably want to think about packaging them for NPM instead of distributing individual files. Most JS modules are distributed that way. This also means it doesn’t really matter how you organize your code internally — you can have separate files for constants, or not, it’ll all just be imported from a single NPM package by the end user.

Eloquent JavaScript is a good resource here: Modules :: Eloquent JavaScript

2 Likes
3

Thanks for the reply. Very helpful.

#1. Although I expect that the main routines will be used only to rotate and position the user aircraft, I have found that I can use linked three.js objects to calculate the rotations . So I might find that it is most useful to define the aircraft as an extension of a three.js object - in which case I need to follow the ES6 rules.

#3. That’s a good point. Although my demo programs are simple enough that I don’t need NPM, I expect that others will be using the helpers program in that environment. So I need to learn enough about NPM to understand how to package them for that environment.

Yesterday, I tried defining the global variables within the module using globalThis. That seemed to work, except that I got error messages whenever the variable was NOT used outside of the module. That seems like a strange limitation but I may be able to make it work.

Thanks for pointing me to Eloquent JavaScript. It looks exactly like what I need.