Hide cursor while allowing camera controls?

[ev88]

How would I go about hiding the cursor but still allowing the user to rotate the model with their mouse by dragging? I'd like to record a video of me rotating the object, but not have the cursor shown. I've tried all the CSS tricks but nothing has worked. Disabling pointer events does hide the cursor, but also disables me from dragging/rotating the model.

[samaneh-kazemi]

Hi @ev88, can you please share a link so we can repro what you mean? You can try by remixing our glitch link:
https://glitch.com/edit/#!/model-viewer

[ev88]

Here is a link to the page I'm working on.

https://3d.solutioserver.com/5g/phone/

I've tried adding 'cursor: none' to the html, body, and model-viewer HTML elements but it doesn't seem to have any effects. The only one that did was adding 'pointer-event: none', but again that also removed the ability to drag. Let me know if you prefer I use the glitch link. The one I shared is pretty bare-bones though, nothing really custom.

[elalish]

I don't think that's possible at the moment. We change the cursor style inside our ShadowDOM, so I don't think you have control. You could remove camera-controls and then make your own listeners to move the model, or just use the keyboard.

[Traffy99]

After fiddling around with injecting code into Shadow Root (where the canvas for most interactions with models reside) this code worked for me (using jQuery for DOM selection stuff, can of course be done using the classic document.getElementByTag(....)).
$($('model-viewer')[0].shadowRoot).find('div.userinput').css('cursor', 'none').on('mousedown click', ()=>{ $($('model-viewer')[0].shadowRoot).find('div.userinput').css('cursor', 'none') $($('model-viewer')[0].shadowRoot).find('div.userinput:focus').css('outline', 'none') }) }
It removes cursor as default + click and mousedown interactions. As a bonus, modified another property - focus, model view has an outline if focused and moved with keyboard arrows, so it can also be removed like this.