[SOLVED] How to <disable-pan> on mobile device; web components?

sashashort · November 11, 2025, 10:21pm

Hello everyone!!!

I’m working on one project and very-very close to nail everything down but facing another obstacles.

The main idea is to embed GS object into Framer website, keep interactivity like zoom in/out, scrolling (rotation) but disable panning ON MOBILE device!

The weird thing is that it works perfectly on desktop, you are not able to drag the object, only zoom in/out, limited rotation.

But when you open the same exact page on mobile device you are able to drag the object using two hingers.

ChatGPT (you can like it or not, but this thing helps me a lot, since I have 0 code knowledge) couldn’t solve this problem for me yet…

I also trying to add autorotation now, but looks like GPT can not figure it out also

Please HELP!!! SOS

will · November 12, 2025, 8:45pm

Did you write the camera controls? It sounds like your camera controls code has no panning implemented for mouse+keyboard but responds to touch (two fingers) to enable pan. You just need to track down the code that applies the panning and disable it.

sashashort · November 12, 2025, 9:50pm

Hey @will
Thank you for prompt response!

Just for you to understand the situation, I have 0 code knowledge, I use ChatGPT to help me with tasks I don’t understand.

Basically I took the code from Playcanvas Web Components Examples -

github.com

playcanvas/web-components/blob/main/examples/splat.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
        <title>PlayCanvas Web Components - 3D Gaussian Splat</title>
        <script type="importmap">
            {
                "imports": {
                    "playcanvas": "../node_modules/playcanvas/build/playcanvas.mjs"
                }
            }
        </script>
        <script type="module" src="../dist/pwc.mjs"></script>
        <link rel="stylesheet" href="css/example.css">
    </head>
    <body>
        <pc-app antialias="false" depth="false" high-resolution="false" stencil="false">
            <!-- Assets -->
            <pc-asset src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>

This file has been truncated. show original

(line 37 says “enablePan”: false)

and ask GPT to give me the code with same behavior, dark background and my .sog file

This is my github link with index.html file

github.com

sashashort/splat-viewer/blob/main/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <title>Splat Plate — Viewer</title>

  <!-- PlayCanvas web components -->
  <script type="importmap">
  { "imports": { "playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.mjs" } }
  </script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@latest/dist/pwc.mjs"></script>

  <style>
    html, body { margin:0; height:100%; overflow:hidden; background:#0b0b0b; }
    * { box-sizing: border-box; }
    .wrap { position:fixed; inset:0; }
    pc-app { position:absolute; inset:0; display:block; touch-action:none; user-select:none; }
  </style>
</head>

This file has been truncated. show original

I really appreciate your help, this small detail is a big deal for my project since it oriented on mobile phones only

Hope you can help me to solve it, since GPT stuck with this and I can’t move forward

will · November 13, 2025, 1:48pm

Oh, interesting. So if I run this PlayCanvas Web Components sample, I see the same thing:

You can pan on mobile but not desktop. I’ll check why that’s happening.

will · November 13, 2025, 2:44pm

Ah yes, so this is actually a bug in camera-controls.mjs.

I’ve logged an issue on GitHub:

The inimitable @KPal is working on a fix as I type.

will · November 13, 2025, 6:05pm

Update: fix is ready to be merged.

sashashort · November 13, 2025, 6:57pm

Hey @will

If I understand correctly there are no issues on my side or in my code, what was happening is a bug inside “camera-controls.mjs” and the changes will apply automatically to PlayCanvas Web Components Examples as well as inside of my project.

I just want to ask how long will it takes for changes to start working? Because I’m checking now and I don’t see any difference.

Sorry if I sound a little dumb, I’m trying my best to understand how everything works.

Sincerely,
@sashashort

will · November 13, 2025, 7:25pm

Correct.

We have to:

Merge the pull request on GitHub
Deploy a patch to the PlayCanvas Engine
You then need to bump your PlayCanvas Engine (playcanvas) NPM dependency to the updated version.

We will probably patch the engine within a few days.

sashashort · November 13, 2025, 7:31pm

Thank you very much for clarifying me, meanwhile I will open a new Help/support topic, because I need to achieve something else with my GS object.

Thanks again!!!
Great support, amazing products

will · November 14, 2025, 3:40pm

OK, Engine 2.13.1 is now out:

If you update, panning should be correctly disabled on mobile.

sashashort · November 15, 2025, 6:36am

OMG @will

You are the BEST! Have no words to describe my satisfaction about your and all Playcanvas team job.

Everything fixed now, panning is disabled on mobile!!!

Thank you very-very much!

Alex