0

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'.

Qin_Shihuang
  • 13
  • 2
  • Which component are you using to activate Pointerlock? Demo link might be helpful. – Don McCurdy Sep 23 '16 at 02:49
  • I implemented my own pointer lock using the web apis: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API and I have just added the link to my demo in the question. – Qin_Shihuang Sep 23 '16 at 03:54
  • [This was the issue I had](https://github.com/aframevr/aframe/issues/1935), which turned out not to be pointerlock-related after all. Once that is fixed, [mouse-controls](https://github.com/donmccurdy/aframe-extras/blob/master/src/controls/mouse-controls.js) will be a working example of clicking + pointerlock. – Don McCurdy Sep 24 '16 at 22:50
  • @DonMcCurdy Glad to hear you solved your problem! However, in my demo http://zichao.co/exp/_simu/ the cursor is hollow, it's the default ring shape. – Qin_Shihuang Sep 27 '16 at 02:36
  • @DonMcCurdy I've just figured out the issue.. turns out to be a misuse of the api. I have posted the answer below. Thanks man – Qin_Shihuang Sep 27 '16 at 03:18

1 Answers1

0

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.

Qin_Shihuang
  • 13
  • 2