Javascript 未捕获的SyntaxError:无法在模块外部使用导入语句

3.js html，正文{边距：0；填充：0；溢出：隐藏} 让场景、摄影机、渲染器； 函数初始化{ 场景=新的三个场景； scene.background=new THREE.Color0xdddddd； 摄像头=新的三个。透视摄像头40，窗口。内宽/窗口。内高，15000； hlight=新的3.AmbientLight0x404040100； scene.addhlight； renderer=new THREE.WebGLRenderer{antialas:true}； renderer.setSizewindow.innerWidth，window.innerHeight； document.getElementById'webgl'。appendChildrenderer.doElement； let loader=new THREE.GLTFLoader；//这个错误，我在没有三个的情况下尝试了。只有GLTLOADER但不起作用 loader.load'scene.gltf'，functiongltf{ scene.addgltf.scene； 渲染器。渲染场景，摄影机； }; } 初始化； 。这本书的底部解释了发生了什么变化

短版本是three.js，改为更喜欢使用es6模块，因此

<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script>

let scene,camera,renderer;
function init(){
  ...
  THREE.GLTFLoader.load(...

如果要使用旧的方法标记样式，则需要确保使用来自而不是来自的文件

注意：必须使用此文件夹结构，因为examples/jsm文件夹中的文件（如GLTFLoader.js）通过相对但硬编码的路径引用其他各种文件（如three.module.js）。例如，在中有一行

import {stuff} from "../../../build/three.module.js";

新样式的几个优点是

各种模块可以拉入所需的其他部件

在过去，要使用一个额外的零件，可能需要添加1到10个其他标记。现在，您只需要导入1个部件，该部件就可以自行导入其他1到10个部件

如果您使用web builder构建页面，它可以删除您不使用的部分

有传言称，有计划在未来某个时候彻底废除这种方法

只是想弄清楚为什么ES6模块更好，为什么需要保持相同的结构

在r105之前的版本中，要使用EffectComposer，您需要执行以下操作

<script type="module">
import * as THREE from './build/three.module.js';
import {GLTFLoader} from './examples/jsm/loaders/GLTFLoader.js';

let scene,camera,renderer;
function init(){
  ...
  GLTFLoader.load(...

<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>

因此，您需要仔细查找它，它与EffectsComposer.js不在同一文件夹中。当你最终找到它时，你就添加它

<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>
<script src="threejs/examples/js/shaders/CopyShader.js"></script>

那太糟糕了

现在，从r105开始使用es6模块，您只需

import {EffectComposer} from './threejs/examples/jsm/postprocessing/EffectComposer.js';

这可以说是更好的选择。您不会收到其他错误，因为ES6模块版本EffectComposer.js可以引用它所需的文件、它的依赖项以及它本身。最后是对其依赖项的引用

import {
    Clock,
    LinearFilter,
    Mesh,
    OrthographicCamera,
    PlaneBufferGeometry,
    RGBAFormat,
    Vector2,
    WebGLRenderTarget
} from "../../../build/three.module.js";
import { CopyShader } from "../shaders/CopyShader.js";
import { ShaderPass } from "../postprocessing/ShaderPass.js";
import { MaskPass } from "../postprocessing/MaskPass.js";
import { ClearMaskPass } from "../postprocessing/MaskPass.js";

但是，正如您在上面所看到的，EffectsComposer.js希望three.module.js位于名为build 3 subfolders的文件夹中。它希望CopyShader.js位于名为shaders one文件夹的文件夹中。等等

换句话说，它需要相同的文件夹结构。

。这本书的底部解释了发生了什么变化

短版本是three.js，改为更喜欢使用es6模块，因此

<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script>

let scene,camera,renderer;
function init(){
  ...
  THREE.GLTFLoader.load(...

如果要使用旧的方法标记样式，则需要确保使用来自而不是来自的文件

注意：必须使用此文件夹结构，因为examples/jsm文件夹中的文件（如GLTFLoader.js）通过相对但硬编码的路径引用其他各种文件（如three.module.js）。例如，在中有一行

import {stuff} from "../../../build/three.module.js";

新样式的几个优点是

各种模块可以拉入所需的其他部件

在过去，要使用一个额外的零件，可能需要添加1到10个其他标记。现在，您只需要导入1个部件，该部件就可以自行导入其他1到10个部件

如果您使用web builder构建页面，它可以删除您不使用的部分

有传言称，有计划在未来某个时候彻底废除这种方法

只是想弄清楚为什么ES6模块更好，为什么需要保持相同的结构

在r105之前的版本中，要使用EffectComposer，您需要执行以下操作

<script type="module">
import * as THREE from './build/three.module.js';
import {GLTFLoader} from './examples/jsm/loaders/GLTFLoader.js';

let scene,camera,renderer;
function init(){
  ...
  GLTFLoader.load(...

<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>

因此，您需要仔细查找它，它与EffectsComposer.js不在同一文件夹中。当你最终找到它时，你就添加它

<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>
<script src="threejs/examples/js/shaders/CopyShader.js"></script>

那太糟糕了

现在，从r105开始使用es6模块，您只需

import {EffectComposer} from './threejs/examples/jsm/postprocessing/EffectComposer.js';

这可以说是更好的选择。您不会收到其他错误，因为ES6模块版本EffectComposer.js可以引用它所需的文件、它的依赖项以及它本身。最后是对其依赖项的引用

import {
    Clock,
    LinearFilter,
    Mesh,
    OrthographicCamera,
    PlaneBufferGeometry,
    RGBAFormat,
    Vector2,
    WebGLRenderTarget
} from "../../../build/three.module.js";
import { CopyShader } from "../shaders/CopyShader.js";
import { ShaderPass } from "../postprocessing/ShaderPass.js";
import { MaskPass } from "../postprocessing/MaskPass.js";
import { ClearMaskPass } from "../postprocessing/MaskPass.js";

但是，正如您在上面所看到的，EffectsComposer.js希望three.module.js位于名为build 3 subfolders的文件夹中。它希望CopyShader.js位于名为shaders one文件夹的文件夹中。等等

---

换句话说，它需要相同的文件夹结构。

我遇到了类似的问题，我就是这样解决的

在HTML中，添加其他脚本时，顺序很重要，因为它需要Three.js中的某些内容

应该是

   <script src="../build/three.min.js"></script>
   <script src="three.js-master/examples/js/controls/OrbitControls.js"></script>
   <script src="three.js-master/examples/js/loaders/GLTFLoader.js"></script>

---

我建议尝试从本地javascript文件夹导入，而不是使用fromjsm。我希望这能解决你的问题。

我遇到了一个类似的问题，我就是这样做的 我把它扔了

在HTML中，添加其他脚本时，顺序很重要，因为它需要Three.js中的某些内容

应该是

   <script src="../build/three.min.js"></script>
   <script src="three.js-master/examples/js/controls/OrbitControls.js"></script>
   <script src="three.js-master/examples/js/loaders/GLTFLoader.js"></script>

---

我建议尝试从本地javascript文件夹导入，而不是使用fromjsm。我希望这能解决你的问题。

你也可以挖苦别人，希望贬低别人的正确观点。但是，只要你明白引擎盖下发生了什么。您将始终能够推理并决定对您的用例来说什么是最好的和更可取的。我没有删除任何注释，即使我想删除，我也没有能力这样做。您完全有权随意更改three.js。将网格重命名为Foobar。剪下你不想要的部分。把它重构成别的东西。大多数人选择按原样使用它，它需要特定的文件夹结构。我不知道为什么这对你来说是一个如此重要的问题，但你有权发表自己的观点，为自己创造更多的工作。你一直偏离我所说的，因为你不能接受不同的观点。我从未说过要更改Three.js核心，就像Mesh一样，我甚至从未说过要更改示例文件实现，尽管您也可以这样做。我所说的是，任何人都可以而且应该改变模块导入路径，使之符合他们的喜好。Three.js合作者总是说示例文件只是示例文件。用户不需要按原样使用它们，它们是用来参考的，它们是用来适应的。更改模块导入路径只不过是意料之中的事。你也可以挖苦别人，希望降低别人的正确性。但是，只要你明白引擎盖下发生了什么。您将始终能够推理并决定对您的用例来说什么是最好的和更可取的。我没有删除任何注释，即使我想删除，我也没有能力这样做。您完全有权随意更改three.js。将网格重命名为Foobar。剪下你不想要的部分。把它重构成别的东西。大多数人选择按原样使用它，它需要特定的文件夹结构。我不知道为什么这对你来说是一个如此重要的问题，但你有权发表自己的观点，为自己创造更多的工作。你一直偏离我所说的，因为你不能接受不同的观点。我从未说过要更改Three.js核心，就像Mesh一样，我甚至从未说过要更改示例文件实现，尽管您也可以这样做。我所说的是，任何人都可以而且应该改变模块导入路径，使之符合他们的喜好。Three.js合作者总是说示例文件只是示例文件。用户不需要按原样使用它们，它们是用来参考的，它们是用来适应的。更改模块导入路径是意料之中的事情。