I'm using A-Frame on my project. There's this cursor component that enables you to interact with the elements by clicking, which is quite similar to DOM clicking.
However, the cursor clicking no longer works after I implemented my Pointer Lock. Pointer Lock works well for me, I can walk around and look around in my scene, and the cursor always appears in front of me.
Why is the clicking not working? I can confirm that the clicking works fine when I haven't entered the Pointer Lock mode. Thanks!
Link to my demo: http://zichao.co/exp/_simu/
I have added a listener on the '#floor'. If you successfully clicked the floor, the console should say 'hello'.
When you try to implement your PointerLock using the apis, first you need to define an element, and call element.requestPointerLock, is that right? The issue here is that element.
I took the a-scene as the element. What you should do is to take the canvas as the element - the canvas that is rendered later by a-frame, or three.js.
A $(document).ready() function is not able to return you the canvas because it is inserted into the dom by three.js, i.e. the dom is ready before canvas is created. What I do now is to set an interval to loop and check if canvas is created, and then activate the PointerLock.
Solved.