On-Screen Buttons Not Working with Three.js Modules

I am finally converting my programs to work with three.js modules. So far, the progress has been slow but steady. I am doing this without using npm (I can only handle one challenge at a time!).

I am starting by converting a recent demo program where I used on-screen buttons to handle several operations that I had previously performed with a key press. The buttons worked great on both PC and Apple devices.

Here is the basic button definition and portions dealing with toggling the landing gear up/down.

CSS

button {
   -webkit-appearance: none;	
   font-family: Courier;
   font-size: 12pt;
   text-align: left;
   position: absolute;
   min-width: 80px;
   border-radius: 0;
   z-index: 1;
}

.lgearButton {
   right: 20px;
   top: 70px;
}

HTML

<button class="lgearButton" onclick="toggleLGear()">Gear</button>

The toggleLGear() is a function within the JS file and still works fine with a keypress.

My problem is that, with modules, the buttons do not work and I get an “uncaught reference” error, e.g., that toggleLGear is not defined.

What do I need to do to make this work with modules? Is there a problem with the code above that went undetected without modules (I have already found several examples of that happening)? Do I need to add an event listener to handle button presses?

BTW- The conversion process has been far less painful than anticipated. One problem that had me stumped for awhile was with Lensflare where you have to import both Lensflare AND LensflareElement (as shown in the examples). Another was with stats until I realized that container was an id and not a class. Apparently, none of the programs use WebGL.js anymore, so I deleted that.

The key word is scope that you need base your research on.
Start from here MDN
And here: Scope.html (457 Bytes)

1 Like

Thanks for the quick reply and the advice.
I have been able to make the buttons work by adding a listener to the JS code, e.g.:

HTML
<button id="LGB" class="lgearButton">Gear</button>

JS
document.getElementById("LGB").addEventListener("click", toggleLGear, false);

But I am always interested in making sure that I have the correct and the best answer - and that I have a better understanding what I am doing. So this will be very helpful.

EDIT
And now that I have examined the scope code, I see that you have given me a solution in the form of a module. So this will also be very educational. I have always tried to put my code into generalized subroutines, so that I easily copy and paste it into other programs. So I am looking forward to learning more about using and creating modules.

Old school scripter, I presume.

To be honest, I don’t like working with modules.
Running under strict mode and not being public makes standard scripts more pleasant to work with.
But since JavaScript is trending toward promises, async, await, and modules. One has to learn em to be on top the game.

Very old school. But I did not start using JS until recently, so I am still learning.

The big challenge with subroutines is to define your input and output variables and to be aware of what other general variables might be changed and to make sure that they don’t cause unexpected results. I am not sure if JS modules helps with that.

To maintain control, I am only using modules that I have saved to my website and not importing modules directly from the internet.

My current challenge is to figure out how to modify the PointerLockControls module so that it does not automatically rotate my camera, but instead returns the differences to me so that I can use them as I want. (I was able to do that on the non-module version.)

Start a new a new thread, showing what was done in standard script and what you like to accomplish in modular script. Make sure you put this scripter advice into work.

If you need help with setting up an easy editable page, I am here.

Also, I saw you having problems with stats.js (FPT counter), can offer a solution too.

Thanks. It appears that I have successfully created a stripped-down version of PointerLockControls that simply delivers the variables that I need. The stats.js counter is also working.

I have been uploading the various test versions to my website, running them on Chrome and then checking for errors. In both cases, Chrome sometimes gave me some odd error notices. For example, in one case, it told me that a variable was not defined, when it was. But after I fixed something else, everything worked and that error notice went away.

If you think it would be beneficial, I can try to post small examples of what I have done so that others can benefit or, alternatively, they can tell me what I have done wrong - which would be equally helpful to me.

Many years ago, I switched from Assembly Language programming on an Apple (6502) to an Amiga (68000). Thanks to feedback I received, I learned that I should not be simply throwing my program into RAM memory - as I had on the Apple. I needed to work through the ROM kernel, so that it could handle memory allocation. Also, the Amiga was the first multi-tasking PC, so I didn’t need to keep checking for input - .it would be delivered to me via a listener, like today. I had to completely rewrite my programs, but it was a great education - although in retrospect, I should have simply learned C.

Sounds like a good idea. There is nothing wrong in re-invention the Wheel, as long as its done in a new way.

Okay. I have done so. We’ll see what kind of feedback I get. It would be great if they could make the stripped down version one of their official modules.
Thanks for your help.

1 Like