Listening to an click event inside this OOP file structure

Hi, I would like to utilize Bruno Simon’s OOP file structure to my personal project.
@HsiaoYao A Three.js Boilerplate based on OOP - Showcase - three.js forum (

One thing I’ve been working on is by clicking a div to change the controlers (OrbitControl <-> PointerLockControl). BUT I am stuck in listening click event on the div.

The are all good, but I don’t know why the click on the div didn’t work properly.

Sorry for this broad question, but I think I should work on listening to click event using this file structure. So any suggestion will be thankful.


go to css and for .control_switch change pointer-events: all; add this attribute then click event will work

Thank you, I have tried but it didn’t work. Maybe there are some other things that I missed.

show your code or css file

Sure, I have push to my github repo.

And here’s the code I add in .css file

And the when I click it, the pointerdown was printed.

The pointerdown was came from this line

BUT the control_switch event wasn’t triggered.

Thank you.

Also, I tried to comment out the

const experience = new Experience(document.querySelector('#three-canvas'));

and the click listener works

I think I might know how to solve my problem.
but still not so sure about it.
Apparently, it’s not listening using click keyword.
Maybe because the EventEmitter.js I have to use
pointerdown to make it listen.

const btn = document.querySelector('.control_switch');
        btn.addEventListener('pointerdown', () => {
   = !;


By changing to this, it works.


1 Like