Show a custom marker (instead of mouse) when using PointerLockControls

Questions
1

Hi guys, any example around on how to show a custom marker when using PointerLockControls? The mouse is hidden when entering pointer lock, I would like to have a marker visible where the camera is looking to shoot rays for interaction.

2

Solved with css without threejs, you can just put a div in the center of the canvas:

let divTarget = document.createElement(“div”)
divTarget.style.width = “5px”
divTarget.style.height = “5px”
divTarget.style.background = “red”
divTarget.style.position = “absolute”
divTarget.style.top = “0”
divTarget.style.left = “0”
divTarget.style.right = “0”
divTarget.style.bottom = “0”
divTarget.style.margin = “auto”
divTarget.style.zIndex= “99”
document.appendChild(divTarget)

3

Yeah, using CSS is one possible approach. Another option is to render a sprite at the center position of the screen.