My iPhone running on iOS 13.7 has been able to flawlessly run all the three.js examples, including fat lines and orbit controls.
However, when I try to run my own code on mobile, it doesn't seem to work. You can check out the source code and the uploaded website for reference. It works fine on Edge and Chrome browsers on my Windows computer.
I followed this answer that suggested adding "use strict"; to all .js files, even for imported modules, but it didn't help.
Any advice or clues on what might be causing my JavaScript code to break on mobile devices?
This is how I included the modules 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'
Here's a snippet from 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 looks like this:
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, focusing on the 2-sphere base space
var aspect = window.innerWidth / window.innerHeight;
var scale = 3;
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 setup
scene = new THREE.Scene();
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 = 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();
}