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>