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

Question

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

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

这个答案建议添加“使用严格”； 到所有 .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'

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

Answer 1

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

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

这发生在使用#distanceToCenter_radians; 因为#符号是用于声明私有字段的保留键。 我建议您删除它以提高浏览器兼容性。 查看支持表，私有字段在 Firefox 和 14.0 以下的任何 Safari 上不起作用

编辑

修复 Firefox 错误后，我在 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;
    // ...

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

解决方案1：

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

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

在 Safari 中工作！

解决方案2：

我强烈建议你使用像 Babel 这样的转译器，它会读取你的前沿代码，并将其编译成所有浏览器仍然支持的旧 JavaScript 。 这消除了使用类、箭头函数、async/await 等很酷的东西进行编程时的头痛。

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

问题描述

1 个解决方案

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

编辑

解决方案1：

解决方案2：

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

问题描述

1 个解决方案

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

编辑

解决方案1：

解决方案2：

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