Listening to an click event inside this OOP file structure

[JimYuan]

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 (threejs.org)

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 window.events 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.

GitHub - ChenChihYuan/IFCjs_FPS at biggerProgectStructure

Thanks

[Gundeep_Singh]

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

[JimYuan]

@Gundeep_Singh

pointer-events

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

[Gundeep_Singh]

show your code or css file

[JimYuan]

Sure, I have push to my github repo.

GitHub - ChenChihYuan/IFCjs_FPS at biggerProgectStructure

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.

[JimYuan]

Thank you.

[JimYuan]

Also, I tried to comment out the

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

and the click listener works

[JimYuan]

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');
        console.log(btn)
        btn.addEventListener('pointerdown', () => {
            console.log('click')
            this.experience.camera.controls.enabled = !this.experience.camera.controls.enabled;

        });

By changing to this, it works.

Thanks!