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

【问题标题】：My three.js application is not running on mobile我的 three.js 应用程序没有在移动设备上运行
【发布时间】：2020-09-30 05:07:19
【问题描述】：

我在 iPhone 上运行 iOS 13.7，我尝试过的所有 three.js examples（包括粗线和轨道控制上的那些）在我的移动设备上都能完美运行。

但是，我似乎无法让自己的代码在移动设备上运行，请参阅 source code 和 uploaded website 以供参考。它适用于我的 Windows 计算机上的 Edge 和 Chrome。

answer 建议添加“use strict”；到所有 .js 文件，我什至对导入的模块都这样做了，但无济于事。

关于什么可能会破坏我的移动 JavaScript 代码的任何想法或提示？

这些模块是如何包含在 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>

初始化函数：

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();
}

【问题讨论】：

可能值得添加一些代码来展示您如何包含 three.js 并使用它。
感谢您的建议-在 hopf.js 中添加了 index.html、包含块和初始化函数。

标签： javascript mobile three.js

【解决方案1】：

您的网站也没有在 Firefox 上运行。如果你打开控制台，你会看到错误：

未捕获的语法错误：当前不支持私有字段

这发生在使用#distanceToCenter_radians; 的行上，因为# 符号是声明私有字段的保留键。我建议您删除它以提高浏览器兼容性。看支持表，private fields don't work on Firefox and any Safari below 14.0

编辑

修复了 Firefox 的 bug 后，我在 Safari 上进行了测试，在控制台中遇到了这个错误：

这是因为您的 baseSpaceCircle 类使用公共类字段，Safari 直到 14.0+ 版本才支持这些字段。

// These class variables won't work:
class baseSpaceCircle {
    distanceToCenter; // <- Safari 13 thinks this is a class method
    distanceToCenter_radians;
    circumference;
    // ...
}

我试图用一个起始值来初始化它们，但这也不起作用：

class baseSpaceCircle {
    distanceToCenter = 0;
    distanceToCenter_radians = 0;
    circumference = 0;
    // ...

这种方法产生了这个错误...... ...这导致我this explanation。从本质上讲，您的应用程序使用了相当先进的 JavaScript，而且它的许多功能还没有被所有浏览器实现，包括 iOS 和 MacOS 中的 Safari。私有字段、公共类字段以及所有这些基本上都是兼容性噩梦，因为它们太新了，浏览器需要一些时间才能赶上。

解决方案 1：

用this.xxx在你的构造函数中声明所有这些变量：

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

在 Safari 中工作！

解决方案 2：

我强烈建议您使用转译器like Babel, which reads your cutting-edge code, and compiles it into older JavaScript that all browsers still support。这让使用类、箭头函数、async/await 等很酷的东西的编程不再令人头疼。

【讨论】：

谢谢！这是我尝试封装所有类属性时的产物，但为了保持这个小脚本简单而放弃了。我删除了私有化符号，它现在可以在我机器上的 Firefox 上运行 - 但在 iOS 上仍然没有运气。
@Paul 我添加了第二部分，在 Safari 中调试，并解释如何修复它。
非常感谢！如果可以的话，我会再次投票。我在 JavaScript 方面不是很有经验，这意味着我不太了解语言/兼容性的规范和状态，所以我只是复制了我从 C++ 等中了解的概念。这将帮助我更加注意哪些代码实际在哪个环境下工作。编辑：不幸的是，在 Safari 上调试它不是我的选择，因为他们在 Windows 机器上摆脱了它 - 所以再次感谢您帮助我完成这项工作。
@Paul 是的，测试 Safari 有点困难。我最终不得不从 2013 年购买一台使用了 7 年的 MacBook 来测试 iPhone 和其他 Mac 环境。如果您需要更便宜的替代方案，您可以test on BrowserStack，它可以在他们的设备上远程运行您的网站，因此您不必购买所有可以想象的设备！