1

I am building a vscode extension that creates a webview panel. This panel uses threejs to render a 3d scene - this happens successfully. Unfortunately, no matter what I try, I cannot get the pointer to lock to the canvas with the scene and in the webview developer tools console, I see this message whenever I requestPointerLock()

"Uncaught (in promise) DOMException: The root document of this element is not valid for pointer lock"

This took me into the world of iframes which webview panels use to create the html document however all the iframes (when I look at the elements) that are created as part of the webview panel have "allow-pointer-lock" - as mentioned here https://github.com/microsoft/vscode/issues/104169 - so I don't think that is the problem.

I have been fiddling for hours trying to get this working or at least get an answer as to why it doesn't work/isn't supported but have made no progress. Has anyone had any success with getting pointer lock to work with a webview panel in their extensions?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
anonymous_vegetable
  • 11
  • 2
  • Having the same issue. Assume you never figured out how to handle this? – Brian F Leighty Jun 29 '22 at 15:48
  • I'm sorry to see that you're going through the same trouble I did searching everywhere for something about this issue. Currently I have no solution and I have more or less given up for now. – anonymous_vegetable Jun 29 '22 at 18:23
  • This wouldn't help in your case as you actually want to keep the mouse locked but in my case I was able to find an improvement by using setPointerCapture as I did here: https://github.com/rokucommunity/vscode-brightscript-language/pull/410/files#diff-fa0e0a0f01fe9a011f015ea8791b228a94f2f7fc9d52e484fb9bb461bfee64d0R119 – Brian F Leighty Aug 25 '22 at 15:29

0 Answers0