search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.79k stars 35.31k forks source link

Touch controls fails in Firefox Mobile 68.11.0 since r130 #23108

Closed ghost closed 2 years ago

ghost commented 2 years ago

Describe the bug

In Firefox Mobile 68.11.0 (touchscreen), TrackballControls and OrbitControls fail in r130+. Those are the only controls I tested.

Testing with Firefox Mobile 68.11.0

Note Firefox Mobile 68.11.0 is the last version of Firefox Mobile which can use the full catalog of both desktop and mobile community add-ons. Firefox 68.11 was released on July 27, 2020 for Android only, gaining various security and stability fixes. With the first stable release of Firefox Daylight (Fenix), Firefox 68.11 is the last release for Firefox for Android codenamed Fennec. IceCatMobile (org.gnu.icecat) is based on Firefox Fennec. It is available from f-droid.org and its latest release is 68.4.2. Like Fennec 68.11.0, r129 works but r130 doesn't.

To Reproduce

Steps to reproduce the behavior:

  1. Use Firefox Mobile 68.11.0 or IceCatMobile 68.4.2
  2. Load the touchscreen example TrackballControls or OrbitControls
  3. Touchscreen controls (swipes, pinches, etc) don't work.

Code I used the following code to quickly test many versions by replacing both version numbers in the code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script type="module">

import { OrbitControls } from 'https://cdn.skypack.dev/three@0.130.0/examples/jsm/controls/OrbitControls.js';

import {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    BoxGeometry,
    MeshBasicMaterial,
    Mesh
} from 'https://cdn.skypack.dev/three@0.130.0/build/three.module.js';

const scene = new Scene();
const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );

const geometry = new BoxGeometry();
const material = new MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );
};

animate();
        </script>
    </body>
</html>

Expected behavior

I expect r130+ to continue touchscreen functionality for Firefox Mobile 68.11.0 and similar browsers like IceCatMobile 68.4.2.

Platform:

Mugen87 commented 2 years ago

Live example: https://jsfiddle.net/ofq78bsv/1/show

Mugen87 commented 2 years ago

I'm unable to reproduce the issue with Firefox 95.2.0 and Android 12 on a Pixel 4a. The latest official TrackballControls example also works as expected.

Mugen87 commented 2 years ago

Use Firefox Mobile 68.11.0 or IceCatMobile 68.4.2

Sorry but we do not support outdated Firefox versions. You have to stick to an older three.js version that can still run on these browsers.