我的three.js 应用程序没有在移动设备上运行

Question

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.我在 iPhone 上运行 iOS 13.7，我尝试过的所有三个.js 示例（包括粗线和轨道控制上的示例）在我的移动设备上完美运行。

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.它适用于我的 Windows 计算机上的 Edge 和 Chrome。

This answer suggested adding "use strict";这个答案建议添加“使用严格”； to all .js files, which I did even for the imported modules, but to no avail.到所有 .js 文件，我什至为导入的模块做了，但无济于事。

Any ideas or hints on what could be breaking my JavaScript code for mobile?关于什么可能破坏我的移动 JavaScript 代码的任何想法或提示？

This how the modules were included in hopf.js:这就是模块如何包含在 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:索引.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();
}

Answer 1

Your website isn't running on Firefox either.您的网站也没有在 Firefox 上运行。 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;这发生在使用#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查看支持表，私有字段在 Firefox 和 14.0 以下的任何 Safari 上不起作用

EDIT编辑

After fixing the Firefox bug, I tested it on Safari, and I ran into this error in the console:修复 Firefox 错误后，我在 Safari 上对其进行了测试，在控制台中遇到了此错误：

This is because your baseSpaceCircle class uses public class fields, which are not supported by Safari until version 14.0+.这是因为您的baseSpaceCircle类使用公共类字段，Safari 直到 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.从本质上讲，您的应用程序使用了非常先进的 JavaScript，并且它的许多功能尚未被所有浏览器实现，包括 iOS 和 MacOS 中的 Safari。 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.私有字段、公共类字段以及所有这些基本上都是兼容性的噩梦，因为它们太新了，浏览器需要一些时间才能赶上。

Solution 1:解决方案1：

Declare all those variables inside your constructor with this.xxx :使用this.xxx在构造函数中声明所有这些变量：

class baseSpaceCircle {
    constructor(distanceToCenter, /*...*/) {
        this.distanceToCenter;
        this.distanceToCenter_radians;
        this.circumference;
        this.pointCount;
    }
    //...

Works in Safari!在 Safari 中工作！

Solution 2:解决方案2：

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 .我强烈建议你使用像 Babel 这样的转译器，它会读取你的前沿代码，并将其编译成所有浏览器仍然支持的旧 JavaScript 。 This takes the headache out of programming with cool things like classes, arrow functions, async/await, etc.这消除了使用类、箭头函数、async/await 等很酷的东西进行编程时的头痛。

我的three.js 应用程序没有在移动设备上运行

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-26 01:05:19

EDIT编辑

Solution 1:解决方案1：

Solution 2:解决方案2：

我的three.js 应用程序没有在移动设备上运行

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-26 01:05:19

EDIT编辑

Solution 1:解决方案1：

Solution 2:解决方案2：

解决方案1
1 已采纳 2020-09-26 01:05:19