Menu
I am running iOS 13.7 on an iPhone and all the three.js examples I tried (including the ones on fat lines and orbit controls) work flawlessly on my mobile device.
However, I do not seem to be able to get my own code running on mobile, see the source code and the uploaded website for reference. It works on both Edge and Chrome on my Windows computer.
This answer suggested adding "use strict"; to all .js files, which I did even for the imported modules, but to no avail.
Any ideas or hints on what could be breaking my JavaScript code for mobile?
This how the modules were included in hopf.js:
import * as THREE from './three.module.js';
import { OrbitControls } from '/OrbitControls.js';
import { LineMaterial } from './LineMaterial.js';
import { LineGeometry } from './LineGeometry.js';
import { Line2 } from './Line2.js';
import { GUI } from './dat.gui.module.js';
import Stats from './stats.module.js'
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body { margin: 0; }
canvas { display: block; }
</style>
<title>Document</title>
</head>
<body>
<script type = "module" src = "hopf.js"></script>
</body>
The init-function:
function init() {
// Camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 1000);
camera.position.x = -3;
camera.position.y = 0;
camera.position.z = 0;
camera.lookAt(0,0,0);
// Orthographic camera, to focus on the 2-sphere base space
var aspect = window.innerWidth / window.innerHeight;
var scale = 3;
//orthCamera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.001, 1000);
orthCamera = new THREE.OrthographicCamera(-aspect*scale, aspect*scale, 1*scale, -1*scale, 0.001, 1000);
orthCamera.position.set(5,5,10);
orthCamera.lookAt(0,0,0);
// Scene for fiber projections
scene = new THREE.Scene();
// Scene for the 2-sphere base space
orthScene = new THREE.Scene();
// Objects
baseSpace_geometry = new THREE.SphereGeometry(1,30,30);
baseSpace_material = new THREE.MeshBasicMaterial({color: 0xfafafa});
baseSpace_material.transparent = true;
baseSpace_material.opacity = 0.5;
baseSpace = new THREE.Mesh(baseSpace_geometry,baseSpace_material);
baseSpace.position.x = 4.5;
baseSpace.position.y = -1;
orthScene.add(baseSpace);
// Renderer
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth , window.innerHeight );
renderer.autoClear = false;
// Controls
controls = new OrbitControls(camera, renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
document.body.appendChild(renderer.domElement);
stats = new Stats();
document.body.appendChild(stats.dom);
initGui();
baseSpaceCircles.push(new baseSpaceCircle(0, 2*Math.PI, 10, defaultRotation, new THREE.Vector3(0,0,0), 0.0));
onWindowResize();
render();
}
415
asked Oct 27 '25 08:10
Your website isn't running on Firefox either. If you open the console, you'll see the error:
Uncaught SyntaxError: private fields are not currently supported
which is happening on the line that uses #distanceToCenter_radians; because the # symbol is a reserved key to declare a private field. I recommend you remove it to improve browser compatibility. Looking at the support table, private fields don't work on Firefox and any Safari below 14.0
After fixing the Firefox bug, I tested it on Safari, and I ran into this error in the console:
This is because your baseSpaceCircle class uses public class fields, which are not supported by Safari until version 14.0+.
// These class variables won't work:
class baseSpaceCircle {
distanceToCenter; // <- Safari 13 thinks this is a class method
distanceToCenter_radians;
circumference;
// ...
}
I tried to initialize them with a starting value, but that didn't work either:
class baseSpaceCircle {
distanceToCenter = 0;
distanceToCenter_radians = 0;
circumference = 0;
// ...
this approach yielded this error...
... which led me to this explanation. In essence, your app is using pretty advanced JavaScript, and many of its features are not yet implemented by all browsers, including Safari in both iOS and MacOS. Private fields, public class fields, and all those are basically a compatibility nightmare because they're so new, and browsers take some time to catch up.
Declare all those variables inside your constructor with this.xxx:
class baseSpaceCircle {
constructor(distanceToCenter, /*...*/) {
this.distanceToCenter;
this.distanceToCenter_radians;
this.circumference;
this.pointCount;
}
//...
Works in Safari!
I strongly recommend you use a transpiler like Babel, which reads your cutting-edge code, and compiles it into older JavaScript that all browsers still support. This takes the headache out of programming with cool things like classes, arrow functions, async/await, etc.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
