ArcRotateCamera Mobile phones can't rotate

I downloaded an example from an Playground, but it couldn’t rotate on my mobile phone.Mobile phone online access to Playground is normal, download is not enough

Babylon.js sample code
    <!-- Babylon.js -->
    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/ammo.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");

    var createScene = function () {
    
        // This creates a basic Babylon Scene object (non-mesh)
        var scene = new BABYLON.Scene(engine);
    
    	/********** ARC ROTATE CAMERA EXAMPLE **************************/
    
        // Creates, angles, distances and targets the camera
    	var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
    
        // This positions the camera
        camera.setPosition(new BABYLON.Vector3(0, 0, -10));
    
        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);
    
    	/**************************************************************/
    
        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    	
    	//Materials
    	var redMat = new BABYLON.StandardMaterial("red", scene);
    	redMat.diffuseColor = new BABYLON.Color3(255, 0, 0);
    	redMat.emissiveColor = new BABYLON.Color3(255, 0, 0);
    	redMat.specularColor = new BABYLON.Color3(255, 0, 0);
    	
    	var greenMat = new BABYLON.StandardMaterial("green", scene);
    	greenMat.diffuseColor = new BABYLON.Color3(0, 255, 0);
    	greenMat.emissiveColor = new BABYLON.Color3(0, 255, 0);
    	greenMat.specularColor = new BABYLON.Color3(0, 255, 0);
    	
    	var blueMat = new BABYLON.StandardMaterial("blue", scene);
    	blueMat.diffuseColor = new BABYLON.Color3(0, 0, 255);
    	blueMat.emissiveColor = new BABYLON.Color3(0, 0, 255);
    	blueMat.specularColor = new BABYLON.Color3(0, 0, 255);
    	
    	// Shapes
    	var plane1 = new BABYLON.Mesh.CreatePlane("plane1", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    	plane1.position.x = -3;
    	plane1.position.z = 0;
    	plane1.material = redMat;
    	
    	var plane2 = new BABYLON.Mesh.CreatePlane("plane2", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    	plane2.position.x = 3;
    	plane2.position.z = -1.5;
    	plane2.material = greenMat;
    	
    	var plane3 = new BABYLON.Mesh.CreatePlane("plane3", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    	plane3.position.x = 3;
    	plane3.position.z = 1.5;
    	plane3.material = blueMat;
    	
    	var ground = BABYLON.Mesh.CreateGround("ground1", 10, 10, 2, scene);
    	
        return scene;
    
    };
    
    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
    var scene = createScene();

    engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>

Are you just opening the html on mobile or hosting it on a server ?

Odd, Try changing “preview.babylonjs.com” urls to “cdn.babylonjs.com”, could be something to do with 4.0.alpha…
and it shouldn’t be needed… but try adding HTML touch-action & tabindex to the canvas element like below:

<canvas touch-action="none" id="renderCanvas" tabindex="1"></canvas>
1 Like

Thank you for your attention. Both methods have been tested. Neither iPhone nor Android can rotate.

Thank you. Just follow your code.